Warning: Undefined variable $post in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

Warning: Attempt to read property "ID" on null in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

SANGOのサイドバーのタイトルにあるアイコンを変更・位置調整するカスタマイズ

アイコンの変更と位置調整


Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91
Before

サイドバーのアイコンを変更する前

After

サイドバーのアイコンを変更した後

[wp-svg-icons icon="checkmark-circle" wrap="i"] カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

カスタマイズする準備

アイコンを選ぶ

サイドバーに表示するアイコンはFont Awesomeというサイトで探すことができます。

アイコンのサイト

Font Awesome[wp-svg-icons icon=”new-tab” wrap=”i”]というサイトに行って変更したいアイコンを見つけます。PORIPUを使っている方はver5.0以上も使用することができます。
メモ
SANGOもたしかver1.8.0くらいからFontawesome 5.0以降に対応しています。

アイコンは” f “から始まるコードが重要です。このコードをコピーしておきましょう。

このコードをコピー
ぼくはPORIPUを使っているので、ver5.0のアイコンにしました。好きなアイコンを選んでコードをコピーしておきましょう。
MENくん
自分の好きなアイコンをいっぱい選べるよ

3つのコード追加方法

追加方法 難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズのコード

コメントあり

/*--------------------------------------
  アイコンの変更と位置調整
--------------------------------------*/
.sidebar .widget_categories .widgettitle:before {
    content: "\f542";/*アイコン変更*/
    padding-right: .7em;/*内側の余白(左)*/
    padding-left: .3em;/*内側の余白(右)*/
}

コメントなし

.sidebar .widget_categories .widgettitle:before {
    content: "\f542";
    padding-right: .7em;
    padding-left: .3em;
}

コードの説明

アイコンを変更するときはここ
    content: "\f542";

2行目のf542の部分をお好きなアイコンのコードに変更してください。


サイドバー人気記事のアイコンを変更するときはここ
変更前
.sidebar .widget_categories .widgettitle:before {/*カテゴリのアイコン*/
変更後
.sidebar .my_popular_posts .widgettitle:before {/*人気記事のアイコン*/

1行目のクラス名を変更します。

うまくいったか確認

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

まとめ・雑談

追加CSSのまとめ

MENくん
もともとはみんな同じアイコンがあるよね
くま3号
そやなカテゴリーとかはみんな同じアイコンだな
MENくん
みんなと同じじゃオリジナリティがね、出せないんだよ
くま3号
お…おぉ…だからアイコン変えたの?
そう!まずは手始めに細かいところを変えてみた!
POINT
アイコンとタイトルの距離が気になったのでpaddingで調整しました。ほんの少し位置が違うだけでも印象がかなり違いますね。