Big Bang

パソコンの電源を入れた時、メモリー空間に無限の宇宙が拡がる

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

| 2件のコメント

2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

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

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

ポータルページ


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

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

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

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

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

1.JavaScriptを使う。
2.スタイルシートを使う。

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

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

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

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

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

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

参考記事:
descriptionとkeywords(HTMLソースの確認方法が書いてあります)

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

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

<div id=”portal_left”>
<div class=”side”>
<div class=”side_title_box”>
<div class=”side_title”>プロフィール</div>

<div class=”profile_name_text”>
<div align=”center”>
<img src=”/dwm/wp-content/uploads/2013/08/816_1.jpg” width=”100″ border=”0″ class=”photo”>

<div align=”center” class=”profile_name” style=”font-size:12px”>
Tom さん
</div>
<div align=”left” class=”profile_introduction” style=”font-size:10px”></div>
<ul>
<li><a href=”http://fanblogs.jp/ayzfqir5/”>ブログを見る</a></li>
<li><a href=”http://fanblogs.jp/ayzfqir5/profile”>プロフィールを見る</a></li>
<li><a href=”http://fanblogs.jp/ayzfqir5/biography”>マイヒストリーを見る</a></li>
</ul>

</div>
</div>
</div>
</div></div>

<div id=”portal_right”>
<div class=”portal_title_box”><div class=”portal_title”>最新記事</div></div>
<div class=”portal_text”>

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

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

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

#portal_left{
	display:none;
}

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

参考記事:
ページの途中にリンクする(idについて詳しく説明しています)

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

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

真ん中のプロフィールが消えた

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

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

参考記事:
で、スタイルシートはどこに書くのか?(スタイルシートの開き方が書いてあります)

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

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

#portal_left{
	display:none;
}

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

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

スタイル適用後

display:none

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

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

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

display:none
それを表示しないで、なかったように扱う。(次の要素がずり上がってそこへ来る)

visibility: hidden
それを表示しないが、その場所を空けて空欄にする。

2件のコメント

  1. こんにちは また、おじゃましてます

    自分のサイトと他の方を見比べて、やはりもう少し何とかしたいと
    思ってました。

    公式のHELPは、あさっりと書かれているだけで読んでも
    よくわかりませんでした。

    TOMさんの説明は、わかりやすいです。
    +1ポチ です

  2. ありがとうございます。
    コメントもらうと励みになります。

コメントを残す

Top