bloggerの記事内ページの左上の矢印をメニュー表示用アイコンに変えたい





書きたいことがたくさんあるのに
ブログのデザインが気になってなかなか書けません。

テンプレートを最初は「シンプル」にしていたのですが、タグが記事下に出ておらず
テンプレート直すのも面倒だったので数年前に追加されたらしい新テンプレートから選ぶことに。


目次
1.bloggerのテーマContempo
2.左上の矢印をメニューにしたい
3.課題
4.さいごに


1.bloggerのテーマContempo

とりあえず見た目はあまり気にしてなくて、必要最低限のものがあればいいや~という私。
シンプルと雰囲気が似ていたContempoを選択。

そしたらレイアウトページがガッツリ変わって困惑。
フッターとかなくなってて、ガジェットの追加はサイドバーのみ。。これどうやって使うの?状態(笑)

とりあえず自分のブログのトップページを見てみたら、左上に三本線のアイコンが。
押したらサイドバーがペラっと出てきておぉ~ってなりました(初心者)
ハンバーガーメニューって言うんですねφ(..)メモメモ

2.左上の矢印をメニューにしたい

サイドバーにラベルを置いておけば、タグが見られるし良いじゃん~
と、思っていたら…

記事ページでは左上が矢印…だと!?


押してないけどたぶんホームに戻るボタンなんでしょうね。
何故?同じようにサイドバー表示してくれたら良いのに。。

と思って調べてたら、書いてくださってるサイト発見~。英語ですが。
参考にさせていただいたありがたいサイト様

簡単に説明しますと
デフォルトではわざわざご丁寧に記事内の場合は矢印アイコンになるようにif文で分岐されているので、if文をなくしたっていうだけ。


ハンバーガーメニューが無事表示されました。めでたしめでたし。

ちなみに画面上部の背景も変えました。
ワスレナグサ(ミオソティス)です。
青い花は本当に綺麗です。
ネモフィラより好きかもです。またその話は別の記事にて。

3.課題

あまりテンプレートにこだわりは無いと言いましたが、まだやりたいことがあります。
・最終更新日を出したい
・日付のフォーマットを変えたい
・登録ボタンいらない
などなど…

ま、必須でやるのは一番上だけですかね。
HTMLスマホでいじるのほんと一苦労なんですよ。。

4.さいごに

モバイルでの表示を重視しているからか
Contempo他後で追加されたテンプレートはレスポンシブ対応がされているんですよね。(名前合ってるか不安)

ウェブリブログではモバイルフレンドリーの項目でサーチコンソールがエラー出しまくってたけど、これなら大丈夫そう。

しかし!
あまりにスマホ向けを重視しすぎて、PCから見ると我がサイトは全体的に左に寄っていることが判明。。
それでいて画像は真ん中にしちゃったからもうレイアウトくちゃくちゃ。
一部の記事は直しましたが、読みやすいようにと入れてた改行を少し減らして
PC表示時のスカスカ感を無くそうとしようかなあと。

PC版だけはサイドバーわざわざ引っ込まなくていいのに。常時表示する方法、また調べよう。

いずれは自作テンプレートとか使えるくらいになりたいなあと思いつつも、きっと今のまま続けるだろうなあ。

今回も最後まで読んで下さりありがとうございました。
結局今日も書きたい記事書けなかったよ~。(深夜0時)




★その他の記事は左上の[≡]からご覧頂けます。

【行き方や混雑状況】大阪舞洲ネモフィラ祭りに行ってきた【2019開花状況】

【開花状況】大阪で辺り一面ピンクのれんげ畑を見に行ってきた【高槻】

【見頃2019年版】大阪市福島区に野田藤を見に行ってきた【発祥の地】

【バスツアー情報一覧等】2019年大阪舞洲で100万株のネモフィラ祭り

【新五千円札】大阪市内の藤の名所、のだふじ発祥の地から藤巡り