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

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

Before

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

After

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

カスタマイズは自己責任でやろう!

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

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

カスタマイズする準備

アイコンを選ぶ

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

アイコンのサイト

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

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

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

3つのコード追加方法

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

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

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

カスタマイズのコード

コメントあり

コメントなし

コードの説明

アイコンを変更するときはここ

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


サイドバー人気記事のアイコンを変更するときはここ
変更前
変更後

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

うまくいったか確認

確認の手順

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

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

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

まとめ・雑談

追加CSSのまとめ

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

コメントを残す

メールアドレスが公開されることはありません。