KaRaKuRy

アクセスカウンタ

zoom RSS トップページから「ブログ名」や「ブログ紹介」やその内容を消す方法

<<   作成日時 : 2008/02/28 16:30   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 19 / トラックバック 6 / コメント 21

ウェブリ広場でよく見かける質問ですが、消したい部分ごとにまとめてみました。

「見出し」だの「中身」だの書いているとまぎらわしいので、下にプロフィール欄を真似してサンプルを作りました。番号で、どこを消すかの説明をしますね。
点線は範囲がわかりやすいようにつけています。

 
 【基本サンプル】
  • ブログ名
  •   みどり の ゆび
  • ブログ紹介
  •   ガーデニング大好きなミドリの庭日記です。
      花が好きな人、遊びにきてね!



1と3を消す(その一)
【サンプル】
  • ブログ名
  •   みどり の ゆび
  • ブログ紹介
  •   ガーデニング大好きなミドリの庭日記です。
      花が好きな人、遊びにきてね!

【方法】
「#profile dt」の項目の{ }の中に「visibility:hidden;」と書き込む。

/* ラベル(「ブログ名」「自己紹介」) */
#profile dt{
visibility:hidden;
}


1と3を消す(その二)
その一との違いは、消した項目のスペースが詰まること。
【サンプル】
  • ブログ名
  •   みどり の ゆび
  • ブログ紹介
  •   ガーデニング大好きなミドリの庭日記です。
      花が好きな人、遊びにきてね!

【方法】
「#profile dt」の項目の{ }の中に「display:none;」と書き込みます。

/* ラベル(「ブログ名」「自己紹介」) */
#profile dt{
display:none;
}


1と2と3を消す
【サンプル】
  • ブログ名
  •   みどり の ゆび
  • ブログ紹介
  •   ガーデニング大好きなミドリの庭日記です。
      花が好きな人、遊びにきてね!

【方法】
まず、CSS編集の画面のどこか分かりやすいところに、次のように書き込み、保存します。

#profile dl{
visibility:hidden;
}

↑これを書いた後にブログのトップページを見ると、1〜4までの全項目がきれいさっぱり消えていますが、びっくりしないようにね。
消えていない場合は、どこか間違ってます。単語のつづりなど確認してください。
次に、CSS編集ではなく「基本表示設定(ブログ紹介編集・デザイン)」を開き、「ブログ紹介(任意)」の欄の最初に
<div style="visibility:visible;">
と書き、終わりに
</div>
と書きます。
先ほど消した部分のうち、この二つで挟んだ部分だけが表示されるようになります。
↓サンプルではこんな感じ。

<div style="visibility:visible;"> ガーデニング大好きなミドリの庭日記です。
花が好きな人、遊びにきてね!</div>

これで4の中身だけ表示されます。
なお、この方法では消えた項目のスペースが詰まりません。
上の「1と3を消す(その二)」の設定と一緒に使うと、1・3の分だけは詰まります。
2の部分のみ、消し+スペース詰めができないのです…。
(4の上に空白の一行があるように見えてしまう。)熟練者のアイディア求む。

12/9追記 :詳しい説明は省きますが、とりあえず、

<div style="visibility:visible;">

のかわりに、

<div style="visibility:visible; margin-top:-1.3em">

とすれば、見せかけ上は、4の上の空白行がなくなります。
(この場合も最後の</div>は必要なので忘れないこと!)


1〜4まで全部消す(その一)
【サンプル】
  • ブログ名
  •   みどり の ゆび
  • ブログ紹介
  •   ガーデニング大好きなミドリの庭日記です。
      花が好きな人、遊びにきてね!

【方法】
「#profile」の項目をさがし、{ }内に「visibility:hidden;」と書きます。

#profile{
visibility:hidden;
}

この方法では、消えますがスペースは詰まりません。ちょっと違うけど、中身を透明にする感じかな。


1〜4まで全部消す(その二)
【サンプル】
  • ブログ名
  •   みどり の ゆび
  • ブログ紹介
  •   ガーデニング大好きなミドリの庭日記です。
      花が好きな人、遊びにきてね!

↑この上にあるんだけど、縦幅がなくなったので…みえますかー?
消えて、スペースが詰まります。
【方法】
「#profile」の項目をさがし、{ }内に「display:none;」と書きます。

