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

アイキャッチ

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

おはようございます!
わりと日本のブログ文化になじみやすいVaster2を導入しましたが、そこからずっとHTMLや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つのブログを参考にさせていただきました。

http://www.akari-log.com/

https://vaster2customtom.blogspot.com/

変更した所

ヘッダー

まずヘッダーについてはVaster2標準だとトップにボーダーラインがあり、タイトル背景は白、タイトル位置・ディスクリプションは右揃えになっています。
headerタグを探し、
      <header>
        <div class='header-outer'> 
以下のように変更しました。
      <header>
        <div align='center' class='header-outer'>
CSSで変更する方法もあったようですが、これをいじった当時はまったくわからなかったのでタグで無理やり変更していますね・・・。

その後、当初のヘッダー背景はベタ塗りの緑だったのですが、今ひとつ単調だったため、グラデーションにできないか調べたら、CSSの関数があるのを見つけて、
.Header{
width:100%;
background-color: $(header.background.color);
padding-bottom: 30px;
border-top:3px solid $(header.topborder.color);
}
というCSSに以下のように加えております。 
.Header{
width:100%;
background:linear-gradient(#004C13,#00C233);
background-color: $(header.background.color);
padding-bottom: 10px;
border-top:0px solid $(header.topborder.color);
}

小見出し

小見出しについては前回も書いたように、文字の下にアンダーラインが走るデザインが好きなので、このあたりからCSSをちょっぴり探すようになっていて、
.entry-content h3{
   font-size:20px;
   padding:15px 0 15px 10px;
   border-left: 8px solid $(entryh3.border);
color:$(entryh3.color);
}
以下のように変更しています。
.entry-content h3{
   font-size:20px;
   padding:5px 0 5px 10px;
   margin-bottom: 15px;
   border-left: 8px solid $(entryh3.border);
   border-bottom: 1px solid $(entryh3.border);
color:$(entryh3.color);
}

画像の位置

Vaster2標準ですと、画像はかならず左揃えになるようになっていましたので、そこを調整しました。
img, video, object {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
display: block;
}
 上記の中の display: block; を display: inline-block; に変更しています。
img, video, object {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
display: inline-block;
}

シェアボタン

シェアボタンはVaster2標準のものはちょっと大きすぎたので、これまでの忍者おまとめボタンの方が良いかなということで、
<!--SNSボタン編集-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
~~~~</b:if>
<!--SNSボタン編集ここまで-->
の~~~~にあった部分をゴッソリ削除して、代わりに忍者ボタンのタグにすげ替えています。(ここはちょっとタグ公開は控えさせていただきます)

引用部囲み

こちらはさほど大きくは変えていませんが、背景の色を薄いグレーにして、角丸を付けた形にしました。
blockquote {
     padding: 10px 30px;
    margin: 10px 0 20px 0;
    border: 1px solid #c8c8c8;
    overflow-wrap: break-word;
}
 上記を以下のように変更しています。
blockquote {
   padding: 10px 30px;
   margin: 10px 0 20px 0;
   border: 1px solid #c8c8c8;
   background-color:whitesmoke;
   overflow-wrap: break-word;
   border-radius: 5px 5px 5px 5px;
}

関連記事

関連記事は標準が座布団の縦幅が太かったのでまず細くして、それから上下に同系色の濃いめのボーダーを入れるようにしました。
#related-posts h2{
   padding: .5em .75em;
   margin-bottom: 30px;
   background:$(entryh2.background);
   color:$(entryh2.color);
}
上記を以下のように変更しています。
#related-posts h2{
  padding:10px 0 5px 10px;
  margin-bottom: 10px;
  background:$(entryh2.background);
  color:$(entryh2.color);
  border-top:2px solid #006119;
  border-bottom:2px solid #006119;
}

まとめ

以上になりますが、修正点を自分の備忘録として書いてみました。

Vaster2の元々のデザインがシンプルなため、手を入れようと思えばいろいろいじれるので、HTMLとCSSが苦手な私はこの程度ですが、明るい方ならもっといろいろ変更できるかと思います。

ということで、Vaster2をこれから導入する方の参考になればうれしいです。
では今回はこの辺で。おつかれさまでした!






コメント