カテゴリとタグを区別して分かりやすくした

gush2gush2, カテゴリ, タグgush2, カテゴリ, タグ

gush2

gush2のカテゴリとタグ標記が同じところに並んで表示されています。

なので区別してわかり易いようにカスタマイズした。

 

カテゴリとタグ標記のカスタマイズ

 

  • ここで紹介するgush2のカスタマイズは、私の備忘録です。
  • gush2は素でも使える。でも個性を出すためにカスタマイズしよう
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのgush2をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いいたします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

デフォルトでは以下のようになっていると思います。

ブログトップ・カテゴリ一覧とアーカイブの各表示の時

gush2052

 

個別記事を表示の時

gush2053

 

これではカテゴリとタグの区別が無いので分かりづらいです。なのでタグ標記の前にアイコンフォントを表示させた。

個別記事内の表示では、背景色を変更した。

 

「home.php」・「index.php」と「アーカイブphp」をカスタマイズ

 

「home.php」・「index.php」と「アーカイブ(archive.php)」それぞれのコード内に下記コードが記述されていると思います。

[php]
<div class=”entry_box”>
<p class=”date-time”><?php the_time(‘Y/m/d’) ?></p>
<h3 class=”new_entry_title”><a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h3>
<div class=”eb_cat”><i class=”fa fa-folder-open-o”></i><?php the_category(‘ ‘) ?> <?php the_tags(‘ ‘, ‘ ‘, ‘ ‘); ?></div>
</div>
[/php]

3箇所とも上記コードを削除して以下のコードを記述した。

[php]
<div class=”entry_box”>
<p class=”date-time”><?php the_time(‘Y/m/d’) ?></p>
<h3 class=”new_entry_title”><a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h3>
<div class=”eb_cat”><i class=”fa fa-folder-open-o”></i><?php the_category(‘ ‘) ?><i class=”fa fa-tags”></i><?php the_tags(‘ ‘, ‘ ‘, ‘ ‘); ?></div>
</div>
[/php]

 

私の場合 子テーマ内にある「home.php」・「index.php」と「アーカイブ(archive.php)」を変更した。

 

個別記事下の標記をカスタマイズ

 

「single.php」のコード内に以下のコードが記述されていると思います。

[php]
<div id=”cat_tag”><span><?php the_category(‘ ‘) ?></span><span><?php the_tags(‘ ‘, ‘ ‘, ‘ ‘); ?></span></div>
[/php]

 

上記コードを削除して以下のコードを記述した。

[php]
<div id=”cat_tag”><span><i class=”fa fa-folder-open-o”></i><?php the_category(‘ ‘) ?></span><span><i class=”fa fa-tags”></i><?php the_tags(‘ ‘, ‘ ‘, ‘ ‘); ?></span></div>
[/php]

 

私の場合 子テーマ内にある「single.php」を変更した。

 

個別記事内のカテゴリーとタグの背景色を変更

 

スタイルシート(style.css)に下記コードがあるので探します。

[css]
/*————————————–
カテゴリー・タグ
————————————–*/
#cat_tag a {
color: #666;
background-color: #fff;
}
[/css]

「background-color: #fff;」のコード内の色コードを変更します。

背景色を変更した時、テキストが見えづらくなったらテキストの文字色も変更する。

私の場合、子テーマのスタイルシート(style.css)に下記コードを追記した。

[css]
/*————————————–
カテゴリー・タグ
————————————–*/
#cat_tag a {
color: #fff;
background-color: #4169E1;
}
[/css]

 

カスタマイズ後

gush2054

 

gush2055

 

まとめ

 

新年明けましてオメデトウございます

2015年初の投稿です。

これからも読者様からブックマークされるよう内容のある記事を紹介して行きますのでヨロシクお願いします。

あいさつはこれ位にして、カスタマイズ後は区別したらわかりやすくなったと思います。背景色は私のカラーである「ロイヤルブルー」を使いました。