スマホ用ナビドロワーにボタンを追加・タイトルも変更

ナビドロワー内部をカスタマイズ

こんな感じで変更

カスタマイズ後

CUSTOM POINT
ナビドロワー内部をフラットな感じにしてみました。

カスタマイズの準備

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

ウィジェットにコードを追記

MENくん
今回のカスタマイズはウィジェットの設定から始まりますよ

1スマホ用ナビドロワーのウィジェットを開きます

ウィジェット画面
外観
ウィジェット

ナビドロワーウィジェットの場所


2この中にカスタムHTMLを追加します

カスタムHTMLを追加


3タイトルは無しでHTMLコードを追加します

カスタムHTMLの中身

タイトル部分は空白にしてください。

追加するコード
2~8行目(フォローボタン)
この部分はフォローボタンのカスタマイズをしている方限定です。

SNSボタンをカスタマイズしてみた【SANGOを自分でカスタマイズ】SNSボタンを横長2列にしてみた
9行目(シェアボタンタイトル)
この部分はシェアボタンのカスタマイズをしている方限定です。

ナビゲーションドロワーのSNSボタンをカスタマイズ【SANGOカスタマイズしてみた】ナビドロワーのSNSボタンをなじませてみた
MENくん
HOMEボタンだけを追加する方は、1行目だけでOKです

4人気記事や新着記事を入れる

ここは別にいらないよって方は、飛ばしてください。

それいがに追加するもの

MENくん
ほいっ!これでとりあえず元なるコードは準備OKです
くま3号
あとはカスタマイズコードを打ち込んでしまいやな

3つのコード追加方法

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

カスタマイズコード

 

HOMEボタン部分(1~17部分)

HOMEボタンだけ追加する方は、この部分だけで大丈夫です。

 

フォローボタン部分(18~21行目)

フォローボタンを設置する方は、この部分で調整しています。

 

タイトルの変更(22行目~)

タイトル(見出し)部分を変更する方は、この部分で調整しています。

うまくいったか確認

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

まとめ

追加CSSのまとめ

ナビドロワー内のカスタマイズをしてみました。

スマホ用固定フッターをMENUだけにしているので、ナビドロワー内は盛りだくさんになりました。

ボタンが大きいぶん、押しやすいかもしれませんね。

MENくん
フラットなデザインで気に入ってます

 

コメント( ˶ˆ꒳ˆ˵ )

avatar