Bloggerテーマ「Vaster2」から「Tokyo」へ変更 その理由と変更後の調整と感想など

2019年3月16日

Blogger ネット

いつも当ブログにご訪問いただきありがとうございます(^^)。ご覧いただいてお気づきの方もいらっしゃるかもですが、デザインを変更してみました!

デザイン変更!と言うものの...

今までがこんな感じでしたからね。


あんまりイメージは変えてないんよね。変えたい部分と変えたくない部分ってあって、まず変えたくない部分ってのは
  • 2カラムで右側がサイドバーであること
  • トップ画面が記事一覧(サムネイル画像付き)であること
  • ヘッダーの下にメニューバーを設置できること
以上3点ね。これは多くのブログがこれに準拠しているんで、見飽きたレイアウトだって人もいるかもしれないけど、それだけ読みやすい配置だと思うわけです。色々なブログを読むけど、やっぱりこのパターンが読みやすい。だから、イメージを変えようがないわけね。

改善したいなぁ~と思ったこと

漠然として「読みやすくしたい」ってのがあってね。もちろん今まででも読みにくいわけではないけど、ちょっと文字がゴチャゴチャしてると感じる事もあったんで。眼の老化によるものかもしれないけどね(^_^;)。まっ、とにかく

文字間や行間を広げて読みやすく!

って思ってたわけ。もちろん使ってたテンプレート(テーマ)をカスタマイズすればできるけど、面倒やし(^_^;)。そんな事を思ってた時に

ゴチャゴチャしたページからスタートしたWebページ さらなるシンプルを求めて

今まで使ってたテーマ「Vaster2」がダウンロードできなくなってる...って事を知ってね。もちろんオリジナルはダウンロードしてるから、当面困る事はないものの開発者のトーマスイッチ氏のブログも更新が頻繁でないのも手伝って、『よし!テーマを変えてみるか!』って思ったわけです。

テーマの選定について

海外製のテーマもオシャレやけど、やはり日本語で記事を書くんであれば日本語前提で最適化されたであろう「日本製テーマ」が一番でしょ。って事で昨年から話題のひろ氏開発の「ZELO」にしようかと思ったわけね。何しろ高速で「Vaster2」をしのいだか!ってほど評判もいいし。早速テストブログに適用してみて、検証を開始したわけやけど...

『ふぅ~ん...こんな感じになるのね』

ってのが第一印象。全然悪くない。けど同時に『でもこれテーマを変更する必要あるんかな?』って気持ちもあってね。これ理由がわかんないけど、

テーマを変更するぞ!っていうアドレナリンが出なかった

わけです。結局のところ好みの問題なんやと思います。

で、他で日本語テーマで有名なのはQooQ氏開発の「Tokyo」。このテーマは以前「Vaster2」適用の際に少し考えた事があるけど、当時は圧倒的に「Vaster2」の情報量が多くて「Tokyo」をテスト的に適用することもなく、あまり何も考えず「Vaster2」にしたわけやけど、今回改めて「Tokyo」を検証すると...

『おぉ!字間も行間もあって読みやすいんじゃない!』

ってね。こりゃーあまり変更する事なく読みやすいブログができるな...って

どんどんアドレナリンが出てきました!

Bloggerテーマ「Tokyo」について

僕の記事は、技術的なものや商品を詳細に説明してるわけでもなく、社会や世相を斬ってるわけでもなく、学術的な内容でもないわけです。だから「Coolな感じ」よりも「肩の力を抜いた感じ」をデザインから訴えたかったわけね。読みやすさだけでなく、それが凄く感じられたテーマでした。もっと早く検証すればよかったですわ(^_^;)。

あとカスタマイズについてやけど、htmlやcssの基本を理解してない僕レベルではカスタマイズをするっていうより調整なんですよ。例えば文字の大きさとか色とかね。だから調整するために見やすくて、わかりやすくて美しいコードのテーマがいいわけです。美しいコードって定義が難しいけど、海外モノのテーマなんか美しくなくて調整ポイントが理解不能やからね。まぁ~自分にスキルが無いだけですけど(^_^;)。

って事で求めていた
  • 読みやすくしたい
  • 「Coolな感じ」よりも「肩の力を抜いた感じ」
  • わかりやすくて美しいコード
が「Tokyo」にはそろってる感じ。で、情報を色々調べてると開発者がBloggerに対して思い入れも強い方のようで、また利用者からも丁寧に受け答えされている姿勢も垣間見れるわけですよ。こんなの見てるとアドレナリンがどんどん出てきて、4月くらいに変更予定で作業してましたけど2日程で公開しちゃいました(^^)。

「Tokyo」テーマのカスタマイズ、調整したこと

  1. トップ画面の記事一覧のサムネイル画像適正化
  2. フォントの変更
  3. 背景や文字の配色
  4. 文字サイズ
  5. 見出しの文字位置とデザイン変更
  6. アドセンスコード追加
  7. クレジット表記の変更
  8. 関連記事のサムネイル画像適正化
ぐらいかなぁ~。忘れた事もあるかもですけど。

