Vaster2を導入挑戦してみた話2 Google Blogger

Webデザインに弱い私ですがBlogger標準テーマでは満足いかなくなりました。
そこで日本産のBloggerテーマ、Vaster2を導入しましたがどころ先送りにしていました。
今回は少しでも見栄えを良くしようと、ヘッダーや小見出しなど、CSSの変更に挑戦してみたお話です。


【当ブログは2018年9月4日に最新テーマZELOに移行しています】

そもそもBloggerって？

まずはここからお話するのを忘れておりました・・・（汗）

うちブログのURL、sedge-design.blogspot.com ですが、ブログを見て回られる方にはblogspotってあまり馴染みないドメインネームですよね？

これがBloggerでブログを作成すると与えられるドメインネームです。
Bloggerを使っている方はみなさんこの状態になります。sedge-designの部分はサブドメインですので、それぞれ自由に付けられます。

Blogger自体はどこが運営しているのかというと、実はGoogleなんですね。
なのでGoogle検索に強い、という話ですが、どうなんでしょう。

ただ、やってみて感じたのは、

• 日本語環境でのカスタマイズなどの情報が少ない
• ブログテーマは多いが、日本語環境のユーザーには痒い所に手が届かない
• 他の無料ブログのように公式ポータルがない

といった日本語ブログとしてはちょっと不利な点があることでしょうか。

Vaster2とは

Vaster2はトーマスイッチ様が開発・配布している、前項で不利と感じた部分の1つ目と2つ目を改善してくれる日本語Bloggerユーザーのためのテーマです。

標準Bloggerでは付いていない、パンくずリスト、関連記事の表示などを機能として持っています。
シンプルなデザインなので、逆にいうとそのままだと誰が使っても同じにみえてしまうため、それぞれのユーザーのカスタマイズが必要になるかと思います。

今回カスタマイズするにあたり、以下の2つのブログを参考にさせていただきました。

変更した所

ヘッダー

まずヘッダーについてはVaster2標準だとトップにボーダーラインがあり、タイトル背景は白、タイトル位置・ディスクリプションは右揃えになっています。
headerタグを探し、
以下のように変更しました。

小見出し

小見出しについては前回も書いたように、文字の下にアンダーラインが走るデザインが好きなので、このあたりからCSSをちょっぴり探すようになっていて、
以下のように変更しています。

画像の位置

Vaster2標準ですと、画像はかならず左揃えになるようになっていましたので、そこを調整しました。
 上記の中の display: block; を display: inline-block; に変更しています。