スマホでブログを見た時に常に表示される『固定スマホフッター』を自分好みに変更したいと思ったことはありませんか？
この記事では、
ブログ初心者でも簡単に出来る『JINユーザーが固定スマホフッターを自分好みに変更するカスタマイズの方法』
を紹介しています！
JINのアップデートに伴い、固定スマホフッターを含めアイコンを簡単に表示できる様になりました！！
この記事内で登場するFontAwesomeを使わなくてもJINオリジナルアイコンのショートコードをコピペするだけで簡単にアイコンを表示できる様になりました。
詳しくはあずささんの記事をどうぞ↓
▼固定スマホフッターに設定したアイコンを動かすことも出来ます▼
読みたい目次をクリック
JIN(ジン)の固定スマホフッターを変更したかった理由
JINでブログを立ち上げて、しばらくしてから全体のカラーイメージが出来上がってくると沸々と湧き上がってきた「固定スマホフッターの装飾をしたい」という気持ち。
ブログの雰囲気をゆるやかでやわらかくしたかった私には、どうもデフォルトの固定フッターだとシンプル過ぎる気が…
スマホで見ると、どこのページに居ても画面下の固定フッターは常に目に入るのでどうしても全体的な雰囲気を淡い色味に統一したかったのです。
そこから色々調べて自分なりに設定をしてみました！
☆Before (JINマニュアルより引用)
デフォルトは黒い文字に黒いアイコンで何となくシンプルな印象です。
★After
カスタマイズ後はこんな感じになります♪この微妙な女心を判っていただけたら嬉しいですｗ
①このカスタムは、既にJINマニュアルのスマホフッターメニューの設定方法よりスマホ固定フッターの設定が完了しているという過程でお伝えしています。
②今回のカスタマイズは、CSS等テーマの主要な部分に触れる物ではないと思いますが万が一表示や現在の設定や体裁が崩れると困りますので必ずバックアップを取ってからの作業をお願いします。
JIN(ジン)固定スマホフッターを変更する方法！
結論からお伝えします！「装飾したい設定のコード」を作成します☟
【例】色変更+アイコンサイズ変更+文字サイズ変更する場合
<span style=”color: #入れたいカラーコード;”><i class=”入れたいアイコンコード アイコンのサイズ”></i>改行コード<文字サイズコード>文字</文字サイズコード></span>
そのコードを「ナビゲーションラベル」に貼り付けるだけ】です！☟
手順はこちら▼
- アイコンを選んでコードを控える
- アイコンと文字の大きさを決める
- 表示バランスを整える(改行あり/なし)
- 色を決める(カラーコードを調べる)
- 各設定のコードを合体させて貼り付ける！
アイコンを選んでコードを控える
<i class=”fas fa-home fa-lg”>
まず表示させたいアイコンを選んで、そのコードを控えましょう！
▼アイコンはFontAwesomeから選びます▼
アイコンを選んだら、下の方に表示されているコードを確認します↓
控えるコードは<i class=“○○”></i>の
”○○”で囲まれている部分だけでOKです！☟
アイコンの大きさを決める
<i class=”fas fa-home fa-lg”>
マニュアルを見ながら設定したデフォルトの「アイコン+文字」だと少し小さい感じが気になったので、まずは「アイコン」の大きさを変更しました。
★アイコンの倍率＆コード一覧
| 倍率 | コード |
|---|---|
| 1.333…倍 | fa-lg |
| 2倍 | fa-2x |
| 3倍 | fa-3x |
| 4倍 | fa-4x |
| 5倍 | fa-5x |
| 余白調整 | fa-fw |
文字の大きさを決める
<small>ホーム</small>
★文字の大きさ＆コード一覧
| small | 小さめ |
|---|---|
| big | 大きめ |
| sobig | もっと大きめ |
表示バランスを整える(改行あり/なし)
<br>もしくは<br/> ※どちらでも動作OKでした
大きさが決まったら全体のバランスを整えてゆきましょう！ちなみに「アイコン+文字」の順番にコードを並べるとこんな感じで☟
反対に「文字+アイコン」の順番にコードを並べるとこんな感じになるので☟お好きな方を選んでください♪
色を決める(カラーコードを調べる)
<span style=”color:#FF9F8A”>～</span>色変更したい箇所をコードで挟んでください
バランスが整ったら、いよいよカラーコードを調べて色を決めましょう！『出したいイメージ＋カラーコード』でカラーコードを検索してみましょう。
各設定のコードを合体させて貼り付ける
ここまで決めた設定のコードを1つに合体させるとこうなります！
<span style=”color: #FF9F8A”><i class=”fas fa-home fa-lg “></i><br><small>ホーム</small></span>
カラーコード変更+ホームアイコン+ホームアイコンのサイズ指定+改行+ホーム文字サイズ変更+ホーム文字
▷合体コードを「ナビゲーションラベル」に貼り付けたらメニューを保存して終了です！
まとめ
私の様な初心者でも簡単にカスタマイズが出来るようになったのは操作性の高いJINのおかげです。
自分のブログを自分好みにカスタマイズして自分のブログを愛でてあげましょう！
＼ブログ✖️SNSで稼ぎたい人は／
＼Twitterで言えない情報を配信／
＼最短でフォロワー1000人達成／
