国別カテゴリーに国旗アイコンを表示する方法

僕のメインブログ(unusual)では、サイドバーの国別カテゴリーのところに、国旗アイコンを表示しています。

今回はこのように、カテゴリーの国名の前に国旗アイコンを表示する方法を説明します。

旅ブログでは、多くの人が国別でカテゴリーを作ると思いますので、装飾に役立つのではないでしょうか。

国旗アイコンで説明しますが、同じ方法で、好きな画像を別の場所に表示させることもできます。

スポンサーリンク

概要説明

国旗アイコンを表示する仕組みと、作業の大まかな流れを説明します。

WordPressで新しいカテゴリーを作ると、そのカテゴリーに一意のIDが割り振られます。(実際に使うのは、カテゴリーIDが含まれたclassですが、気にしなくて良いです。)

サーバーにあらかじめ使用する国旗アイコン(画像)を入れておき、CSS(スタイルシート)を使って、カテゴリーIDと画像を紐付けて、カテゴリー名の前に指定した画像を表示させます。

 WordPress、独自ドメイン、サーバーとは

【作業の流れ】
①国旗アイコン(画像)を用意する
②画像を出来る限り圧縮する
③画像をファイル転送ソフトでサーバーにアップロードする
④CSSで画像を表示する
国旗の表示には画像を使っていますが、今のところサイト速度にはあまり影響はありません。
他のやり方でもできると思います。

①国旗アイコン(画像)を用意する

使用する国旗アイコンを用意します。
アイコン配布サイトなどでフリーアイコンをダウンロードして下さい。

もちろん、自分で書いてもOKです。

僕は、phocaというサイトで配布されている、Flag Iconsを使っています(ライセンス:パブリックドメイン)。

国旗アイコンのファイル形式にはSVG、PSD、PNGなど色々ありますが、分からない人はPNG(.png)形式の画像ファイルを選ぶと良いと思います。

②画像を出来る限り圧縮する

ブログに使う画像は、圧縮をして出来る限りサイズ(見た目の大きさではなくファイルサイズ)を小さくすることが望ましいです。

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

タイトルとURLをコピーしました