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

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

こんな感じで変更

カスタマイズ後

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

カスタマイズの準備

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

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

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の手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

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

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

カスタマイズコード

 

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

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

 

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

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

 

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

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

うまくいったか確認

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

まとめ

追加CSSのまとめ

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

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

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

MENくん

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