タグとカテゴリを見分けやすくする、アイコン追加。Stinger5の個別記事下や記事一覧。

　個別記事の下には、カテゴリ名やタグ名が表示されます。
どっちがカテゴリか分かりづらいので、アイコンをつけたり、
少し余白をもたせたりしました。

Stinger5タグとカテゴリを識別しやすいようにする

　たまに、タグやカテゴリを全然設定していない（または全部同じ）人がいます。

あまり細か過ぎても管理が大変ですが、
ある程度分かりやすく分けておく方が良いです。

　この投稿ならWordPressというタグ（Bloggerにはカテゴリが無い）
が設定されています。

ワード検索で、
WordPress＿○○と入力された時にヒットしやすくなります。

　また、タグやカテゴリを設定はしていても、
表示を消している場合もあるでしょう。

どちらか一つは表示しておきたいところ。

私の考えでは、カテゴリは重要です。
カテゴリだけでも表示しておいて下さい。

個別記事下のタグとカテゴリにアイコンをつける

ではカスタマイズします。
Stinger5では、デフォルトでFont Awesomeが使えるようにされています。
便利ですね。

https://fortawesome.github.io/Font-Awesome/

WordPress管理画面→

single.phpへ→

以下のコードを探します。

 -
<?php the_category(', ') ?>
<?php the_tags('', ', '); ?>


以下のように変更します。

  -
 <?php the_category(', ') ?>  -
 <?php the_tags('', ' '); ?>
 

タグは、商品タグみたいなマーク。
カテゴリには、フォルダがちょっと開いているマークにしました。

記事一覧のタグ・カテゴリにもアイコンを追加

せっかくなので、記事一覧にもアイコンをつけます。

見た目はちょっとスッキリ感に欠けます。
お好みでどうぞ。

itiran.phpへ→

以下のコードを探します。

<div class="blog_info">
 
<?php the_time('Y/m/d') ?>
  
<?php the_category(', ') ?>
<?php the_tags('', ', '); ?>

</div>

これを、以下の様に変更します。

<div class="blog_info">
 
<?php the_time('Y/m/d') ?>
  
<?php the_category(', ') ?>
 
<?php the_tags('', ', '); ?>

</div>

 

や

 

を使って、余白の調整をして下さい。

　また、タグやカテゴリ名を右寄せする事もできます。

<div class="blog_info">

を、
<div class="blog_info" align="right">

に変更して下さい。

参考にしたサイト

stinger5カテゴリーとタグ標記のカスタマイズ
http://www.y-taka.biz/post-2032/

　これで完成。

ちなみに、サイドバーに表示される記事リンク下にも
タグ名やカテゴリ名が表示されますね。

ここにもアイコンを追加したい時は、

kanren.php

で、同じ要領で変更してみてください。

　CSSを変更したい時は、

.blog_info p a {

がStinger5親テーマにあるので、
子テーマで追加または変更すればOKです。

　こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。

　当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。

必ずデータは最新のバックアップを取っておいて下さい。

　WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。

当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。

詳細はWordPressヘルプを参照下さい。

　ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）

スポンサードリンク

ページ

2016年1月14日