メニュー(ハンバーガー)アイコン

追記:こちら

Bloggerの「ページ」メニューにハンバーガーアイコン

ずいぶん前から気にはなっていた。

「ページ」メニューのモバイル表示、「▼」の文字。
分かる人にはわかるけど、気づかない人には全然見えてない。

「▼MENU」と、書いてみて、 多少の注意は引けるかもだけど、
せっかくモバイル対応なんだから、三本線メニューを出したい。

そりゃ、フルカスタムのテンプレ導入とか、
HTMLを大きく追加すれば出来るんだけど、
なんとか、お気軽にハンバーガーアイコンにならないかと、

1.「≡(≡)」とか「☰(☰)」とか、なんか納得いかない。

2.cssで「三本線メニュー」も作れるようで、
-------------------------
 .hamburger {
position: relative;
display: inline-block;
width: 1.25em;
height: 0.7em;
margin-right: 0.3em;
border-top: 0.2em solid black;
border-bottom: 0.2em solid black;
}n
.hamburger:before {
content: "";
position: absolute;
top: 0.3em;
left: 0px;
width: 100%;
border-top: 0.2em solid black;
}
-------------------------
▼ (▼)
↓
<span class="hamburger"></span>MENU
-------------------------

3.SVGファイル作成、圧縮、Dropboxにコピー。

Inkscapeで、高さ16pxの書類作成、3本線の絵をsvgで保存。
(文字入れる時は、アウトライン化。 )

https://compressor.io/ で圧縮。
「」とか、 「」

テンプレート→HTMLで、
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.separator.color);
}
の下に、↓追加。
.pagelist-arrow:before { content: url("https://www.dropbox.com/s/xxxxx/3line-w.svg?dl=1"); margin:0 4px 0 0;
}

とりあえず、3.のコースで、