フリーのBloggerテンプレート「QooQ」のカスタマイズについてまとめています。
参考程度に。
目次
- 準備
- htmlに直接書く
- cssで指定する
- font-family・font-weightについて
- Solid 900
- Regular 400
- Light 300
- Duotone 900
- Brands 400
準備
ここでは「Font Awesome」というフリーのアイコンkit[Ver.5.6.1]を使用します。まずは<head>内に以下を追加します。コメントはお好きに。
<!-- Font Awesome https://fontawesome.com/icons?d=gallery&m=free --> <link href='https://use.fontawesome.com/releases/v5.6.1/css/all.css' rel='stylesheet'/>
Font Awesomeのメニュー「Icon」から使いたいアイコンを探します。
グレーになっているものは無課金での利用はできませんので、左側のカテゴリから「Free」を選択してみます。
一覧から使いたいアイコンを選択すると左中央より上にUnicodeとコードが表示されます。
htmlに直接書く
先程の準備で見つけたコードをクリックしてブログページに張り付けてみます。<i class="fas fa-cat"></i>
結果
クラスで色々な指定をしてみる
Font Awesomeで用意されたクラスで色々と表示をいじれますのでまとめて紹介。<!-- サイズの指定 --> <i class="fas fa-cat fa-lg"></i> <i class="fas fa-cat fa-2x"></i> <i class="fas fa-cat fa-3x"></i> <i class="fas fa-cat fa-5x"></i> <i class="fas fa-cat fa-7x"></i> <i class="fas fa-cat fa-9x"></i> <!-- 表示幅をそろえる --> <i class="fas fa-cat fa-2x fa-fw"></i> <i class="fas fa-cat fa-3x fa-fw"></i> <!-- 反転 --> <i class="fas fa-cat fa-2x fa-flip-horizontal"></i> <i class="fas fa-cat fa-2x fa-flip-vertical"></i> <!-- 回転させる --> <i class="fas fa-cat fa-2x fa-spin"></i> <!-- 角度を変更 --> <i class="fas fa-cat fa-3x fa-rotate-90"></i> <i class="fas fa-cat fa-3x fa-rotate-180"></i> <i class="fas fa-cat fa-3x fa-rotate-270"></i> <!-- 線で囲む --> <i class="fas fa-cat fa-3x fa-border"></i> <!-- アイコンを重ねて使う --> <span class="fa-stack"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-ca fa-stack-1x"></i> </span>
結果
styleでサイズ、色指定する
<i class="fas fa-cat" style="font-size: 3em; color: #3366FF;"></i>
結果
cssで指定する
先程の準備で見つけたUnicodeを使用してリストアイコンを変更してみます。ここではサンプルとしてこのHPの目次のcssを一部晒します。参考程度に。
#single li {
list-style-type : none!important; /* ・を消す */
}
#single li:before {
font-family : "Font Awesome 5 Free";
content : '\f4d8'; /* アイコン種類：ここの\以降を使いたいUnicodeに変更する */
font-weight : 900;
color : $(brand.pointcolor); /* アイコン色：お好きに指定せい */
}
結果
font-family・>font-weightについて
使用するアイコンのStyleによって設定します。[公式・使用方法]Styleはそれぞれのアイコンページの左上を確認します。