#profile{
display:none;
}


チューリップの背景画像は素材配布サイト LITTLE NAP からいただきました。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 19
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
面白い 面白い 面白い
かわいい かわいい かわいい
ナイス ナイス
驚いた

トラックバック(6件)

タイトル (本文) ブログ名/日時
トップページのブログ紹介欄を変更する。
デフォルトの状態では、紹介欄を合わせると、ブログ名が2個表示されるので トップページのブログ名&ブログ紹介を消すカスタマイズを行いました。 ...続きを見る
Gift from the Sea
2009/05/19 22:28
CSS(小技編)プロフィール領域のブログ名を見えなくしてスッキリ♪ 【その2】
プロフィール領域の『ブログ名』と『ブログ紹介』を非表示にするCSS編集です。 非表示にする方法は以前にも書いたのですが、背景色に左右される方法でした。 今回は背景色に左右されない方法を書きますね(にこ) ...続きを見る
きまぐれAWA's Life
2010/03/28 22:23
「夜空」テンプレートのカスタマイズ(8)・・・プロフィール欄をスッキリ【改】
久々に、テンプレートのカスタマイズ・ネタです。自分のための覚え書きなので、ウェブリブログ・ユーザ以外の方はこの記事パスしてください。 ...続きを見る
オペラ対訳プロジェクト<業務連絡>
2010/04/23 21:31
フェラガモ 店舗
トップページから「ブログ名」や「ブログ紹介」やその内容を消す方法 KaRaKuRy/ウェブリブログ ...続きを見る
フェラガモ 店舗
2013/07/03 13:50
プラダ 店舗
トップページから「ブログ名」や「ブログ紹介」やその内容を消す方法 KaRaKuRy/ウェブリブログ ...続きを見る
プラダ 店舗
2013/07/07 05:14
プラダ バッグ
トップページから「ブログ名」や「ブログ紹介」やその内容を消す方法 KaRaKuRy/ウェブリブログ ...続きを見る
プラダ バッグ
2013/07/08 00:20

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(21件)

