ブログ運営

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

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

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

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

     

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

    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の世界には、カラーコードと呼ばれる特殊文字がある