Home > FC2ブログ > basic_white > basic_whiteテンプレート リスト表示で記事本文部分を完全な形式で表示

basic_whiteテンプレート リスト表示で記事本文部分を完全な形式で表示

 basic_whiteテンプレートのトップページなどでは記事本部分に書かれたリンクや文字色などのタグの指定は無効になります。これをリスト表示の時のみ、有効にする方法です。

 記事に追記がなく、記事本文の文章が短いブログ向けのカスタマイズです。

1:HTML

 場所はCtrl+Fキーで『%topentry_image』を検索。次の強調部分のコードを追加します。

<!--body_img-->
<div class="entry_image"><%topentry_image></div>
<div class="entry_discription grid_desc"><%topentry_discription><%topentry_desc></div>
<div class="entry_discription list_desc"><%topentry_body></div>
<!--/body_img-->

<!--body_img_none--><div class="grid_desc">
<%topentry_discription><%topentry_desc>
</div>
<div class="list_desc"><%topentry_body></div>

<!--/body_img_none-->

<p class="entry_more list_more<!--more_link-->link<!--/more_link-->"><a href="<%topentry_link>" title="<%template_abs_link>"><%template_extend></a></p>

テンプレートの利用時期によっては「entry_discription」が「entry_description」に、「topentry_discription」が「topentry_description」なっている場合がありますが、追加するコードは同じです。

 「<div class="grid_desc">」は必ず「<!--body_img_none-->」の直後に入れ、「</div><div class="list_desc"><%topentry_body></div>」は「<!--/body_img_none-->」の直前に入れてください。

2. スタイルシート

 スタイルシートに以下のコードを追加します。

 以上で完成です。

サムネイル以外の画像をすべて表示する

 上記のカスタマイズではサムネイルとの重複関係を考慮して記事本文内の画像を表示しないようにしています。画像をすべて表示する場合は以下のコードをHTMLに追加してください。

 場所はCtrl+Fキーで『initialize();』を検索。次の強調部分のコードを追加します。

};

<!--not_permanent_area-->jQuery('.content .entry_body').each(function(){var img=jQuery(this).find('.entry_image img').attr('src');
  jQuery(this).find('.list_desc img').each(function(){if(jQuery(this).attr('src')!=img){jQuery(this).css('display','inline');}});
});<!--/not_permanent_area-->


initialize();

サムネイルを表示せずに通常の記事本文を表示

 スタイルシートに以下のコードを追加してください。

 リスト表示では左側のサムネイルが非表示になり、記事本文がそのまま表示されるようになります。

リスト表示の高さを記事本文内容に合わせる

 スタイルシートに以下のコードを追加してください。

 記事本文が下部に設置されている続きを読むボタンに重なる場合は「padding-bottom: 30px;」を追加して余白を広げてください。数値を増やすと余白が増えます。

#main #main_contents .list_content .list_desc { /* リスト高さ調整 */
  min-height: 100px;
  padding-bottom: 30px;
}

 重ならない場合は不要です。


 スタイルシートの各値がどうしても反映されない時は「;」の直前に「 !important」をつけてみてください。

/* 例 */
margin: 0 !important;

 それでも正常にカスタマイズが反映されない場合は、別のカスタマイズの影響を受けている可能性があるので、そちらのコードの見直しや削除を行ってみてください。

 グリッド・リストともに記事本文を完全に表示する場合はトップページなどに通常の記事本文を表示をご覧ください。

関連記事
スポンサー リンク
コメント
#174 : No title
mayさん、こんばんわ。#166です。

ご回答ありがとうございます。
非常に参考になりました。
お蔭さまで、リスト表示形式で思い通りの表示にすることができました。

あと追加で申し訳ないんですが、リスト表示形式でまだ分からない部分がありましたので、『リスト表示のレイアウト調整・変更』の記事コメ欄に質問させていただきました。

お手隙のときにでもご回答いただければ幸いです。

では。

#185 : basic_white
最近この素晴らしいテンプレートに出会い、早速利用させてもらってます!

さて、リスト表示部分の写真画像で質問があります。

写真がメインのブログの為、写真が多く、また綺麗に見せたいので、記事内ではflickrを使用して写真を表示させています。

その為かリスト表示部分には記事だけ表示され、写真が表示されません。
(リスト部分をクリック⇒記事に移ると、ちゃんと全ての写真は表示されます。)

やはりfc2経由で写真を取り込まないとリスト部分には写真が表示されないのですかね?

記事内のトップの写真をリスト部分に表示させる方法はないでしょうか?

先生、ご教授お願いします!

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered