雑記Webデザインに弱い私ですがBlogger標準テーマでは満足いかなくなりました。そこで日本産のBloggerテーマ、Vaster2を導入しましたがどころ先送りにしていました。今回は少しでも見栄えを良くしようと、ヘッダーや小見出しなど、CSSの変更に挑戦してみたお話です。おはようございます!わりと日本のブログ文化になじみやすいVaster2を導入しましたが、そこからずっとHTMLやCSSをいじる日々になってしまいました。ブログを見て回られる方にはblogspotってあまり馴染みないドメインネームですよね?これがBloggerでブログを作成すると与えられるドメインネームです。Bloggerを使っている方はみなさんこの状態になります。sedge-designの部分はサブドメインですので、それぞれ自由に付けられます。Blogger自体はどこが運営しているのかというと、実はGoogleなんですね。Google検索に強い、という話ですが、どうなんでしょう。日本語環境でのカスタマイズなどの情報が少ないブログテーマは多いが、日本語環境のユーザーには痒い所に手が届かない他の無料ブログのように公式ポータルがないといった日本語ブログとしてはちょっと不利な点があることでしょうか。Vaster2とはVaster2はトーマスイッチ様が開発・配布している、前項で不利と感じた部分の1つ目と2つ目を改善してくれる日本語Bloggerユーザーのためのテーマです。標準Bloggerでは付いていない、パンくずリスト、関連記事の表示などを機能として持っています。Vaster2|レスポンシブ対応済みのblogger日本語テンプレートhttp://toumaswitch.com/vaster2/シンプルなデザインなので、逆にいうとそのままだと誰が使っても同じにみえてしまうため、それぞれのユーザーのカスタマイズが必要になるかと思います。今回カスタマイズするにあたり、以下の2つのブログを参考にさせていただきました。あかりログhttp://www.akari-log.com/Vaster2カスタムブログhttps://vaster2customtom.blogspot.com/変更した所ヘッダーまずヘッダーについてはVaster2標準だとトップにボーダーラインがあり、タイトル背景は白、タイトル位置・ディスクリプションは右揃えになっています。class='header-outer'>以下のように変更しました。class='header-outer'>CSSで変更する方法もあったようですが、これをいじった当時はまったくわからなかったのでタグで無理やり変更していますね・・・。$(header.topborder.color);}というCSSに以下のように加えております。$(entryh3.border);color:$(entryh3.color);}以下のように変更しています。$(entryh3.border);color:$(entryh3.color);}画像の位置Vaster2標準ですと、画像はかならず左揃えになるようになっていましたので、そこを調整しました。&quot;item&quot;'>~~~~</b:if><!--SNSボタン編集ここまで-->の~~~~にあった部分をゴッソリ削除して、代わりに忍者ボタンのタグにすげ替えています。(ここはちょっとタグ公開は控えさせていただきます)引用部囲みこちらはさほど大きくは変えていませんが、背景の色を薄いグレーにして、角丸を付けた形にしました。break-word;}上記を以下のように変更しています。標準が座布団の縦幅が太かったのでまず細くして、それから上下に同系色の濃いめのボーダーを入れるようにしました。30px;background:$(entryh2.background);color:$(entryh2.color);}上記を以下のように変更しています。#006119;}まとめ以上になりますが、修正点を自分の備忘録として書いてみました。Vaster2の元々のデザインがシンプルなため、手を入れようと思えばいろいろいじれるので、HTMLとCSSが苦手な私はこの程度ですが、明るい方ならもっといろいろ変更できるかと思います。いうことで、Vaster2をこれから導入する方の参考になればうれしいです。自己紹介デザイン講師ブロガーSedge(セッジ)人間が作るモノにはデザインの思考が宿る「セッジデザイン」は、この言葉をモットーに初心者向けのデザイン情報とアドビ系ソフトの使い方を解説するブログです。運営者のセッジは講師としてデザイン教育に従事しつつ、グラフィックデザイン・イラストレーション・アニメーションの制作を行っています。お仕事のご相談などございましたらお問い合わせよりお願いいたします。