記事が増えていくにつれて、記事下に表示される「この記事の関連記事」に画像がない。
テキストに顔文字は入れた方がよいのか、WEB FONTて何？ など知識も増えましたが疑問点も増えました。
このままだと疑問は増える一方だし、初心者で作業工程を忘れてしまいそうなので、備忘録としてメニューバーや表を作成の手順を記事にします。
そもそも当ブログは、トーマスさんのブログ「トーマスイッチ」で配布されている、blogger用の日本語テンプレート「Vaster2」をベースにしています。
・シンプルなデザイン5つの特徴の他にも、レスポンシブやSEO対応済みのテンプレートです。しかも無料。とてもありがたいです。感謝です。
・日本語対応のテンプレートデザイナー
・6種類のオリジナルSNSボタン
・関連記事を表示できる
・アドセンスを記事中＆下に設置できる
メニューバーをカスタマイズ
メンテナンスをするため、まず少しでも地味さをなくそうと、ヘッダーナビの背景色を変更しました。気持ちましになった気もしますが満足はしていません。
デザイン調整しようとすると、背景に画像を使ったら重くなるのか？ とか懸念点が出てくくるので後回しになりがちです。
記事に画像を挿入すればサムネイルに反映されるので少しは華やかになるでしょう。たぶん。。。
メニューバーの一覧表示
初投稿後に感じた中で一番カスタマイズしたい点はメニューバーの調整。ヘッダーナビにその関連記事の一覧が見れるようにしたいでした。他のブログはどうなっているのか、参考にいろいろブログを見ました。
「Vaster2 カスタマイズ」で検索すれば、それなりにヒットはするのですが、WordPressに移行してる人も多そう。
そもそも、そのブログは何を使って投稿しているのか、独自ドメインぐらいでしか判断できない初心者なので苦労しました。
これまでの経験で、Bloggerでメニューバー（グローバルナビ）を表示させるには、「投稿」ではなく「ページ」を使うことはわかりました。あとはどうやって表示させるかです。
ページの更新毎に自力で、タイトルとリンクを追加していけばできそうですが、それは面倒くさい。自動で表示させたいのです。
そこで、ガシェットをあらためて見て「ラベル」機能を発見。このラベル一覧を表示させようと思いました。
メニューバーの実装
どのブログをみてもアドバイスされていますが、カスタマイズするときはバックアップを取ってからやることをおすすめします。- バックアップを取る
- 「ページ」から必要なラベル（ブログ運営の雑記）を設置
- 「ラベルガシェット」で一覧表示したURLをコピーする
- 「テーマ」→「HTMLの編集」で設置したラベルの、href'タグのリンク先URLを、コピーした一覧のURLに差し替える（href': 'https://URLURLURL, 'title': 'ラベル名、になっているので、ラベル名で探せば検索しやすいと思います）
 |
| カテゴリをクリックした状態 |
なんとかできました。（現在は表示していません）
表をカスタマイズ
「totoくじで、指定試合の開催数が満たなく、くじが不成立になった」記事では数字や受け取り方法を比較するために表をいれています。
これからも表組は必要になると思うので調べてみました。
表作りに参考にしたのは、Googleスプレッドシートとあるのが、Bloggerユーザーにはありがたい、うりさんのブログです。
「ANAマイルdeうりと行くスカイ」Google スプレッドシートはエクセル感覚で使えますし、Gmailなどグーグルのサービスを使っていれば、グーグルドライブからすぐに利用可能。
ブログ記事に表（table）を入れる時はGoogleスプレッドシートを活用すべし｜はてな・ワードプレス対応
表の作成はエクセルと同じです。表を作ってコピペするだけ。簡単ですね。
クローム以外のブラウザで見ると表が崩れていたので、記事の「HTML」形式でwidthの設定を変更しました。
table-layout: fixed; width: 0px;
↓
table-layout: fixed; width: auto;
 |
| スプレッドシートはエクセルと同じ感じで作れます |
少しWEB知識が身についたと感じていますが、デザインやレイアウト調整をしていきたいのですが、まだまだですね。
