grand見出し・サイドメニュー部分などアイコンの変更方法

【grand】見出しのアイコン変更方法

【grand】のテンプレートは、見出し部分に”FontAwesomeのウェブフォント”を用いています。

 

ウェブフォントとは画像ではなくテキストの一種で、2016年4月現在で、FontAwesomeのウェブフォントは600種ちょっとあります。
以下、ウェブフォントの一例です。

 

Fontawesomeウェブフォントリスト
全てのウェブフォントリストはこちらご覧ください。

 

grandテンプレートのアイコンにはこのウェブフォントを利用していますので、、CSSのコード番号を変えるだけでアイコンの種類や色、大きさを自由に変える事が出来ます。

 

 

grandテンプレート利用上の注意

文字コードはUTF-8でご利用ください

grandテンプレートについては、文字コード”UTF-8”でご利用願います。

 

SIRIUS初期設定のShift-JISでは機能しません。

 

 

SIRIUS文字コードUTF-8設定

 

文字コードの設定は、サイトオプションの全体設定から文字コードをUTF-8に選択すればOKです。

 

プレビューではアイコンが表示されません

SIRIUSプレビュー画面

 

なお、ウェブフォントはプレビュー状態ではアイコンが表示されません。
アップロードすれば表示されますので、「プレビューしたけど表示が変!」と焦らないで大丈夫です。

 

 

アイコンの変更方法

それではアイコンの変更方法です。

 

 

Fontawsomeのアイコンコード

 

FontAwesomeのサイトで希望のアイコンを選択すると、「Unicode」という文字の横にコードが書かれています。

 

上の例でいえば、アイコンコードは「f144」ですね。このコードをメモするなりしておきましょう。

 

 

SIRIUSスタイルシート編集

 

編集>スタイルシートをクリック。

 

 

SIRIUSスタイルシート編集H3見出し変更

 

今回はH3見出しのアイコンを変更します。
上記箇所の「content:」の行のコードを書き換えてください。

 

コードの頭に半角の「¥」マークを付けます。
環境によっては「/(スラッシュ)」が逆さになったバックスラッシュで表示されますが、どっちでも大丈夫です。

 

書き換えたら保存をして、サイト生成>アップロードします。

 

 

デフォルトのH3見出し

 

初期設定のH3見出しアイコンは上記の通りですが、

 

 

カスタマイズ後のH3見出し

 

コードを書き換えただけで、アイコンを変える事が出来ました。簡単です!

 

 

 

【grand】利用上の注意とアイコン変更方法

 

なお、色やアイコンの大きさもCSSから簡単に変える事が出来ます。
色コードは原色大辞典をご参考ください。

 

 

ウェブフォントのアイコンを使用している場所

SIRIUSスタイルシート1

 

ウェブフォントアイコンを使用しているスタイルシートの場所については、スタイルシートを開いて「fontawesome」と検索すると簡単に見つける事ができます。
上記画像はH3見出し部分です。

 

他の場所を参考までに画像で貼っておきます。
行番号はテンプレートによって少しずれがありますので、予めご了承ください。

 

H4見出し

SIRIUSスタイルシート2

 

H5見出し

SIRIUSスタイルシート3

 

H6見出し

SIRIUSスタイルシート4

 

サイドメニューの1階層目リストアイコン

SIRIUSスタイルシート5

 

サイドメニューの2階層目リストアイコン

SIRIUSスタイルシート6

 

サイドメニューの3階層目リストアイコン

SIRIUSスタイルシート7

 

サイドメニュー見出し部分のアイコン

SIRIUSスタイルシート8

 

最新記事リスト部分のアイコン

SIRIUSスタイルシート9

 

更新履歴部分のアイコン

SIRIUSスタイルシート10

 

サイトマップ1階層目ページのアイコン

SIRIUSスタイルシート11

 

サイトマップ2階層目ページのアイコン

SIRIUSスタイルシート12

 

サイトマップ3階層目ページのアイコン

SIRIUSスタイルシート13

 

最後にサイト生成+アップロードをお忘れなく

ウェブサイトに変更を反映させるアップロード方法

 

アップロードしたサイトに反映させるには、サイト生成 → アップロード → styles.cssを右クリックしてアップロードすればOKです。

 

プレビューでは反映されているのにネットで見ると反映されていない場合は、ブラウザのキャッシュが働いていると考えられますので、数回リロードするか時間を空けて再び見てください。

 

【著者:マナ】

【grand】利用上の注意とアイコン変更方法

岩手県盛岡市の専業アフィリエイター。やり方は楽しさと役立ちを優先したホワイトハット。趣味はバイオリンと盛岡さんさ踊り。

【運営サイト】SIRIUSアピールサイト
【twitter】  @マナ
【お問い合わせ】 フォームはこちら
※本テンプレートのカスタマイズご相談は現在ご遠慮頂いております。
※本テンプレートはプレミアム会員様向け専用でご利用頂けます。

スポンサーリンク
スポンサーリンク