ブログ運営の基礎

ブログ改良。スマホ用フッター固定メニューのカスタマイズ

ブログのカスタマイズをしました。

スマホでブログを読む時に、使いやすくするために。

画面の下部に、メニューを表示させました。

 

今日はその方法をまとめてみます。

JINのスマホ用フッター固定メニューのカスタマイズ

カスタマイズの流れ

スマホで「フッター固定メニュー」を表示させるためにやることは2つ。

  1. 追加CSSに、コードをコピペする。
  2. 変更したい箇所をカスタマイズする。

 

①追加CSSにコードをコピペする

外観→カスタマイズ→追加CSS

に以下を貼り付けます。

/* スマホ固定フッター */

.footer-menu-sp .menu-item a{

background-color:#F58E7E;

color:#F5F1E9;

font-size: 13px;

font-weight: bold;

}

 

追加CSSに貼り付けたら、次はカスタマイズしましょう。

 

②変更したい箇所をカスタマイズする

①背景の色を変える

赤文字部分を、好きな色に変える。

background-color:#F58E7E;

カラーコードと呼ばれる英数字で書く。

カラーコードはここで確認できる。

 

②文字の色を変える

赤文字部分を、好きな色に変える。

color:#F5F1E9;

背景色と同じく、色はカラーコードから選ぶ。

カラーコードはここで確認できる。

 

③文字の大きさを変える

数字を変える。

文字を大きくしたければ、数字を大きくすればよい。

font-size: 13px;

 

今日のまなび

  • JINのスマホ用フッター固定メニューは「追加CSS」に入れればよい
  • ITの世界には、カラーコードと呼ばれる特殊文字がある