ブログ運営

WordPress『JIN(ジン)』カスタマイズ♪固定スマホフッターを変更する方法

こんにちはHaru(@yurupura_haru)です。

スマホでブログを見た時に常に表示されている『固定スマホフッター』自分好みに変更したいと思ったことはありませんか?

この記事では、

ブログ初心者でも簡単に出来る『JINユーザーが固定スマホフッターを自分好みに変更するカスタマイズの方法』

を紹介しています!

Haru
Haru
私みたいな素人でも簡単に出来るカスタマイズだよ!

JIN(ジン)の固定スマホフッターを変更したかった理由

JINでブログを立ち上げて、しばらくしてから全体のカラーイメージが出来上がってくると沸々と湧き上がってきた「固定スマホフッターの装飾をしたい」という気持ち。

ブログの雰囲気をゆるやかでやわらかくしたかった私には、どうもデフォルトの固定フッターだとシンプル過ぎる気が…

スマホで見ると、どこのページに居ても画面下の固定フッターは常に目に入るのでどうしても全体的な雰囲気を淡い色味に統一したかったのです。

そこから色々調べて自分なりに設定をしてみました!

☆Before (JINマニュアルより引用)

デフォルトは黒い文字に黒いアイコンで何となくシンプルな印象です。

★After

カスタマイズ後はこんな感じになります♪この微妙な女心を判っていただけたら嬉しいですw

わんこず
わんこず
事前に2点確認してね!

このカスタムは、既にJINマニュアルスマホフッターメニューの設定方法よりスマホ固定フッターの設定が完了しているという過程でお伝えしています。

スマホフッターメニューの設定方法はこちら

今回のカスタマイズは、CSS等テーマの主要な部分に触れる物ではないと思いますが万が一表示や現在の設定や体裁が崩れると困りますので必ずバックアップを取ってからの作業をお願いします。

JIN(ジン)固定スマホフッターを変更する方法!

結論からお伝えします!「装飾したい設定のコード」を作成します☟

【例】色変更+アイコンサイズ変更+文字サイズ変更する場合

<span style=”color: #入れたいカラーコード;”><i class=”入れたいアイコンコード アイコンのサイズ”></i>改行コード<文字サイズコード>文字</文字サイズコード></span> 

そのコードを「ナビゲーションラベル」に貼り付けるだけ】です!☟

手順はこちら▼

  1. アイコンを選んでコードを控える
  2. アイコンと文字の大きさを決める
  3. 表示バランスを整える(改行あり/なし)
  4. 色を決める(カラーコードを調べる)
  5. 各設定のコードを合体させて貼り付ける!

Haru
Haru
私がこのブログに実際に設定したコードと手順で説明するよ!

アイコンを選んでコードを控える

 

控えるコード

<i class=”fas fa-homfa-lg”>

まず表示させたいアイコンを選んで、そのコードを控えましょう!

▼アイコンはFontAwesomeから選びます▼

アイコンを選んだら、下の方に表示されているコードを確認します↓

控えるコードは<i class=“○○”></i>の

”○○”で囲まれている部分だけでOKです!☟

Haru
Haru
使いたいアイコンコードのこの部分だけをコピペして使ってね!

アイコンの大きさを決める

 

アイコンサイズ変更コード

<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

Haru
Haru
『余白調整』はアイコンの左右にちょっとしたスペースを作ってくれる絶妙なコードです♪このブログの固定スマホフッターのアイコンサイズは1.333…倍に設定してる

文字の大きさを決める

 

文字サイズ変更コード

<small>ホーム</small>

★文字の大きさ&コード一覧

small 小さめ
big 大きめ
sobig もっと大きめ

Haru
Haru
このブログの固定スマホフッターの文字サイズは小さめ=smallに設定してるよ

表示バランスを整える(改行あり/なし)

 

改行コード

<br>もしくは<br/> ※どちらでも動作OKでした

大きさが決まったら全体のバランスを整えてゆきましょう!ちなみに「アイコン+文字」の順番にコードを並べるとこんな感じ

 

反対に「文字+アイコン」の順番にコードを並べるとこんな感じなるので☟お好きな方を選んでください♪

Haru
Haru
このブログのコード設定にも改行<br>コードを入れてるよ

色を決める(カラーコードを調べる)

 

色変更コード

<span style=”color:#FF9F8A”></span>色変更したい箇所をコードで挟んでください

バランスが整ったら、いよいよカラーコードを調べて色を決めましょう!『出したいイメージ+カラーコード』でカラーコードを検索してみましょう。

Haru
Haru
アクセントカラーと同調の色味にすると統一感が増すよ♪

各設定のコードを合体させて貼り付ける

 

ここまで決めた設定のコードを1つに合体させるとこうなります!

このブログの設定コード

<span style=”color: #FF9F8A”><i class=”fas fa-home fa-lg “></i><br><small>ホーム</small></span>

カラーコード変更+ホームアイコン+ホームアイコンのサイズ指定+改行+ホーム文字サイズ変更+ホーム文字

合体コードを「ナビゲーションラベル」に貼り付けたらメニューを保存して終了です!

Haru
Haru
おつかれさまでした!保存をしたあとスマホで最終確認をして終了です!

まとめ

私の様な初心者でも簡単にカスタマイズが出来るようになったのは操作性の高いJINのおかげです。

自分のブログを自分好みにカスタマイズして自分のブログを愛でてあげましょう!

JIN公式カスタマイズ情報はこちら

JINダウンロードはこちら

わんこず
わんこず
最後まで読んでくれてありがとな!ブログの更新情報はtwitterで発信しているからフォロー(@yurupura_haru)してくれたら嬉しいぞ♪

ブログ初心者情報発信中!ポチっとお願いします▼

にほんブログ村 ブログブログ ブログ初心者へ