Sponsored Link
こんにちは、静かな法律家のブログにようこそ。
今回は、
フッターのアイコンを好きな画像に変更する方法
について解説します。
※テンプレートは賢威6.1です。
デフォルトだと、このようになってます↓
ここで解説する方法は、サイドメニューのアイコンの変更でも
参考にしていただけます^^
1.FTPソフトでアイコン画像の大きさを調べる
まずは、アイコンの画像の大きさを調べましょう。
- まず、「外観」→「テーマ編集」→「design.css」をクリック。
- 「/*●フッターメニュー*/」という記述まで
スクロールし、以下の部分を見つけます。
黄色くマークした部分が、アイコン画像のファイル名ですので、覚えておいてください。
画像の場合、「icon-arrow02.png」ですね。 - FTPソフトを起動します。
- あなたのドメイン(私だとshihouranus.com)のフォルダクリック→
「public_html」→「wp-content」→「themes」→現在適用しているテーマのフォルダ
→「images」→「icon」と進みます。 - その中で、design.cssにあった先ほどのファイル名(icon-arrow02.png)があるので、
そのファイルを右クリックで「開く」を
押すと、画像を開けます。 - 「ファイル」→「プロパティ」で見ると、
19px×19pxであることがわかりました。
2.画像を編集する
アイコンにしたい画像は、Yahoo!やGoogleで
検索するとたくさん探せます。
著作権には注意してくださいね。
とってきた画像は、Photoscape等の画像編集
ソフトで編集します。
私だとこんな感じです。(※投稿時点で)
注意するべきは、
フッターの背景色に合わせてトリミングすること
です。
そうでないと、色が浮いてしまって見た目が
悪くなります。
私の場合、フッターの背景色を黒に設定しているので、
「トリミング」→黒色に指定後「円形にトリミング」にチェック→
トリミング→「トリミング領域を保存」しました。
その後、「ホーム」→「リサイズ」で、幅か高さを19に設定します。
これで画像の編集は完成です。
3.画像のアップロード
- 編集した画像を、FTPソフトで先ほど開いた箇所に
ドラッグ&ドロップします。
上の場合だと、icon-arrow02.pngが存在する領域ですね。 - その後、さきほどのdesign.cssの黄色いマーカー部分を、
アップロードしたファイル名に変えます。
これで完成です。
・・・しまったアイコンの色が地味すぎて
目立たない・・・