概要説明
【作業の流れ】
①国旗アイコン(画像)を用意する
②画像を出来る限り圧縮する
③画像をファイル転送ソフトでサーバーにアップロードする
④CSSで画像を表示する
①国旗アイコン(画像)を用意する
②画像を出来る限り圧縮する
③画像をファイル転送ソフトでサーバーにアップロードする
④CSSで画像を表示する
国旗の表示には画像を使っていますが、今のところサイト速度にはあまり影響はありません。
他のやり方でもできると思います。
他のやり方でもできると思います。
①国旗アイコン(画像)を用意する
【国旗アイコンを配布しているサイト】
・Flags icons – Iconfinder.com
・flags icon packs – Free Icons
・Free Flag Icons | IconDrawer
・243 Country Flag Icons
・Flag Icons – IconArchive
・Flags icons – Iconfinder.com
・flags icon packs – Free Icons
・Free Flag Icons | IconDrawer
・243 Country Flag Icons
・Flag Icons – IconArchive
国旗アイコンのファイル形式にはSVG、PSD、PNGなど色々ありますが、分からない人はPNG(.png)形式の画像ファイルを選ぶと良いと思います。
②画像を出来る限り圧縮する
③画像をファイル転送ソフト(FTPクライアント)でサーバーにアップロードする
Download FileZilla Client for Windows (64bit)FTPソフト「FileZilla」の使い方【初心者向け】![]()
④CSSで画像を表示する
カテゴリーリスト表示のclassを確認する
![]()
![]()
カテゴリーIDを確認する
![]()
CSSを編集する
/************************************
** 国旗アイコンの設定
************************************/
/*タイ*/
.cat-item-64 a::before{
content:url(../../countries_icon/th.png)" ";
}![]()
![]()
/*台湾*/
.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)" ";
}


Comments