内 容 ニックネーム/日時
大変役に立ちました!
本当に、本当に有難うございます(涙
通行人
2008/03/02 16:50
お役に立ちましたかー。やった〜。ごちゃごちゃ書いたかいがありました!
ゆき
2008/03/02 18:19
こんにちは。助け合いの部屋で助けられた者です。
早速試してみました。なるほど、出来ました!が。。。紹介部に画像を添付してたのですが、画像が表示されなくなってしまいましたので、現在は元に戻しました。何か良い方法はありませんか?
たま
URL
2008/03/10 15:56
「えぇ!ブログ紹介画像が消える!?」と焦ってしまったんですが、多分そういう意味じゃないですよね;早とちり…。
たまさんの場合は、管理ページの「ブログ紹介画像(任意)」に画像リストから貼り付けしているわけじゃなくて、上のサンプルでいうと「4」の文章と同じところに画像を入れてて、「1と2と3を消す」の方法をやったら、「4」の欄にあるのに画像が消えちゃった、ということだと思うんですが、いかがでしょうか。
「1と2と3を消す」の方法の<div style="visibility:visible;"> は、「ブログ紹介(任意)」という編集欄の中身の、先頭に書いてください。画像があっても他の<div〜>とかがあっても、それより前です。とにかく一番前。
同じように、</div>は、最後尾に書いてください。
<div style="visibility:visible;">と</div>、これで挟んである部分「だけ」しか表示されません。
ゆき
2008/03/10 23:53
よく見たら、私が文中「紹介文の頭に」って不正確な説明してたせいですね。紛らわしくて大変ごめんなさい。
文章直しました。相談してくださって、ありがとうございました。
ゆき
2008/03/11 00:10
そうです、そうです!すっかり忘れてました、『管理ページの「ブログ紹介画像(任意)」』もあることを。ご理解していただきありがとうございます。
早速、教えていただいたとおり設定したところ、出来ました!お疲れとのところ、ありがとうございました。これからも、宜しくお願い致します。
たま
2008/03/11 11:11
覗かせていただきました。
スッキリしましたね〜。
こちらこそ宜しくです^^
ゆき
2008/03/11 16:14
久しぶりです
私も消したいと思っていました、スッキリしました。
いつも黙って盗んでいま〜すm(^^)m
masmai33
2008/08/10 13:16
使えそうなモノはどんどん持っていってください(笑)。
ああ、RSSリーダの記事書かなくちゃ…^^;
ゆき
2008/08/10 21:54
ゆきさん、はじめまして♪
とっても素敵なブログですねっ (^_^)

●「1と2と3を消す」について、
こんなアイデアはどうでしょうか?

#profile dt {display: none;}
#profile dl {visibility: hedden;} の後に、

#profile td {padding: 0px 0px 0px 0px;}

を入れてみると、かなーり間隔が詰まります♪
「上、下」に該当する数値をいじれば間隔調整も可です。

後はこれに、ゆきさんが追記された
「margin-top:-数値em」の技を併用すれば自由自在かも♪♪

●「1〜4まで全部消す」については、

#profile td {display: none;}

の一行だけで何もかも消えるような気がします。

ゆきさんのブログ、興味が湧く話題が満載で楽しいです。
これからも頑張ってくださいね (^_^)
Aki
2009/04/05 05:25
Akiさん、初めまして!ようこそいらっしゃいませ〜。

なるほど、#profile tdのpaddingで上下調整は、いいかもしれませんねー。
デザインテンプレートにもよりますが、ウェブリブログでは結構余白多めにとってあるのが多いので、そこを削れば、見た目1・2行くらいは詰まるかも。

「1〜4まで全部消す」のほうは、#profile td {display: none;}だと、tdの中身は消えますが、profileのidがついているtableタグが消えてないので、table周りのmarginが残ったり、デザインによっては枠線が残ったりするかもしれません。

>興味が湧く話題が満載で楽しいです。
ありがとうございます。どうぞまたいらしてください!
ゆき
2009/04/05 14:13
ゆきさん。

ゆきさんのブログのCSSを拝見させていただきましたら、
私の思いつきは「何をいまさら・・・」だったみたい(汗)。

「コレおもしろそう!」って、なーんにも考えずに、
思いついた勢いで書き込んでしまった自分が
とっても恥ずかしいです(汗、汗)。

トンチンカンな読者ですみません。
どうかお許しくださいませませ・・・(^o^;
Aki
2009/04/17 13:46
えぇ!何もとんちんかんなことないですよ〜。
ツッコミ大歓迎なので、ガシガシどうぞ!

「ブログのCSS」、customize.cssのことでしょうか
うちのは、ブログタイトルの#bannerと、#profileを横並びにするためにいろいろやってたり…。(^^;
ブラウザのバグに気付かないでしばらく悩んだ覚えがあります。
ゆき
2009/04/20 12:46
はじめまして。
こちらの記事とコメント、大変役に立ちました。
ありがとうございました。
なだお
2009/10/26 22:18
なだおさん、初めまして(^^)
どういたしましてです。
スタイリッシュなブログですね。
また何かありましたらどうぞ〜。
ゆき
2009/10/27 17:57
参考になります!ありがとうございます!
けいたつ
URL
2010/01/06 16:55
参考になります!ありがとうございます!
レズ 出会い
URL
2010/01/18 14:54
おすすめ☆大人向け絵本が読めるサイトです!ちょっぴりダークな世界が好きな方に♪
絵本 大人向け
URL
2010/01/25 13:39
参考になります!ありがとうございます!
逆援 掲示板
URL
2010/01/28 14:29
ありがとうございました〜!!
すごく助かりました^−^
亜子
2010/05/05 08:04
すごく助かりました(`・ω・´)ゞありがとうございます
クロママ
URL
2013/07/01 14:51

コメントする help

ニックネーム
URL(任意)
本 文

おもちゃ箱

Arcana Collection
詳細記事は→こちら
KaleidoRound
自分でつくれる万華鏡

記事をさがす

powered by Google
WWW KaRaKuRy
Neko

おもちゃ箱

【Hamster】
ちょたたたたっ。
詳細記事は→こちら
【Arcana Collection】
登録無しでもお試し戦闘ができるようになったよ。
詳細記事は→こちら
ブログ仲間s'新着記事tv 中継所
Powered By 画RSS

テーマ

トップページから「ブログ名」や「ブログ紹介」やその内容を消す方法 KaRaKuRy/BIGLOBEウェブリブログ
文字サイズ:       閉じる