1.トップ画面の記事一覧のサムネイル画像適正化

これはQooQ氏同様Bloggerに熱いコチラのブログの記事で以前から記載があったので知ってた情報。バグではなくBlogger仕様変更により、サムネイル画像が粗くなるという事象への対応です。記載コードは全然意味わかってません(汗)が、コピペで対応完了しました。

Bloggerユーザーにおすすめの厳選テンプレート3選

2.フォントの変更

テーマのデフォルトフォントが「游ゴシックMedium」なんですよね。このフォントって不思議でね。僕にとっては紙に出力するとこれ以上ないくらい綺麗なフォントなんですよ。一番好きです。ただ画面で見ると『少し物足りない』って思っちゃう。これを「メイリオ」に変更したわけやけど、こちらは逆に画面では綺麗なのに、紙に出力すると『ちょっとにぎやか過ぎる』って思うわけ。フォントって不思議ですな。そんなわけで、画面で見るブログってことで「メイリオ」に変更しました。「font-family」ってとこのフォントの順番を変更しただけで完了です。

3.背景や文字の配色

テンプレートデザイナーに対応してるので変更しやすいですね。メインの色をデフォルトの「オレンジ」含めて複数の候補からあれこれ試して「ネイビー(#000080)」に決め、その後はお気に召すままに背景や文字の配色設定を。一部テンプレートデザイナーでは対応できない事もあり(例えばメイン色をメニューバーの色に設定できない等)、そんな場合は直接html編集。ですけど、わかりやすいです。背景色なら「background-color」、文字の色なら「color」指定を変えるだけですね。

4.文字サイズ

これも直接html編集で「font-size」値を変更するだけ。とは言いながら、どの「font-size」かが見つけられない事もありますわな。僕の場合は、トップページの記事一覧上の記事タイトルを大きくしたかったんですね。これがなかなか見つからず...。

blogger無料テンプレート「Tokyo」シンプル&綺麗で超おすすめ!!

ですが、コチラ↑↑の公式ページQ&Aに記載があり助かりました!

5.見出しの文字位置とデザイン変更

見出し3と見出し4を使うのでこの二つを変更。標準では見出し3デザインの左縦棒と文字が密着してるので、「padding」を使って余白を設定。あと見出し4にはデザインがないんで左縦棒を付与した感じ。色々参考にしたけどコチラ↓↓でイメージしてから作業したんであまり迷うことはなかったかな。

Blogger テンプレートの「Tokyo 」の見出しの変え方の方法

6.アドセンスコード追加

僕はアフィリエイターではないんでね。超弱小ですがブロガーのつもりしてます。なので広告ってあまり積極的には表面に出したくないわけ。個別記事ページの記事下とページの一番下って決めてます。ページの一番下には、レイアウトでフッターにアドセンスコードを追加すればいいけど、記事下ってなかなかやっかいだったりします。Blogger側でも設定できるけど、そうした場合トップ画面の記事一覧下にも広告が表示されるわけね。これ僕的にNGなわけですな。ってわけで個別記事ページの記事下にのみ広告を掲載する場合も、html編集となります。これはアチラこちらに情報が載ってますけど、「data:post body」の下にアドセンスコードを追加することでOKとなりますね。コチラ↓↓が一番わかりやすいかな。

Bloggerの記事タイトル下と記事下にアドセンス広告を設置する方法

7.クレジット表記の変更

一番下にテーマの著作権を表示する表記があります。デフォルトは「disign : QooQ」って。テーマの著作権を表記するので、そのテーマ名とそしてブログページの著作権もつけて

(C)🄫チャオスマ by ふじみき 2009 | Theme Tokyo designed by QooQ

とさせていただきました。htmlの「disign :」の部分を上記黄色部分に置き換えただけですが、使用しているテーマも表現できてなかなかいい感じ(^^)。

8.関連記事のサムネイル画像適正化

関連記事機能がこのテーマには標準でついてくるんやけど、導入してみたらサムネイル画像の大きさがまちまちで見た目がよくなかったんよね。で、わからないから開発者様に質問したら、直ぐに返答いただけた!「5.」で挙げた公式ページに、僕の質問と回答が掲載されてますから同じ悩みの方はご一読を。

最後に

って感じで、2日程で一気にテーマ変更をしたわけです。ホントによかったです。あとこのテーマの特徴として「ついてくるサイドバー」ってのがあってコレもいいですよぉ。これ下にスクロールしても、サイドバーが固定されて表示される機能で何かのアピールに充分ってわけやね(^^)。広告でもいいと思うけど、あまりうざいって思われるのもアレなんで随分悩んだ結果...もしパソコンでここまで読んでくれてる人がいたら、右サイドバーを見て欲しい。

ふじみきMAGAZINE

自分の音楽活動ウェブサイトを固定してます!

...うざい?やっぱり?...うざいっすかね?

でもしばらくはこのままで固定させて下さいね。この機能何しろ気に入ってるもんでね。あとパソコンだけでなく、スマホやタブレットで眺めてみてもいい感じなのも、このテーマのいいところですね。開発者様ありがとうございました(^^)。

スポンサーリンク