siwake

書き捨て

blogger [Vaster2カスタマイズ]メニューを開くボタンの背景色の変更

bloggerのメニューを開くボタンの背景色の変更方法

ナビゲーションの背景はデザイナーズで変更可能ですが、スマホ表示で”メニューを開く”ボタンの背景は変更されず目立つのでここの背景色を変更します。

 

わかりやすいよう紫にしてある部分です。

f:id:kowake:20180512100135p:plain

 

CSSの追加だけで変更する場合

下記のCSSをコピーして追加してください。

#ad63ccの部分を好きな色に変更してください。

 

/*メニューを開くボタンの背景色の変更*/

.button-toggle{
display:block !important;
width:90%;
box-sizing:border-box;

color:$(button.color);
padding:8px 10px;
margin:10px auto;
background:#ad63cc;
;
}

 

変更後(#b33a5cに変更の場合)

f:id:kowake:20180512101645p:plain

スマホ表示もこれで変更されます。

これで終了です。

 

どうしてもHTMLで変更したい時は以下の通りに。

 

HTML編集で変更したい場合

HTML編集画面で変更したい場合

メニューを開くボタン

で検索(Winの場合「ctrl+F」Macの場合「+F」で検索窓を表示)

詳細は以下

 

kowake.hatenablog.com

 

以下のコードを探す。

<Variable name="button.color" description="ボタンの文字色" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="button.background" description="ボタンの背景色" type="color" default="#008ec2" value="#008ec2"/>

 

ボタンの文字色を変更する場合は#ffffffを好きな色に変更

ボタンの背景色を変更したい場合は#008ec2を好きな色に変更

 

”テーマを保存”をクリックして終了。

 

これでデザイナーズで変更できなかったメニューを開くボタンがカスタマイズできました。