stinger5のデフォルトでは、カテゴリーとタグ標記が同じところに並んで表示されています。
タグのアイコンの横にカテゴリー名があって、その横にタグが並んで標記されている状態です。
なのでカテゴリー名とタグ名を区別してわかり易いようにアイコンを付けてカスタマイズした。
カテゴリーとタグ標記のカスタマイズ
- ここで紹介するstinger5のカスタマイズは、私の備忘録です。
- バックアップは忘れずに！！！
以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です
これらを参考にカスタマイズする時は、自己責任でお願いします。
ソースコードを変更する場合は、ＦＴＰソフトを使ってサーバーにアップ。または各サーバーのオプション（ファイルマネージャー）等（例はさくらサーバーです）でカスタマイズを行ってください。
デフォルトでは以下のような標記だと思います。
これをカテゴリーの前とタグの前にアイコンを追加して区別しました。
単一記事の投稿(single.php)をカスタマイズ
単一記事の投稿(single.php)を開きます。
開いたら下記コードを探します。
[php]
<p class=”tagst”><i class=”fa fa-tags”></i> -
<?php the_category(‘, ‘) ?>
<?php the_tags(”, ‘, ‘); ?>
</p>
[/php]
見つけたら、削除して下記コードをコピペします。
[php]
<p class=”tagst”><i class=”fa fa-folder-open”></i> -
<?php the_category(‘, ‘) ?><br><i class=”fa fa-tags”></i> -
<?php the_tags(”, ‘ ‘); ?>
</p>
[/php]
私の場合は子テーマにコピペした。
「itiran.php」をカスタマイズ
同様に開いたら下記コードを探します。
[php]
<div class=”blog_info”>
<p><i class=”fa fa-clock-o”></i>
<?php the_time(‘Y/m/d’) ?>
<span class=”pcone”><i class=”fa fa-tags”></i>
<?php the_category(‘, ‘) ?>
<?php the_tags(”, ‘, ‘); ?>
</span></p>
</div>
[/php]
見つけたら、削除して下記コードをコピペします。
[php]
<div class=”blog_info”>
<p><i class=”fa fa-clock-o”></i>
<?php the_time(‘Y/m/d’) ?>
<span class=”pcone”><i class=”fa fa-folder-open”></i>
<?php the_category(‘, ‘) ?> <i class=”fa fa-tags”></i>
<?php the_tags(”, ‘, ‘); ?>
</span></p>
</div>
[/php]
スタイルシート(style.css)で装飾
下記コードをスタイルシート(style.css)に追記する。
私の場合子テーマに追記した。
[css]
/*———————————
記事内カテゴリ及びタグの装飾
——————————–*/
.tagst {
margin: 10px;
}
.tagst a {
color: #fff;
text-decoration: none;
font-size: 14px;
line-height: 35px;
background-color: #4169e1;
border-radius: 6px;
margin: 3px;
padding: 3px 5px 3px 5px;
}
.tagst a:hover {
color: #ff7ddf;
transition: color 0.5s ease;/*– 文字色を変化させる時間 –*/
-o-transition: color 0.5s ease; /* opera */
-moz-transition: color 0.5s ease; /* firefox */
-webkit-transition: color 0.5s ease; /* chrome, safari */
-ms-transition: color 0.5s ease; /* ie */
}
[/css]
記事内投稿日時標記のカスタマイズ
背景色が白だと味気なかったので変更したのと、それに合わせて上下の線も色を変えてみました。
デフォルトでは以下のようです。
スタイルシート(style.css)を変更した。私の場合は子テーマに下記コードを追記した。
[css]
/*———————————
記事内投稿日時標記の装飾
——————————–*/
.blogbox {
background : #edeff4;
}
.blogbox {
border-top-color : #4169e1;
border-bottom-color : #4682b4;
}
[/css]
まとめ
ブログトップの記事一覧内のカテゴリ及びタグ標記は、以下のようになった。
デフォルトではカテゴリーとタグの区別が判りませんでしたが、カスタマイズ後はっきりと区別がついたと思います。
当ブログは、カラー的に「ロイヤルブルー」を基調にしているので、これにしたが、少し派手なような気がしましたが、このままで行きたいと思ってます。
コメント