【JINカスタマイズ】スマホフッターメニューの色を変える(WordPress)

WordPressテーマJINカスタマイズ(スマホ固定フッターメニュー)

この記事には広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元させることがあります。

WordPressの人気テーマ『JIN』の、コピペでできる簡単カスタマイズをご紹介します。

今回は、「スマホフッターメニュー」の色を変更して、自分のブログデザインに馴染むようにしてみました!

 

事前設定

「JIN」でスマホフッターメニューを使用するには、事前の設定が必要です。

設定手順は、JIN公式マニュアルの「スマホフッターメニューの設定方法」ページを参照してください。

\\ ブログ初心者さん必見 //

目次(もくじ)

カスタマイズをする際の注意点

今回のカスタマイズは、JIN(親テーマ)のPHPやCSSを直接編集するものではありません。

しかしながら万が一の際に責任がとれませんので、ご自身でバックアップをとったうえで作業していただきますようお願いします。

また、アップデートによりデザインが修正前に戻ってしまうのを防ぐため、子テーマの導入もおすすめします。

 

スポンサーリンク

《カスタマイズイメージ》JINスマホ固定フッター

【 before 】

WordPressテーマJINカスタマイズ(スマホ固定フッターメニュー)


【 after 】

WordPressテーマJINカスタマイズ(スマホ固定フッターメニュー)

 

「背景の色」と「文字の色」を変えることができます!

 

 

カスタマイズ方法

このカスタマイズは、「追加CSS」の機能を利用します

 

WordPressの管理画面を開き、

「外観」→「カスタマイズ」→「追加CSS」に進みます。

WordPressテーマJINカスタマイズ(プロフィール)

「追加CSS」欄にカスタマイズ用のコードを入力する

「追加CSS」欄に、下記でご紹介するカスタマイズ用のコードを入力します。

入力後はプレビューで確認し、最後に「公開」ボタンを押して保存してください。

 

 

入力するCSS(コピペでOK)
追加CSS欄に、下記のコードを入力してください。

 

▼「追加CSS」に下記コードを追加

HTML


/* スマホ固定フッター */
.footer-menu-sp .menu-item a{
background-color:#F58E7E; /* 背景の色を指定 */
color:#F5F1E9; /* 文字の色を指定 */
}

 

※ #英数字は背景の色です。お好きなHTMLカラーコードを指定できます。

※ #英数字は文字の色です。お好きなHTMLカラーコードを指定できます。

 

 
以上、WordPressテーマ『JIN』のスマホフッターメニューの色を変更するカスタマイズをご紹介しました。

JINのスマホフッターメニューは固定表示なので、どのページのどの部分を読んでいても常に表示されます。

「プロフィール」や「サイトマップ」など、ブログの訪問者にクリックしてほしいメニューを設定しておくと回遊率がアップできて良いと思います。

  

当サイトでは、他にもJINのオリジナルカスタマイズをご紹介しています。こちらの記事もぜひあわせてお読みください。

最後になりますが、カスタマイズを行う際は必ずバックアップをとったうえで自己責任にて作業を行ってください。

ご質問ご指摘ありましたらお問い合わせフォームからお願いします。