2016年1月14日

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

スポンサードリンク

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

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


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

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


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

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


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

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

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

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


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

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


WordPress管理画面→

single.phpへ→

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


          <p class="tagst"><i class="fa fa-tags"></i>&nbsp;-
            <?php the_category(', ') ?>
            <?php the_tags('', ', '); ?>
          </p>



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


          <p class="tagst"><i class="fa fa-tags"></i>&nbsp;-
            <?php the_category(', ') ?><br><i class="fa fa-folder-open"></i>&nbsp;-
            <?php the_tags('', ' '); ?>
          </p>


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

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


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

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


itiran.phpへ→


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


      <div class="blog_info">
        <p><i class="fa fa-clock-o"></i>&nbsp;
          <?php the_time('Y/m/d') ?>
          &nbsp;<span class="pcone"><i class="fa fa-tags"></i>&nbsp;
          <?php the_category(', ') ?>
          <?php the_tags('', ', '); ?>
          </span></p>
      </div>


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



      <div class="blog_info">
        <p><i class="fa fa-clock-o"></i>&nbsp;
          <?php the_time('Y/m/d') ?>
          &nbsp;<span class="pcone"><i class="fa fa-folder-o"></i>&nbsp;
          <?php the_category(', ') ?>
          <i class="fa fa-tags"></i>&nbsp;
          <?php the_tags('', ', '); ?>
          </span></p>
      </div>


&nbsp;



<br/>

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


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

<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ヘルプを参照下さい。


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


スポンサードリンク