ブログの特定の項目を消したい

ファンブログで、サイドバーにプロフィールが出ているブログがあるとします。
そのブログのポータルページに行くと真ん中にも大きくプロフィール欄がある。

どちらかを消したい。それが今回のお題。

もちろん、サイドバーのプロフィールを消すのは設定画面で出来ます。
ですがそうすると、普通のページでも表示されなくなります。

では、真ん中のプロフィールを消すか。

ところが、ファンブログのスキンはこんなカンジですごく大雑把というかブロック丸ごとまとめられていてユーザーが変更できなくなっています。

<div id="main">
	<div id="content">
</div>
	<div id="sidebar">
</div>
</div>

本来、スキンで訂正できればいちばん簡単なんですが、出来ないものはしかたがない。
ならアプローチとして２つの方法があります。

１．JavaScriptを使う。
２．スタイルシートを使う。

このブログではまだJavaScriptの使い方を説明していません。
JavaScriptは使えば強力ですが、反面ブラウザが重くなる。ですから使わなくて済むところではなるべく使いたくない。

で、実際にHTMLを読んだ結論は、真ん中のプロフィールを消すのはスタイルシートだけで出来ます。

ですが、サイドバーのプロフィールをポータルページの時だけ消すには、JavaScriptを使うしかないと思います。例外としてサイドバーの項目をすべて消したいというなら出来ます。

ということで、真ん中のプロフィールをスタイルシートで消します。

真ん中のプロフィールを消す

他の画面とレイアウトを合わせるという意味では真ん中を消す方が正解だと思います。
今回、スキンのHTMLはいじらないので、ブラウザでポータルページを表示してソースを見ます。

ソースを見ても当然プロフィールが２つあるはずで、どちらが真ん中のプロフィールか判別しなければなりません。上の図の場合だと、真ん中のプロフィールの下にすぐ「最新記事」と書いてあります。見たところ「最新記事」という文字はそれしかない。

ということでソースの中の「最新記事」という文字を探します。

ありました。すぐ上にプロフィールがあるので、多分これでしょう。
portal_leftのleftというのが気になります。
が、よく考えればportal_left、ポータルと書いてある。

とりあえず試すのが早い。
ということで、以前このブログで作ったスタイルシートコンバータを使います。

まず、スタイルシートコンバータのCSS欄に次を記入します。

#portal_left{
	display:none;
}

display:noneというのは表示しないという意味です。これの説明は最後にします。
ありがたいことにプロフィール欄はportal_leftというidの中に括られています。
idなので他の場所と重複しません。ですから他のものまで消える心配はありません。

そしてSOURCE or URL欄に、ポータルページのURLを打ち込んで、
スタイルシートコンバータの送信ボタンを押します。

見事に真ん中のプロフィールが消えて、その下にあった最新記事が上に上がっています。

ｘマークは、本来画像を表示するところですが、スタイルシートコンバータで読み込めない画像部分はｘマークになっています。

スタイルシートに書き込む

スタイルシートを開いて、portal_leftを探しましたが、見つかりませんでした。

そこで、新しくportal_leftの項目を作りました。書いた内容はスタイルシートチェッカーの時とまったく同じです。

#portal_left{
	display:none;
}

スタイルシートの編集画面にプレビューボタンがありますが、確認できるのはトップページだけです。トップページのサイドバーから、ポータルページへのリンクをクリックして見ましたが、新しいスタイルシートは適用されていませんでした。

しかし、保存ボタンを押してからポータルページを開くとちゃんとプロフィールは消えています。

display:none

今回使った、display:noneについて。

displayという属性には他にblockとinlineが指定できますが、説明しません。
今回はdisplay:noneで非表示になるということだけ覚えておいてください。

要素を非表示にするには他にvisibility: hiddenという方法もあるそうですが、
私は使ったことがありません。ふたつの違いは非表示になった場所（要素のあった場所）の
扱い方です。