【Blogger】のテンプレートに『vaster2』を導入してみました

どうも!
「おじんぬユさんぬ」のおじんぬです。
ユさんぬ大好き!



今回は超初心者おじんぬの、ブログのテンプレートとカスタマイズのお話です。
では、行ってみましょう!






『Blogger』のテンプレートを『Vaster2』に変えてみました







つい最近思い切って『Blogger』のテンプレートを変えてみました。



今回選んだテンプレートは
トーマスイッチさんが無料配布して下さっている


Blogger用『レスポンシブ対応、SEO対策済みのblogger日本語テンプレート』

『vaster2』

です。



目視で簡単に設定されている項目の色替え等カスタマイズ出来る機能「テンプレートデザイナー」付きのものと、なしのもの、2パターンあるのですが、


まだまだ超初心者なおじんぬは黙って「テンプレートデザイナー付き」一択で!


導入した時、最初に3つ(アドセンスが関係ない人は2つ)初期設定がありますが、作者様のサイトの方に分かりやすく説明がありましたので、躓くことはなかったです^-^



選んだ理由


  • 「人気記事」や「関連記事」のデザインがすごいカッコいいし便利!

  • シンプルでとっても見やすい!

  • ソーシャルボタンもオシャレ!

  • メニューバーも最初からついてる!

  • 実用的かつシンプルで美しいレイアウトデザインで理想的!

  • とても評判が良く、使っている人も多いので、情報も集めやすい!

  • アドセンスも簡単に入れられるように位置指定が入っている!

  • テンプレートデザイナーも付いているので(なしもあります)初心者なりにカスタマイズが楽しめる親切設計!


  • 今まで『Blogger公式テンプレート「Soho」』を使っていて、TOPページの記事の入り方とかレイアウトとかオシャレでとても気に入っていたのですが、いかんせんブログカスタマイズに関しては超初心者のおじんぬ。


    『Soho』にもテンプレートデザイナーがついていたので、色替え等は直感的に超初心者でもできるんですが(ただ、この単語はなんのこと?状態だったので、それでも大分てこずりましたが)


    やっぱり変えていくと、「ここ、こうしたいな」「ここもこうできたらいいな」と色々希望が出てきますよね。


    初心者なりに少しでも「自分の理想」に近づけたくて、頭爆発しそうになりながら情報を調べまくり試しまくってカスタマイズに挑んでいたものの、


    Bloggerは海外ユーザーがメインなせいか、カスタマイズ例の情報も集めにくいこともあり、やはりどうにも御しきれず。



    人気記事やSNS系のボタン、ページナビゲーションなどにも果敢に挑んでみたんですが、試しても表示自体が上手く出来なくて失敗することの連続で、上手く反映されるところまでいけても、デザイン的に崩れてしまって見づらい見栄えになってしまったり。


    「頑張ってなんとかできた~」という自己満足感はあるものの、そもそもおじんぬにとってブログは、自己満足のためのものではなく、「誰かに見てもらうために」発信するもの。


    やっぱり見に来てくれる人があまりにも見にくい、と感じるものは、いくら超初心者とはいえ避けたいですよね。



    なので、今回思い切って、とても見やすくて機能的な『vaster2』を導入することにした、という次第です。


    導入して、カスタマイズの仕方を説明して下さる、本当に有難い数々のサイト様の力を借りながら、自分に出来る範囲でいじってみましたが、



    うん、思い切って導入して良かったです^-^



    何よりパッと見た目が見やすくなったように感じますし、作者様が日本人なので、HTMLやCSSにも日本語のメモ的なものが入っているので、分からないなりに、「この部分がこれに対応しているんだ」ということがなんとなく分かるのが本当に有難い。


    HTMLやCSSや JavaScriptなど、そもそものしくみがまだまだ全然分からないので、「こうしたいんだけど、上手くできない」ということはもちろんいっぱいあるんですが、


    日本語のメモ部分を頼りに、何度も何度も見てくことで、なんとなーく「これを入れるのはここの部分なのかな?」とか、朧げに見えてくるのが嬉しいです^-^



    カスタマイズしてみた部分


  • テンプレートデザイナーで色替えできる部分の色変更(文字色や見出しの色、ラベルの色、背景色、メニューバーの色、ページ送りの色等、色々変えられるので、ここをいじるだけでもブログの見た目にオリジナリティが出てくると思います)

  • ヘッダーの上の空白部分の消去

  • ヘッダーに画像を入れた

  • TOPページの記事枠を変更(影をとって線を少し太くしました)

  • 画像の中央合わせ(パソコンだと左合わせになってしまうことの解消)

  • TOPに戻るボタン設置

  • TOPの記事枠内の画像が歪まないように、画像の真ん中から切り取ってくれるように調整

  • 見出し(h1/h2/h3)のカスタマイズ

  • フキダシ効果(css)の追加

  • カテゴリーに色枠

  • 飾り枠導入(css+html)

  • ページタイトル等英語で入力すると全部大文字になってしまうことの解消


  • 現時点でこのくらいでしょうか?


    どれも説明して下さっているサイト様の情報を頼りに、色や大きさなどは、出来るところは自分好みにアレンジして、なんとかカスタマイズしました。


    情報を下さる数々のサイト様には、本当に感謝しています。


    自分が分かるだけでなく、誰かに教えられるくらい知識がある(分かりやすく教えるのって難しいですよね)ってことは、本当にすごいですよね。


    しかもその知識を誰かに教えてくれる優しさ、すごいなあ、としみじみ思います。



    初心者なりにカスタマイズしてみての感想


    『Soho』から始めて『vaster2』へ。ここまで超初心者なりに見よう見まねでテンプレートをカスタマイズしてきた中で言えることは、

    ・テンプレートをいじる前に必ずバックアップをとること!!

    ・こまめにバックアップしておいた方がいいかも

    一にも二にもまずはコレです!


    HTMLをいじったり、CSSを貼り込んだりしてると、何かの拍子や何らかの要因で、レイアウトが崩れてしまったり、エラーが出たり、と、ひやっ!とする場面が結構あります。



    なので、出来ればおじんぬのような初心者組は特に、こまめにバックアップを取っておいた方がいいかもしれません。



    バックアップは、



    Bloggerの管理画面→テンプレート→右上の「バックアップ復元」のアイコン



    これを押すと

    上の画面が出てきますので、「テーマをダウンロード」を押して保存するだけ。


    ちなみに保存したデータの「アップロード」もここから出来ます。(前の状態に戻したいときは「ファイルを選択する」ボタンで指定して「アップロード」します)



    バックアップをきちんととったら、後は


    ・とにかく調べまくって情報を集める!

    ・テンプレートの種類等によって上手く反映出来ないこともあるので、とにかく試して自分なりにアレンジしながら自分好みに近づけていく!

    これのみ!



    右も左も分からない状態から始めると、正直大変なことも多いです。


    用語1つ分からないことばかりなので、始めてみると、「これは思ったより大変だ!」と思うことだらけだったりします。


    でも、まずは簡単そうなところから(テンプレートデザイナーで直感的に変えられることなど)始めて、自分の思った通りのイメージに色だけでも変えられると、すごく嬉しくて、もっと頑張ろう!って気持ちになりますし、


    四苦八苦すればするほど、自分のブログ(サイト)に愛着も増してきます。


    色々レクチャーして下さる親切なサイト様もありますので、とにかく色々調べて、色々試していくうちに、なんとなーーーく朧気だけど、始めた最初より何か見えてくるような気もし始めてくるし^-^



    自分のブログ(サイト)は自分のお城。



    できれば少しでも、自分好みのお城に仕上げていきたいですよね^-^



    記事を書くことが一番大事なことだけど、見た目もやっぱり大事。


    おじんぬもこれからも初心者なりに、少しづつでも出来ることを増やしていきたいなあと思っています。


    ただひとつ、気になっているのが、おじんぬ、目視で確かめないと色々分からないレベルなので、


    • とにかくプレビュー数が半端なく多くなってしまうこと。
    • 試行錯誤しながら新しいことも追加しているので、ただえさえ修正が多いのに、後から更新しなおすことも多くなってしまっていること


    これがすごく気がかりです。


    あんまり更新を重ねるのは、見る人にとっては良いことではないように思うし、アドセンス的にもプレビュー数がものすごい多いのも、良くないみたいです。(Googleからの通知のヒントから色々調べて初めて知りました)



    どうしよう、どうすればいいんだろう?試せないと作れないし、困ったなあ、とずっと悩んでいたんですが、


    悩みながらネットを調べていたら、テストブログ、という言葉を見かけて、コレでは!?と。


    Bloggerは複数のブログが作れるので、ひとまず昨日、テスト用のサブブログを作って、そこで一度色々試してから完成させる、という方法をとることにしました。


    あくまでもテストにのみ使うブログなので、今のところ使用はプレビューのみ。


    アドセンスももちろん貼らないので、色々試せていいかな、と思ってこの形にしたんですが、これで正解、なのかな?大丈夫だといいんですが。



    しばらくはこの形でいこうと思います。もっと慣れて、色々サラッと出来るようになるといいな^-^



    以上、「【Blogger】のテンプレートに『vaster2』を導入してみました」でした。


    ここまで見てくださって、有難うございました。
    おじんぬでした^-^



    スポンサーリンク