ブログのデザインを若干変更しました
- サイトのトップ画面にテキストを表示
- 記事や固定ページ画面でハンバーガーメニューを表示
トップ画面にテキストを表示
本サイトが使用しているGoogle Bloggerのトップ画面は通常は記事一覧のみが表示されます。しかし本サイトはブログではなく独自サイトのような雰囲気にしたいと思っているため、トップ画面にテキストを表示したいと考えていました。しかし僕が今使っているテーマのContempoではBloggerのレイアウト画面では「ブログの本文」(他のテンプレートでは「メイン」)のところにガジェットを追加するボタンがありません。非公式を含め他のテンプレートも探しましたがメインにガジェットを追加できるものはほぼなく諦めていました。
しかし、レイアウト画面をいじっていたら、一旦サイドバーにガジェットを追加してからマウス操作でブログの本文にドラックすると移動できることに気がつきました。とても簡単なことでした。もっと早く気付いていれば良かったです。
但し、そのままメインにテキストガジェットを追加すると上部のヘッダー画像の上にテキストが表示されて視認性が最悪なので、HTMLで背景色を白に設定しました。また文字色もデフォルトで灰色となっていたため黒に設定しました。また、それだけだと文字の下にしか背景色がなく見栄えが悪いので白い枠線を設定しました。
記事や固定ページ画面にハンバーガーメニューを表示
記事や固定ページの上部には従来本サイトのトップに戻る左矢印がありましたが、上部のサイト名のところを押してもトップに戻れるため必要がないと判断し廃止しました。代わりにトップ画面と同様の折りたたみナビゲーションを表示するハンバーガーボタンを設置しました。
設置方法は下記のサイトを参考にしました。
https://www.nagahitoyuki.com/2019/03/add-hamburger-menu-to-article-and-additional-pages-of-blogger-templates-contempo-soho-and-emporio.html#customize-3
なお、そのサイトに書いてあった「ヘッダーのデザインを左矢印から引き継ぐためのCSS」については方法がわからなかったのでやりませんでした。表示には問題ないはずです。
コメント
コメントを投稿