ブログのデザインを若干変更しました
サイトのデザインを一部変更しましたのでお知らせします。変更内容は下記の２つです。
- サイトのトップ画面にテキストを表示
- 記事や固定ページ画面でハンバーガーメニューを表示
トップ画面にテキストを表示
本サイトが使用しているGoogle Bloggerのトップ画面は通常は記事一覧のみが表示されます。しかし本サイトはブログではなく独自サイトのような雰囲気にしたいと思っているため、トップ画面にテキストを表示したいと考えていました。しかし僕が今使っているテーマのContempoではBloggerのレイアウト画面では「ブログの本文」(他のテンプレートでは「メイン」)のところにガジェットを追加するボタンがありません。非公式を含め他のテンプレートも探しましたがメインにガジェットを追加できるものはほぼなく諦めていました。
しかし、レイアウト画面をいじっていたら、一旦サイドバーにガジェットを追加してからマウス操作でブログの本文にドラックすると移動できることに気がつきました。とても簡単なことでした。もっと早く気付いていれば良かったです。
但し、そのままメインにテキストガジェットを追加すると上部のヘッダー画像の上にテキストが表示されて視認性が最悪なので、HTMLで背景色を白に設定しました。また文字色もデフォルトで灰色となっていたため黒に設定しました。また、それだけだと文字の下にしか背景色がなく見栄えが悪いので白い枠線を設定しました。
追記①: 上記のようにしてテキストを追加した結果、記事や固定ページの画面にも表示されてしまいました。追加したガジェットをトップページにだけ表示するためにはもう一つ手順が必要だったようです。下記のサイトを参考にテーマを編集しました。
追記②: 見栄えが悪かったため文字色を黒から記事本文と同じ灰色(#757575)に戻し、さらに下部の記事一覧に文字位置を合わせるためインデント(字下げ)を2文字分だけ入れました。字下げはhtmlにmargin-left: 2remを記述して指定しました。また、上部に見出しがあった方が座りが良いので入れました。
追記③: 追加したテキストの見出しと下部の記事一覧の見出しが全く同じ見た目でわかりにくかったので、テキストガジェットの下に同じ方法でもう一つテキストガジェットを入れて「新着記事」という見出しを入れました。こちらにもトップページ以外に表示されないようにするコードを入れていあります。これでここから下が記事一覧なんだということがよく分かるようになったと思います。
記事や固定ページ画面にハンバーガーメニューを表示
記事や固定ページの上部には従来本サイトのトップに戻る左矢印がありましたが、上部のサイト名のところを押してもトップに戻れるため必要がないと判断し廃止しました。代わりにトップ画面と同様の折りたたみナビゲーションを表示するハンバーガーボタンを設置しました。
設置方法は下記のサイトを参考にしました。
なお、そのサイトに書いてあった「ヘッダーのデザインを左矢印から引き継ぐためのCSS」については方法がわからなかったのでやりませんでした。表示には問題ないはずです。
当サイトは鉄道コムと日本ブログ村のブログランキングに参加しております。本記事が少しでも気に入りましたら是非下のバナーをクリックして下さい。
コメント
コメントを投稿