フリーのBloggerテンプレート「QooQ」のカスタマイズについてまとめています。
参考程度に。
準備
ここでは「Font Awesome」というフリーのアイコンkit[Ver.6.4.2]を使用します。まずは<head>内に以下を追加します。コメントはお好きに。
<!-- Font Awesome https://fontawesome.com/icons?d=gallery&m=free --> <link href='https://use.fontawesome.com/releases/v6.4.2/css/all.css' rel='stylesheet'/>
Font Awesomeから使いたいアイコンを探します。
カテゴリから「Free」を選択、もしくはワード検索してみます。
使いたいアイコンを選択するとUnicodeとコードが表示されます。名前の横に「PRO」と描かれているStyleは無料版では利用できません。
htmlに直接書く
先程の準備で見つけたコードをクリックしてブログページに張り付けてみます。<i class="fa-solid fa-cat"></i>
結果
クラスで色々な指定をしてみる
Font Awesomeで用意されたクラスで色々と表示をいじれますのでまとめて紹介。<!-- サイズの指定 --> <i class="fa-solid fa-cat fa-lg"></i> <i class="fa-solid fa-cat fa-2x"></i> <i class="fa-solid fa-cat fa-3x"></i> <i class="fa-solid fa-cat fa-5x"></i> <i class="fa-solid fa-cat fa-7x"></i> <i class="fa-solid fa-cat fa-9x"></i> <!-- 表示幅をそろえる --> <i class="fa-solid fa-cat fa-2x fa-fw"></i> <i class="fa-solid fa-cat fa-3x fa-fw"></i> <!-- 反転 --> <i class="fa-solid fa-cat fa-2x fa-flip-horizontal"></i> <i class="fa-solid fa-cat fa-2x fa-flip-vertical"></i> <!-- 回転させる --> <i class="fa-solid fa-cat fa-2x fa-spin"></i> <!-- 角度を変更 --> <i class="fa-solid fa-cat fa-3x fa-rotate-90"></i> <i class="fa-solid fa-cat fa-3x fa-rotate-180"></i> <i class="fa-solid fa-cat fa-3x fa-rotate-270"></i> <!-- 線で囲む --> <i class="fa-solid fa-cat fa-3x fa-border"></i> <!-- アイコンを重ねて使う --> <span class="fa-stack"> <i class="fa-regular fa-circle fa-stack-2x"></i> <i class="fa-solid fa-ca fa-stack-1x"></i> </span>
結果
styleでサイズ、色指定する
<i class="fa-solid fa-cat" style="font-size: 3em; color: Tomato;"></i>
結果
cssで指定する
先程の準備で見つけたUnicodeを使用してリストアイコンを変更してみます。ここではサンプルとしてこのHPの目次のcssを一部晒します。参考程度に。
#single-content .indexListTitle:before {
font : var(--fa-font-solid); /* Style毎変更 */
content : '\f4d8'; /* アイコン種類：ここの\以降を使いたいUnicodeに変更する */
font-size : 1em;
left : 0;
top : 0;
color : $(brand.subcolor); /* アイコン色：お好きに */
}
結果
