Home > FC2ブログ > basic_white > basic_whiteテンプレート トップページなどで記事にカテゴリを表示

basic_whiteテンプレート トップページなどで記事にカテゴリを表示

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

 記事の高さが固定されているので左下にカテゴリを設置する時はabsoluteで配置します。

左下にカテゴリを表示

1:HTML

 場所はCtrl+Fキーで『img_none』を検索。「<!--/body_img_none-->」の直後に以下のコードを追加します。

<!--body_img_none--><%topentry_discription><%topentry_desc><!--/body_img_none-->

<ul class="entry_category">
<!--parent_category-->
 <li><a href="<%topentry_parent_category_link>"><%topentry_parent_category></a></li>
<!--/parent_category-->
 <li><a href="<%topentry_category_link>"><%topentry_category></a></li>
</ul>

2:スタイルシート

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

 以上で完成です。


リスト表示のレイアウト調整・変更のスタイルを利用している場合

 リスト表示のレイアウト調整を行っていない場合は不要です。リスト表示の際は日付の右にカテゴリを表示するようにします。次の変更を加えてください。

 場所はCtrl+Fキーで『entry_date"』を検索。以下のコードを追加します。

<ul class="entry_date">
  <li><%topentry_year>/<%topentry_month>/<%topentry_day></li>
  <li><%topentry_hour>:<%topentry_minute></li>
  <li class="entry_category_top"><!--parent_category--><a href="<%topentry_parent_category_link>"><%topentry_parent_category></a> - <!--/parent_category--><a href="<%topentry_category_link>"><%topentry_category></a></li>
</ul>

 そしてトップページカテゴリのスタイルシートに以下を加えてください。

.list_content .entry_category,#main_contents .grid_content .entry_category_top {display: none;}

記事タイトル下にカテゴリ+左下に親カテゴリを表示

 記事タイトル下に親子両方のカテゴリを表示するとグリッド表示の際に日付部分が二段になってしまう可能性が高いので上下に分けます。

1:HTML

 場所はCtrl+Fキーで『entry_date"』を検索。以下のコードを追加します。

<ul class="entry_date">
  <li><%topentry_year>/<%topentry_month>/<%topentry_day></li>
  <li><%topentry_hour>:<%topentry_minute></li>
  <li><a href="<%topentry_category_link>"><%topentry_category></a></li>
</ul>

 場所はCtrl+Fキーで『img_none』を検索。「<!--/body_img_none-->」の直後に以下のコードを追加します。このコードについては、親カテゴリが不要な場合は追加しなくても構いません。

<!--body_img_none--><%topentry_discription><%topentry_desc><!--/body_img_none-->

<!--parent_category--><ul class="entry_category">
<li><a href="<%topentry_parent_category_link>"><%topentry_parent_category></a></li>
</ul><!--/parent_category-->

2:スタイルシート

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

 以上で完成です。


リスト表示のレイアウト調整・変更のスタイルを利用している場合

 リスト表示のレイアウト調整を行っていない場合は不要です。リスト表示の際は日付の右に親のカテゴリも表示するようにします。次の部分を追加します。

<ul class="entry_date">
  <li><%topentry_year>/<%topentry_month>/<%topentry_day></li>
  <li><%topentry_hour>:<%topentry_minute></li>
  <li><!--parent_category--><a href="<%topentry_parent_category_link>" class="entry_category_top"><%topentry_parent_category></a> - <!--/parent_category--><a href="<%topentry_category_link>"><%topentry_category></a></li>
</ul>

 そしてトップページカテゴリのスタイルシートに以下を加えてください。

.list_content .entry_category,#main_contents .grid_content .entry_category_top {display: none;}

 親カテゴリが不要な場合は、HTML部分「<!--parent_category-->~<!--/parent_category-->」については追加しなくても構いません。

左下カテゴリの背景色と文字色を変更

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

スタイルシート

#main_contents .entry_category a {
  display: inline-block; padding: 2px 5px;
  background: #333333; color: #ffffff;
}
#main_contents .entry_category a:hover {background: #cccccc;}

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

#main_contents .entry_category a {
  display: inline-block; padding: 2px 5px;
  background: #cccccc; color: #ffffff;
}
#main_contents .entry_category a:hover {background: #333333;}

記事タイトル下のカテゴリの文字色を変更

 以下をスタイルシートに追加します。色は「999999」「000000」の部分で変更できます。

#main_contents .entry_date a:link, /* 記事上部カテゴリ色 */
#main_contents .entry_date a:visited {color: #999999;}
#main_contents .entry_date a:hover {color: #000000;}

 下線を入れる時は以下を追加。

#main_contents .entry_date a:link, /* 記事上部カテゴリ色 */
#main_contents .entry_date a:visited {color: #999999; text-decoration: underline;}

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

こちらの記事通りカスタマイズしたところ、カテゴリ名が長い場合、折り返されて2列に表示されてしまいます。非常に収まりが悪く、何とかしたいと思っております。

長いカテゴリ名でも折り返されずに一列で表示させるにはどうすればよいでしょうか?

なお、私の場合、カテゴリ名が8文字以上でこのような現象が発生しました。
また、親カテゴリ名は非表示にしています。

お忙しいところすいませんが、ご回答よろしくお願いいたします。


#196 : No title
#195です。

自己解決しました。

/* entry_date */の中にある「width」の値を170px→180pxに変更したら一列に表示されました。

お騒がせしてスイマセン。
#332 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

コメントの投稿

  

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

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

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

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

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

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