僕のメインブログ(unusual)では、サイドバーの国別カテゴリーのところに、国旗アイコンを表示しています。
今回はこのように、カテゴリーの国名の前に国旗アイコンを表示する方法を説明します。
旅ブログでは、多くの人が国別でカテゴリーを作ると思いますので、装飾に役立つのではないでしょうか。
国旗アイコンで説明しますが、同じ方法で、好きな画像を別の場所に表示させることもできます。
概要説明
国旗アイコンを表示する仕組みと、作業の大まかな流れを説明します。
WordPressで新しいカテゴリーを作ると、そのカテゴリーに一意のIDが割り振られます。(実際に使うのは、カテゴリーIDが含まれたclassですが、気にしなくて良いです。)
サーバーにあらかじめ使用する国旗アイコン(画像)を入れておき、CSS(スタイルシート)を使って、カテゴリーIDと画像を紐付けて、カテゴリー名の前に指定した画像を表示させます。
①国旗アイコン(画像)を用意する
②画像を出来る限り圧縮する
③画像をファイル転送ソフトでサーバーにアップロードする
④CSSで画像を表示する
他のやり方でもできると思います。
①国旗アイコン(画像)を用意する
使用する国旗アイコンを用意します。
アイコン配布サイトなどでフリーアイコンをダウンロードして下さい。
もちろん、自分で書いてもOKです。
僕は、phocaというサイトで配布されている、Flag Iconsを使っています(ライセンス:パブリックドメイン)。
・Flags icons – Iconfinder.com
・flags icon packs – Free Icons
・Free Flag Icons | IconDrawer
・243 Country Flag Icons
・Flag Icons – IconArchive
②画像を出来る限り圧縮する
ブログに使う画像は、圧縮をして出来る限りサイズ(見た目の大きさではなくファイルサイズ)を小さくすることが望ましいです。
TinyPNGというサイトで、PNGファイルの圧縮をします。
TinyPNGは無料で利用できますが、一度にまとめて20枚までしか圧縮することができません。
なので結構面倒なのですが、圧縮作業は大事です。(他のサイトやソフトを利用しても大丈夫です。)
③画像をファイル転送ソフト(FTPクライアント)でサーバーにアップロードする
次に、ファイル転送ソフト(FTPクライアントソフト)を使って、圧縮した画像をサーバーにアップロードします。
僕はFileZillaというソフトを使っています。
→Download FileZilla Client for Windows (64bit)
FileZillaの設定、使い方はこちらのサイトが分かりやすいと思います。
→FTPソフト「FileZilla」の使い方【初心者向け】
FileZillaを使って、国旗アイコン(画像)をフォルダごとサーバーに入れて下さい。
僕は「wp-content(/public_html/○○○/wp-content)」というフォルダに置いています。
また、アップロードしたフォルダは、分かりやすいように「countries_icon」という名前に変更しています。
FileZilla上で右クリックをすれば、フォルダ名の変更ができます。
④CSSで画像を表示する
国旗アイコン(画像)をサーバー上に置いたら、CSS(スタイルシート)で任意の場所に表示するよう指定します。
カテゴリーリスト表示のclassを確認する
まずはカテゴリーの表示に使われているclass名を確認します。
おそらく「cat-item-○○」というclass名になっていると思いますので、よく分からない人はこの手順は飛ばして、カテゴリーIDの確認だけで良いです。
今回はカテゴリー「タイ」を例に説明します。
Google Chromeでブログを開き、カテゴリー名の上で右クリック→「検証」をクリックします。
デベロッパーツールが開かれます。
カテゴリー「タイ」に使われているclassを確認します。
画像を参考に、自分のブログを確認してみて下さい。
「タイ」には「cat-item-64」というclassが使われていることが分かりました。
カテゴリーIDを確認する
カテゴリーIDだけを確認するのは、もっと簡単です。
WordPress管理画面内の、カテゴリー編集画面で確認したいカテゴリーの編集画面を開きます。
この編集ページのURLにカテゴリーIDが含まれているので、それを見ればIDが分かります。
この場合は、「ID=64」と書いてあるので、カテゴリー「タイ」のIDは64だということです。
CSSを編集する
class名(カテゴリーID)が分かったら、CSSを編集します。
以下のコードを、style.css(スタイルシート)に追記して下さい。
style.css(スタイルシート)のどこに書いても良いのですが、カテゴリー(国)が増える度に追記することになるので、一番下に書くのが分かりやすいかと思います。
/************************************ ** 国旗アイコンの設定 ************************************/ /*タイ*/ .cat-item-64 a::before{ content:url(../../countries_icon/th.png)" "; }
このように国旗が表示されます。
「cat-item-64」というのが、カテゴリーの表示に使われているclass名です。
ここの部分の数字を、確認したIDに変更して下さい。
「content:url(../../countries_icon/th.png)” “;」という部分で、「cat-item-64 a」の「before」に表示する「content」を指定しています。
「url(../../countries_icon/th.png)」は、画像のURLです。
先程、サーバーにアップロードした国旗アイコンの場所を指定しています。
(「../」は「一つ上の階層」を意味します。URL指定には「絶対パス」、「相対パス」の2種類がありますが、気になる人は調べて下さい。)
「::before」を「::after」に変えると、カテゴリー名(国名)の後ろに国旗が表示されます。
カテゴリー「タイ」を例に説明しましたが、同じように他のカテゴリー(国)にも国旗アイコン(画像)を表示することができます。
その際、変更するのは、「カテゴリーID(数字)」と「画像ファイル名(○○○.png)」のみです。
なので、2回目からは、class名の確認は不要です。
▼style.cssはこんな風になります。
/*台湾*/ .cat-item-62 a::before{ content:url(../../countries_icon/tw.png)" "; } /*日本*/ .cat-item-61 a::before{ content:url(../../countries_icon/jp.png)" "; } /*韓国*/ .cat-item-63 a::before{ content:url(../../countries_icon/kr.png)" "; } /*タイ*/ .cat-item-64 a::before{ content:url(../../countries_icon/th.png)" "; } /*ベトナム*/ .cat-item-65 a::before{ content:url(../../countries_icon/vn.png)" "; } /*マレーシア*/ .cat-item-66 a::before{ content:url(../../countries_icon/my.png)" "; } /*フィリピン*/ .cat-item-67 a::before{ content:url(../../countries_icon/ph.png)" "; }
さいごに
初心者の人には難しく感じられるかもしれませんが、実際にやってみると一つひとつの作業は割と簡単です。
カラフルな国旗があると、見た目もきれいになるのでおすすめです。
国旗の表示を見たい場合は、メインブログ(unusual)のサイドバーを見てみて下さい。
Comments