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


Bloggerは、Googleのブログサービスですが、日本ではあまり知られていません。
そのせいかブログテーマ(デザイン)自体も、日本のネットユーザーにはなじみにくいモノが多い印象があります。

今回は日本のBloggerユーザーが最終的にたどり着く事が多いといわれる、日本生まれのBloggerテーマ「Vaster2」を導入した時の記録です。

おはようございます!
Vaster2は、トーマスイッチさんが作ったBlogger用のテーマです!

今回ダウンロードしたのはVaster2はテンプレートデザイナー版です。

私としては以前、Contempoというテーマを使っていました。
その時に、使っていたダークグレー系のカラーリングが気に入っていたので、Vaster2を導入でも、そのカラーリングを踏襲できないかいろいろ試してみました。

しかし結論的に言えば、その方向でのカラーリングは難しく、今現在のカラーリングになっています。

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

HTMLとCSSの勉強をサボっていたツケ

若い頃に実は、Webデザインをかじっていたたことがありました。

しかし、単純にタグを打っていればいい時代からどんどんCSSに移り、
もともとプログラムに弱い私は逃避してしまったので、この10年くらいのHTMLの情報を知らずにいます。

例えば、文字を中央揃えにしたかったとします。
Webデザインになれている人なら、<div align="center">~</div>にするところなのでしょうか?

私はほんのちょっと前まで<center>~</center>でやっていました・・・。

かなり疎くなっていることを実感して調べてみました。
すると、今の時代は<center>タグは使わないほうが良いということです。

そして、<div>タグというものの存在をごく最近知ったレベルです(笑)

タグならば調べていけばなんとかなります。
しかし、どうみてもそのタグの中に変数らしきものがたくさん見えるので、CSSから引っ張ってきているのだろう、というところで思考停止してしまっています。
※筆者注 最近それが「class」だということを覚えました!

CSSでもいじれそうなところは、解説サイトを並べて見比べながらやっております。

ダークグレーに挑戦したものの

今回は関連記事表示についてはバッチリうまく行ったので、そこは良かったのですが、カラーリングがどうもうまくいきません。

ダークグレー系の色合いには途中までは成功していました。

しかし、注目の記事の文字色がテンプレートデザイナーで変えられません。
また、全体をグレー調にしたときにどうしても記事とサイドバーの間にある明るい線(白?)が消せなかったりということで調整が進みませんでした。

※テンプレートデザイナーとはBloggerの機能で、HTMLやCSSに明るくない人でも文字色や背景、コラム幅などを調整できる機能。どのテーマ(テンプレート)でも対応するというわけではなく、テーマの方でテンプレートデザイナーに対応する必要がある。

何度やってもラチがあかないので、色については保留することにしました。


カラーリングは発想を変えることに。

Vaster2を使っていると思われるブログをいくつか参考にしてみました。

どのサイトも明るい色調が多く、私のブログのように暗いベース色の中に明るい色がある、という作り方をしているところはありませんでした。

おそらく、Vaster2そのものが明るい色合いのブログを想定されて作られていると考え、そういう方向のカラーリングに切り替えることにしました。

唯一の名残りはページリストのベース色がダークグレーなところです(笑)
ここについても実はちょっと不満があって、メニューを並べた時に左右の飽きが均等じゃないんですよね。

左寄せなら左、中央寄せなら中央、右寄せなら右、この辺明確でないとデザイナーというタイプの人間はすっごく気になってしまうのです。

グラフィックソフトならそのような形で合わせてしまうのですが、このへん記述しないといけないHTMLだと「そう書かないと思った形にならない」以上、そのやり方を私自身が理解できないとだめですね。

ということで、ここも保留です。

次に小見出しの調整ですが、個人的に文字の下にアンダーラインが走るデザインが好きなので、そこはCSSをなんとか見つけ出してラインを入れることに成功しました。

現状解決できていないのはまだあります。
それは、広告についてです。
Vaster2は記事中広告を入れるところはここ!
とコメントを付けて教えてくれているので、非常にありがたいテーマです。

これで、記事中に二箇所広告が自動で入るようになりました。
しかし、上方の広告(Read Moreを開いたところにでるもの)は良いのですが、下のコメントの上にでる広告が崩れてしまう、というかシェアボタンに重なってしまうのです。

これは放っておくと確実にGoogleさんに怒られてしまう案件になりそうで、今現在解決できそうにないので下の広告は外してしまいました。

最近書いた記事についてはそこまでのことは起こらないのですが、古い記事がのきなみ重なってしまうのですね。
この辺ちょっと時間をかけないと修復できそうにないので、これも保留です。

この辺りは現在、おおむね解決しています。
<div>タグで区切って行くようにしたら、上記の問題はほぼなくなりました。


まとめ

保留というか先送りだらけの記事になってしまいましたが、しょうがないですね(苦笑)

  • 人間、勉強をサボっちゃダメ
という一言しかまとめられそうにありません。

たまたまKindle Unlimitedに再加入したら再無料期間になっていたので、CSSやHTMLの本が無いかと思ったら、以下の本がヒットしましたのでこれから読んでみます・・・w


では今回はこの辺で。おつかれさまでした!





コメント