このブログで使用しているブログテーマ「Gush2」のカスタマイズの話です。
▲ご覧のように、デフォルトの設定だと、カテゴリとタグの区別がつきにくいです。
おそらく、カスタマイズしやすいように、このような設定になっていると思うので、色を変更してみようと思います。
その方法を残しておきます。
Gush2テーマでカテゴリーとタグを区別しやすくする方法
Gush2デフォルトテーマでは、カテゴリーとタグの色が一緒でした。
カテゴリーとタグの区別をつきやすくするには、
- カテゴリーとタグの色を別々にする
- カテゴリーとタグの間に目印をつける
という方法が考えられます。
前者の「カテゴリーとタグの色を別々にする」という方法ですが、実現することは出来たのですが、カテゴリーとタグのクラス名を変更する必要がありました。
クラス名を変更するのは、後々に自分で混乱を招いてしまう可能性があると感じました。
そのため、後者の「カテゴリーとタグの間に目印をつける方法」を取る事にしました。
タグのアイコンとして、Font Awesomeを利用しました。
参照 fa-tags: Font Awesome Icons
また、フォルダのアイコンも利用しました。
参照 fa-folder-open-o: Font Awesome Icons
トップページ
home.phpの記述
home.phpの記述
1 2 3 4 5 | <divclass="entry_box"> <pclass="date-time"><?phpthe_time('Y/m/d')?></p> <h3class="new_entry_title"><ahref="<?phpthe_permalink()?>"title="<?phpthe_title_attribute();?>"><?phpthe_title();?></a></h3> <divclass="eb_cat"><iclass="fa fa-folder-open-o"></i><?phpthe_category(' ')?><?phpthe_tags(' ',' ',' ');?></div> </div> |
を以下のように変更しました。
1 2 3 4 5 | <divclass="entry_box"> <pclass="date-time"><?phpthe_time('Y/m/d')?></p> <h3class="new_entry_title"><ahref="<?phpthe_permalink()?>"title="<?phpthe_title_attribute();?>"><?phpthe_title();?></a></h3> <divclass="eb_cat"><iclass="fa fa-folder-open-o"></i><?phpthe_category(' ')?><iclass="fa fa-tags"></i><?phpthe_tags(' ',' ',' ');?></div> </div> |
▲すると、ご覧のようなプレビューから
▲カテゴリーとタグが区別つきやすくなりました。
index.phpの記述
index.phpの記述
1 2 3 4 5 | <divclass="entry_box"> <pclass="date-time"><?phpthe_time('Y/m/d')?></p> <h3class="new_entry_title"><ahref="<?phpthe_permalink()?>"title="<?phpthe_title_attribute();?>"><?phpthe_title();?></a></h3> <divclass="eb_cat"><iclass="fa fa-folder-open-o"></i><?phpthe_category(' ')?><?phpthe_tags(' ',' ',' ');?></div> </div> |
を以下のように変更しました。
1 2 3 4 5 | <divclass="entry_box"> <pclass="date-time"><?phpthe_time('Y/m/d')?></p> <h3class="new_entry_title"><ahref="<?phpthe_permalink()?>"title="<?phpthe_title_attribute();?>"><?phpthe_title();?></a></h3> <divclass="eb_cat"><iclass="fa fa-folder-open-o"></i><?phpthe_category(' ')?><iclass="fa fa-tags"></i><?phpthe_tags(' ',' ',' ');?></div> </div> |
変化はわかりませんでした。
個別記事下
single.phpの記述
1 | <divid="cat_tag"><span><?phpthe_category(' ')?></span><span><?phpthe_tags(' ',' ',' ');?></span></div> |
を以下のように変更しました。
1 | <divid="cat_tag"><span><iclass="fa fa-folder-open-o"></i><?phpthe_category(' ')?></span><span><iclass="fa fa-tags"></i><?phpthe_tags(' ',' ',' ');?></span></div> |
▲すると、ご覧のようなプレビューから
▲以下のようなプレビューになりました。
これで、カテゴリとタグが区別しやすくなりました。
コメント