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

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

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

新型コロナウイルス北海道の感染場所最新情報!

 

新型コロナ北海道内の感染者数動向の最新情報!

新型コロナの5類移行に伴い、指定した医療機関からの「定点把握」による全国の感染状況を初めて発表。そこで北海道内（特に釧路・札幌）で感染された動向の最新の状況を配信しています。

www.net.y-taka.biz

 

 

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

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

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

個別記事を表示の時

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

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

「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]

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

私の場合　子テーマ内にある「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]

カスタマイズ後

まとめ

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

２０１５年初の投稿です。

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

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