\ 9月割!早割最大4,000円OFF / オイシックス/おせちご予約開始
ブログで稼ぐ

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

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

 

この記事は、WordPressの人気テーマ・JINの非公式カスタマイズです。

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

 

こんにちは!

あつみん(@lemonatumi)です。

 

このブログは、WordPressのテーマ・JINを使用しています。

 

人気の『JIN』カスタマイズシリーズ【第三弾】は、

「スマホフッターメニュー」色を変更する方法です。

 

事前設定

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

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

JIN公式マニュアルへ

 

JINオリジナルのデザインもシンプルで良いですが、自分のブログデザインに馴染むようにカスタマイズしてみましょう♪

 

\ ブロガー初心者さんへ /

ブログで稼ぎたい(= 広告収入を得たい)ならまずはASPに登録しましょう(`・-・´)b

私が登録しているおすすめのASPです

 

JINカスタマイズの注意点

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

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

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

 

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

【 before 】

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


【 after 】

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

 

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

 

 

《カスタマイズ方法》JINスマホ固定フッター

「追加CSS」の画面を開く

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

 

WordPressの管理画面を開き、

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

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

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

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

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

 

 

《カスタマイズ入力コード》コピペOK!JINスマホフッター

あつみん
あつみん
コピペして使ってね☆

 

追加CSS欄に、下記のコードを入力してください。

 

追加CSSに下記コードを追加

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

 

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

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

 

 

あとがき

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

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

 

 

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

また、ご利用の環境によっては上手く動作しない場合があります。

ご意見ご指摘ありましたらお問い合わせからお願いします。

▼ 海外旅行保険が自動付帯




海外に行くなら旅行保険は必須!!
現地でのお買い物も楽々♡

\ 年会費永年無料 /

エポスカード