さいつくでfontawesomeを使い色も指定する方法

さいつくでfontawesomeを使い色も指定する方法

ペラサイトにする予定でしたfontawesomeをさいつくで使う方法の記事が見当たらなかったため、独立した記事にしたほうが良いと思い、ミニサイトにすることにしました。

ペラサイトはいいけど、必要に応じて1ページに拘る必要はない!

意味のないことにこだわるのはやめましょう笑

1ページプラスアルファはもうペラサイトでいいのでは？

※サイト内のタグは半角にするとHTMLタグとして認識されるため全角で表示します。

かぎかっこだけ半角に変えれば同じです。

さいつくでfontawesomeを使うためにコードを内に挿入する

fontawesomeを使用するためにはデータをサーバーに置くか、fontawesomeの外部サーバーを呼び出す？（仕組みがよくわかっていませんが笑）コードをHEAD内に挿入する必要があります。

コードは以下のとおりです。（最新のコードはfontawesome内から取得できます）

＜link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"＞

これをさいつくの基本情報を編集するページから行います。



このHEAD内挿入用の欄に入力して保存すればいいわけです。

さいつくでfontawesomeのアイコンに色を付ける

さいつくを利用するためのもしもアフィリエイトの申し込みはこちらです。

もしもアフィリエイトに無料登録する

　

このようにfontawesomeのアイコンにリンクと近い色がついていますよね？

このやり方を簡単に説明します。

詳しいやり方はこちらで紹介されています。

サルワカfontawesome

fontawesomeのアイコン挿入用のコードが次のようなものだとします。

＜i class="fas fa-external-link-alt my-blue fa-3x">
この中のmy-blueというのが色を指定する文字列です。

これにCSSで色を指定します。

その際先程のHEAD内に挿入する欄に、

＜style＞＜/style＞で囲ったCSSを記入するだけでOKです。

具体的には次のように記入します。

＜style＞
.my-blue {color: #0000cd}
＜/style＞

色の指定はリンク職と似た色を適当に指定しています。


以上でさいつくに色付きのfontawesomeアイコンを導入できました。