Home > FC2ブログ > basic_white > basic_whiteテンプレート リスト表示で画像の右側に記事タイトルや冒頭文を配置

basic_whiteテンプレート リスト表示で画像の右側に記事タイトルや冒頭文を配置

 basic_whiteテンプレートのリスト表示でサムネイル画像の右側に記事タイトルや日付、冒頭文を配置する方法です。

 HTMLの構成は変更せずにclassの付与とCSSだけで実装します。

1. HTML

 場所はCtrl+Fキーで『<body』を検索。以下の強調部分を追加します。他のカスタマイズで追加済みの場合は不要です。

<body<!--not_permanent_area--> class="np_area"<!--/not_permanent_area-->>

※body要素に「class="○○○"」という記述が既にある場合はclassの「""」中に「<!--not_permanent_area--> np_area<!--/not_permanent_area-->」を追加してください。

※「class="○○○"」が既にある場合
<body class="○○○<!--not_permanent_area--> np_area<!--/not_permanent_area-->">

2:HTML

 場所はCtrl+Fキーで『 p_area』を検索。以下の強調部分を追加します。

<div class="content entry grid_content<!--permanent_area--> p_area<!--/permanent_area--><!--not_permanent_area--> no_br<!--/not_permanent_area--><!--body_img_none--> bdyimgno<!--/body_img_none-->" id="e<%topentry_no>">

 テンプレートを使用し始めた時期によっては「<!--not_permanent_area--> no_br<!--/not_permanent_area-->」の部分がない場合もありますが、追加する位置は「" id="e」の直前であることに変わりはありません。

3:HTML

 場所はCtrl+Fキーで『"entry_body』を検索。以下の強調部分を追加します。

<div class="entry_body<!--body_img--> bdyimg<!--/body_img-->">

4. スタイルシート

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

 以上で完成です。

 サムネイルと右側部分の間隔は「padding-left」の数値を増やすことで広がります。逆に減らすと狭まります。

/* リスト表示 画像横タイトル */
.np_area #main #main_contents .list_content {
  padding-left: 250px; /* 画像の最大横幅+余白px */
}

サムネイルの横幅・高さの調整

スタイルシート

 場所はCtrl+Fキーで『#main_contents .entry_body .entry_image img』を検索。以下の2つの数値を増減させて調整します。widthの方が横幅、heightが高さです。

#main_contents .entry_body .entry_image img {
  max-width: 200px; /* リスト表示の時のサムネイルの幅の上限 */
  max-height: 250px;
  border: 4px solid #FFFFFF;
  -webkit-box-shadow: 0px 1px 1px 0px #999999;
  -moz-box-shadow: 0px 1px 1px 0px #999999;
  box-shadow: 0px 1px 1px 0px #999999;
}

 max-widthの値を変更した場合はその値+30程度の数を[4]で追加したスタイルシートコードにあるpadding-leftの値に上書きしてください。

 例えば「max-width: 230px」とした場合は「230+30」で「260」を指定します。

/* リスト表示 画像横タイトル */
.np_area #main #main_contents .list_content {
  padding-left: 260px; /* 画像の最大横幅+余白px */
}

※このブログで紹介している他のカスタマイズで画像の横幅を変更している場合はそちらの該当部分の横幅の値を変更してください。

リスト表示のレイアウト調整・変更を行っている場合

 リスト表示のレイアウト調整・変更のコードを使用している場合は「#main_contents .list_content .entry_body .entry_image{」の直前に「/*」を追加、「}」の直後に「*/」を追加してください。

/* リスト表示調整 */
/*
#main_contents .list_content .entry_body .entry_image{
  position: static; float: left; left: auto;
}
*/
#main_contents .list_content .entry_body .entry_image img {
  max-width: 230px; /* 画像の最大横幅 */
  max-height: 250px; /* 画像の最大高さ */
}
#main_contents .list_content .entry_body .entry_description,
#main_contents .list_content .entry_body .entry_discription {
  margin-left: 260px; /* 画像の最大横幅+余白30px */
  min-height: 0;
  overflow: hidden;
}
#main_contents .list_content .entry_body .entry_more {
  margin-left: 260px; /* 画像の最大横幅+余白30px */
  position: static; right: auto; bottom: auto;
}
#main_contents .list_content .entry_body {
  padding-bottom: 10px;
}
.list_content{clear: both;}
.entry_body:after{content:'.';visibility:hidden;display:block;clear:both;}
/* END */

 また続きを読むを固定している場合は以下のコードを削除してください(以下のコードがあれば削除)。

#main_contents .list_content .entry_body{position:relative;}
#main_contents .list_content .entry_body .entry_discription+.entry_more,
#main_contents .list_content .entry_body .entry_description+.entry_more {
  position: absolute; right: 0;bottom: 5px;
}

テンプレートの利用時期によっては「,~entry_description+.entry_more」の部分がない場合もありますが、同様に削除してください。

 サムイネルの大きさは「画像の最大横幅」と「画像の最大高さ」で調整できます。ここで指定したmax-widthの値+30程度の数を[4]で追加したスタイルシートコードにあるpadding-leftの値に上書きしてください。

#main_contents .list_content .entry_body .entry_image img {
  max-width: 230px; /* 画像の最大横幅 */
  max-height: 250px; /* 画像の最大高さ */
}

 トップページなど一覧ページにユーザータグを表示を使用し、タグが右寄りに表示される場合は、「リスト表示:横の位置調整」の値を「margin-left: 15px;」などに減らしてください。

関連記事
スポンサー リンク
コメント
#194 : No title
mayさん、こんにちわ。
質問した#175です。

ご回答ありがとうございます。
ほぼ思い通りのレイアウトにすることができました。

ただ、細かい点で恐縮ですが、記事タイトルとその下の日付との間隔が若干開き気味なのが気になってます。
この上下の幅を狭く調節するにはどうすればよいでしょうか?

ご回答、宜しくお願いいたします。
#199 : 記事タイトル下余白
コンバンハ
以下をスタイルシートに追加すると間隔が狭くなります。0の数値を増やすと間隔が広がります。
#main #main_contents .list_content h2.entry_header {margin-bottom: 0px;}/* 記事タイトル下余白 */
グリッドでも同じように減らす時は「.list_content 」を削除してください。
#main #main_contents h2.entry_header {margin-bottom: 0px;}/* 記事タイトル下余白 */
個別ページ以外でのみ適用したい場合は先頭に「.np_area 」を追加してください。
.np_area #main #main_contents(省略)
#202 : No title
mayさん、こんばんわ。
#175・194です。

いい塩梅に調節できました。
どうもありがとうございます。

あと、これも細かい点で恐縮なんですが、画像下のスペース(画像の底辺と記事枠との間)が若干開き気味なのが気になってます。今のところ画像上のスペース(画像の上辺と記事枠の間)の倍くらいの間隔になってます。

この間隔を狭く調節するにはどのようにすればよいでしょうか?
具体的には、画像上のスペースと同じような幅にしたいと考えてます。

お手隙のときにでもご回答、よろしくお願いいたします。

コメントの投稿

  

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

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

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

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

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

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