Sponsored Link

こんにちは、静かな法律家のブログにようこそ。

今回は、

フッターのアイコンを好きな画像に変更する方法

について解説します。

※テンプレートは賢威6.1です。

デフォルトだと、このようになってます↓

フッターデフォルト

ここで解説する方法は、サイドメニューのアイコンの変更でも
参考にしていただけます^^

1.FTPソフトでアイコン画像の大きさを調べる

まずは、アイコンの画像の大きさを調べましょう。

  1. まず、「外観」→「テーマ編集」→「design.css」をクリック。
  2. 「/*●フッターメニュー*/」という記述まで
    スクロールし、以下の部分を見つけます。
    黄色くマークした部分が、アイコン画像のファイル名ですので、覚えておいてください。
    フッターアイコン
    画像の場合、「icon-arrow02.png」ですね。
  3. FTPソフトを起動します。
  4. あなたのドメイン(私だとshihouranus.com)のフォルダクリック→
    「public_html」→「wp-content」→「themes」→現在適用しているテーマのフォルダ
    →「images」→「icon」と進みます。
  5. その中で、design.cssにあった先ほどのファイル名(icon-arrow02.png)があるので、
    そのファイルを右クリックで「開く」を
    押すと、画像を開けます。
  6. 「ファイル」→「プロパティ」で見ると、
    19px×19pxであることがわかりました。

アイコンプロパティ

 

2.画像を編集する

アイコンにしたい画像は、Yahoo!やGoogleで
検索するとたくさん探せます。

著作権には注意してくださいね。

とってきた画像は、Photoscape等の画像編集
ソフトで編集します。

私だとこんな感じです。(※投稿時点で)

lawyer-crop-crop

注意するべきは、

フッターの背景色に合わせてトリミングすること

です。

そうでないと、色が浮いてしまって見た目が
悪くなります。

私の場合、フッターの背景色を黒に設定しているので、
「トリミング」→黒色に指定後「円形にトリミング」にチェック→
トリミング→「トリミング領域を保存」しました。

その後、「ホーム」→「リサイズ」で、幅か高さを19に設定します。

これで画像の編集は完成です。

3.画像のアップロード

  1. 編集した画像を、FTPソフトで先ほど開いた箇所に
    ドラッグ&ドロップします。
    上の場合だと、icon-arrow02.pngが存在する領域ですね。
  2. その後、さきほどのdesign.cssの黄色いマーカー部分を、
    アップロードしたファイル名に変えます。

フッターアイコンアフターテーマ

 

これで完成です。

フッターアフター

 

・・・しまったアイコンの色が地味すぎて
目立たない・・・