Home > FC2ブログ > basic_white > basic_whiteテンプレート トップページなど一覧ページにユーザータグを表示

basic_whiteテンプレート トップページなど一覧ページにユーザータグを表示

 basic_whiteテンプレートはユーザータグが表示されません。これをトップページなどの一覧ページに表示させる方法です。

 記事部分は親要素の高さが固定な上に画像が絶対配置になっているため、設置の際には画像に合わせた余白を調整する必要があります。

 個別記事への設置については個別記事下にブログ内のユーザータグリンク設置をご覧ください。

1. HTML

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

</ul>
<div class="entry_body<!--topentry_tag--> u_tag<!--/topentry_tag-->">
<!--body_img-->

2. HTML

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

<p class="entry_more"><a href="<%topentry_link>" title="<%template_abs_link>"><%template_extend></a></p>
</div>

<!--topentry_tag--><ul class="entry_tag tag_ie"><!--tag_list-->
<li><a href="./?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a></li>
<!--/tag_list--></ul><!--/topentry_tag-->


<!--/not_permanent_area-->
<!--permanent_area-->

3. スタイルシート

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

 以上で完成です。


グリッド表示のタグの横位置をずらす

 追加したスタイルシートの次の部分の数値(4番目の15px)を増やすと右にずれます。

#main_contents .entry > .entry_tag {margin: 0 15px 0 15px; font-size: 83%;}

 グリッド表示の最初の記事だけずらす場合は以下のコードをスタイルシートに追加してください。数値を増やすと右にずれます。

#main #main_contents .top-contents + .grid_content > .entry_tag,
#main #main_contents .grid_content:first-child > .entry_tag {
  margin-left: 253px; /* グリッド最初の記事のタグ:横位置調整 */
}

記事の高さを変更する

 ユーザータグを設置するとその分だけ高さが増えます。ユーザータグの分だけ記事全体の高さを増やす場合は「グリッド表示の時の記事の高さ」の数値を適当に増やしてください。310px→330pxなど。

#main_contents .grid_content {
  float: left;
  margin-left: -1px;
  margin-right: -1px;
  width: 50%;
  height: 310px; /* グリッド表示の時の記事の高さ */
  border-left: 1px dotted #B5B5B6;
  border-right: 1px dotted #B5B5B6;
}

※このブログで紹介している他のカスタマイズで高さを指定するコードを追加した場合はそちらを変更してみてください。

 リスト表示の際の高さは以下の部分で調整できます。

#main_contents .entry_body .entry_discription,
#main_contents .entry_body .entry_description {
  margin-left: 238px; /* サムネイル幅を変更した場合はこちらも調整して下さい */
  min-height: 228px;
}

テンプレートの利用時期によっては「,~entry_description」の部分がない場合もありますが、調整する場所は同じです。

サムネイル画像の高さが大きい場合

 画像が縦長だとタグに重なることがあります。その場合は追加したスタイルシートの以下の数値を増やしてください。

#main #main_contents .grid_content .u_tag {
  margin-bottom: 50px; /* グリッド表示:縦長画像が多い時は数値を増やす */
}

 増やした分だけユーザータグの縦の位置が下ります。窮屈になる場合は記事の高さを増やしてください。

 逆にサムネイル画像がすべて横長の場合で無駄な余白を無くしたい時は数値を減らしてください。

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

 リスト表示のレイアウト調整・変更のコードを使用している状態で画像がタグに重なる場合は「リスト表示:横の位置調整」の数値に画像の最大横幅に50を加えた値を入れると画像より右側にタグが表示されます。画像の最大横幅が「max-width: 230px;」の時は「280」を指定します。

#main_contents .list_content > .entry_tag {
  margin-left: 280px; /* リスト表示:横の位置調整 */
}

表示するユーザータグの数を指定する

 タグの数が多すぎると記事が窮屈になったり、タグがはみ出たりします。その場合は表示するタグの数を3個までに減らすなどの措置を取ってください。

 以下のコードをスタイルシートに追加すると最大3個までの表示になります(4個目以降のタグが非表示)。

/#main_contents .entry > .entry_tag li + li + li + li {
  display: none; /* 表示タグ数の調整 */
}

 タグの数は「+ li」の数で決まります。「+ li」を2個追加すると5個まで表示になります。

/#main_contents .entry > .entry_tag li + li + li + li + li + li {
  display: none; /* 表示タグ数の調整 */
}

 「+ li」を1個減らすと2個まで表示になります。

/#main_contents .entry > .entry_tag li + li + li {
  display: none; /* 表示タグ数の調整 */
}

ユーザータグの文字色・背景色を変更

 追加したスタイルシートの次の3ヶ所を変更します。backgroundが背景色、colorが文字色、:hoverの後にあるbackgroundがカーソルが重なった時の背景色です。

スタイルシート

#main_contents .entry > .entry_tag a {
  white-space: nowrap; display: inline-block; padding: 2px 3px;
  border-radius: 2px; background: #b3bbc3; color: #ffffff;
}
#main_contents .entry > .entry_tag a:hover {background: #333333;}

 次のようにすると色が濃く(デフォルトの逆…カーソルを合わせると薄く)なります。

#main_contents .entry > .entry_tag a {
  white-space: nowrap; display: inline-block; padding: 2px 3px;
  border-radius: 2px; background: #333333; color: #ffffff;
}
#main_contents .entry > .entry_tag a:hover {background: #b3bbc3;}

関連記事
スポンサー リンク
コメント
#142 : No title
はじめまして。

先日から"basic_whiteを使用させていただいているのですが、

全体をセンタリングさせて記事を書いている時、
記事に載せる写真はセンタリングさせるのですが、
テーブルタグで作った表などはセンタリングされず、左よりに表示されてしまいます。

センタリングさせ表示させる方法はないでしょうか。
#145 : テーブルのセンタリング
コンバンハ。
tableタグに「 style="margin: 0px auto;"」を追加してください。
<table style="margin: 0px auto;">
他に枠線などを指定している時はstyle=""の中に「margin: 0px auto;」だけ加えてください。
<table style="border: 1px #ff0000 solid; margin: 0px auto;">
上下の余白が必要な時は「margin: 30px auto;」などと数値を増やします。
#146 : テーブルのセンタリングの件
テーブルのセンタリングの件、
ご回答ありがとうございました。


重ねてのご質問で申し訳ないのですが、

コメント投稿欄と投稿されたコメントの文字サイズと、
記事とコメントの間にある「前の記事」・「ホーム」・「次の記事」の文字色を変更したいのですが、
そのためには、どこを変更すればいいのでしょうか。
#148 : 前後の記事のリンク色
コンバンハ。
#main_contents .page_navi a:hover { color: #8ADAE6; }の部分とその直前にある「#main_contents .page_navi a {(省略)}」内に「color: #3399cc;」を追加すると変更できます。
詳細はURLリンク先「基本的なデザインのカスタマイズ・変更」の文字色の変更に追加致しました。
ホームや矢印については画像で作成されているため、変更する場合はご自身で色違いの画像を作成して差し替える必要があります。

なお、この記事はユーザータグに関する記事のため、基本的なことに関するコメントはリンク先のページに頂けると助かります。
#149 : 前後の記事のリンク色
こんばんは。
ご回答、ありがとうございました。
#312 : No title
こちらのテンプレートをお借りしております。
ユーザータグを表示をさせたくて
HTML、スタイルシート共、コードを追加したのですが表示されません。
何か不備なのかわからず、考えられる事がありましたら
ご指導いただけましたら幸いです。
お手数をお掛け致しますがどうぞ宜しくお願い致します。

コメントの投稿

  

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

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

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

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

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

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