http://ameblo.jp/seknik/から引っ越してきました。
いやー、アメブロの広告は日に日に酷くなってきましたね。FC2はスッキリしててとても心地良いです。
ところで…(ここからは備忘録)
このブログはFC2のデフォルトテンプレート「basic_white」をベースにカスタマイズしています。
basic_whiteとの主な違いは
- グリッドレイアウトの際、デフォルトでは横幅いっぱいになっている(以下「幅広」)の記事が最新の一つだけだが、カスタマイズし2エントリーにしている。
- グリッドレイアウトの際、デフォルトでは幅広記事も横幅が半分になっている(以下「幅狭」)記事と同様本文のテキストを詰めて表示し200文字で切る処理が行なわれているが、カスタマイズし幅広記事では本文がそのまま(続きを読むの前まで)表示されるようにした。またこれに合わせて幅広記事では高さが固定でなく自動調整されるようにした。
です。
このブログと同じようなレイアウトにしたい、って人のために、以下にテンプレートのカスマイズ箇所を書いておきますので、参考にしてください。
幅広記事を最新2つにする
テンプレートのCSSで
#main_contents .grid_content:first-child, #main_contents .p_area { float: none; width: 100%; min-height: 110px; margin-left: 0; margin-right: 0; border-left: none; border-right: none; }
という箇所を
#main_contents .grid_content:nth-child(1), #main_contents .grid_content:nth-child(2), #main_contents .p_area { float: none; width: 100%; min-height: 110px; margin-left: 0; margin-right: 0; border-left: none; border-right: none; }
にします。これで、2つ目の記事までは幅広になります。ただし、デフォルトでは記事表示が5件のため、右下に空欄枠ができてしまい中途半端になってしまいます。[環境設定]→[ブログ設定]→[記事の設定]で「最新記事一覧」と「記事(ページ別)」を6などの偶数にします。
幅広記事の本文をそのまま表示する
これがちょっとややこしいのですが、仕組みとしては本文縮小バージョンと本文完全バージョンを両方出力し、片方を非表示にする、というやり方になります。
まず、テンプレートHTMLの以下の箇所
<div class="entry_body"> <!--body_img--> <div class="entry_image"><%topentry_image></div> <div class="entry_discription"><%topentry_discription><%topentry_desc></div> <!--/body_img--> <!--body_img_none--><%topentry_discription><%topentry_desc><!--/body_img_none--> <p class="entry_more"><a href="<%topentry_link>" title="<%template_abs_link>"><%template_extend></a></p> </div>
を
以下のように編集します。
<div class="entry_body entry_wide"> <%topentry_body> <p class="entry_more"><a href="<%topentry_link>" title="<%template_abs_link>"><%template_extend></a></p> </div> <div class="entry_body entry_narrow"> <!--body_img--> <div class="entry_image"><%topentry_image></div> <div class="entry_discription"><%topentry_discription><%topentry_desc></div> <!--/body_img--> <!--body_img_none--><%topentry_discription><%topentry_desc><!--/body_img_none--> <p class="entry_more"><a href="<%topentry_link>" title="<%template_abs_link>"><%template_extend></a></p> </div>
要するに、(1)元のソース箇所にクラスentry_narrowを付加。(2)それを元にした本文表示版のentry_wideも作成する、ということです。entry_wideの方では<%topentry_discription>の変わりに<%topentry_body>を使用し、imgがある場合のサムネイル表示の箇所は削除します(本文に画像が表示されているので)。
次に、最初の2つだけentry_wideを、それ以降はentry_narrowを表示するようにCSSに記述します。一番下に追加します。
/*----カスタム--------------------*/ #main_contents .grid_content .entry_narrow { display:block; } #main_contents .grid_content .entry_wide { display:none; } #main_contents .list_content .entry_narrow { display:none; } #main_contents .grid_content:nth-child(1) .entry_narrow, #main_contents .grid_content:nth-child(2) .entry_narrow{ display:none; } #main_contents .grid_content:nth-child(1) .entry_wide, #main_contents .grid_content:nth-child(2) .entry_wide{ display:block; }
幅広記事の高さは自動にする
グリッド表示の場合、高さが310px固定になっているのですが、幅広記事に関しては本文の長さに依存するのでこれを自動にします。
#main_contents .grid_content:nth-child(1),
#main_contents .grid_content:nth-child(2),
#main_contents .p_area {
float: none;
width: 100%;
min-height: 110px;
margin-left: 0;
margin-right: 0;
border-left: none;
border-right: none;
height:auto;
}
以上です。
あとはお好みでフォントサイズなどを変えてください。
では。