【vaster2】bloggerテンプレートのカスタマイズまとめ

今回、時間をかけて「vaster2」bloggerテンプレートのカスタマイズをしたので僕自身わすれないように記事にしてまとめました。色々とカスタマイズしたので忘れている箇所もあります。
これから、「vaster2」のカスタマイズをする人はぜひ参考にしてください。

ヘッダータイトルに画像を挿入

ブログの顔ともいえるヘッダーに画像を挿入しました。
オリジナルのブログにするならヘッダー画像に注目するのもありかと思います。
他のブログと差をつけるポイントです。
【vaster2,blogger】ヘッダータイトルに画像を挿入する方法

ブログタイトル、説明をセンタリング

ヘッダーに画像を挿入したら今度はブログタイトルの位置が気になりました。
元々、左にブログタイトルが寄っていたのでセンタリングをしました。

ブログタイトルと別にブログ説明もセンタリングしました。
タイトルだけセンタリングをして説明が左寄せだとかっこ悪いのでセンタリングしました。
【vaster2,blogger】ヘッダータイトル、ブログ説明をセンタリングする方法

新着記事ガジェットを追加

vaster2ではもともと新着記事ガジェットがなかったので追加しました。
新着記事ガジェットを追加することでブログの更新をしている事が分かるので信頼がもてるブログになるかと思います。
【vaster2,blogger】新着記事ガジェットを追加する方法

目次を追加

vaster2、bloggerでは目次の機能がなかったので追加しました。
より記事の構成を見やすくするため追加しました。
自動で目次が入るように設定しています。
【vaster2,blogger】目次を追加する方法

ページナビゲーションの変更

vastter2ではページナビゲーションが「前に戻る」「次に進む」しかなかったので1ページ、2ページと表示できるようにしました。
こちらのほうが見た目もよく使いやすいかなと思います。

サムネイル画像の大きさを変える

サムネイル画像の大きさを変更しました。
スマホで見た時などバランスが悪いこともあったので修正しました。

指定したサムネイル画像を表示する

もともと記事に画像があるときは1番最初の画像がサムネイル画像になるけど記事に画像がないときはサムネイル画像が入りません。
記事に画像がない場合、こちらで指定した画像を表示するようにしました。
サムネイル画像をすべて表示することで全体のバランスがとれます。

メニューボタンの色、文字変更

vaster2でスマホで見た時メニューボタンが表示されます。
ボタンの色の変更、「メニューボタン」から「メニュー」という表示にしました。

最終更新日を追加

vaster2では記事を公開しても最終更新日が表示されません。
最終更新日を表示することで記事の信頼性をあげることができるので追加しました。

ラベルの横の時計マークを削除

vaster2では記事んいラベルを追加したときに横に時計マークが表示されます。
必要ないので削除しました。

ラベルガジェットのレイアウト変更

vaster2のラベルガジェットの表示が横に広がったりとバラバラだったので縦に並べるようにしました。
また線を引いたりと見やすくしました。

アーカイブガジェットのレイアウト変更

アーカイブガジェットもラベルガジェットと同じように線で囲むように表示しました。
ブログのバランスを整えるようにしました。

hタグに線を追加

もともとvaster2ではhタグに線など引いてあるので線の変更をしました。
記事タイトルは何もなかったので線を追加しています。

ソーシャルボタンのサイズを変更

パソコン、スマホでソーシャルボタンを見たときボタンが大きかったので少し小さくしました。

LINEボタンを追加

ソーシャルボタンでは「LINE」がなかったので追加しました。

ブログ内検索ガジェットの追加

bloggerガジェットの「ブログ検索」を追加しました。
今回はサイドバーに設置しました。

自己紹介の作成

bloggerのガジェットの「基本情報」でも良かったけど見た目で気になったので新しく設置しました。
ブログでどんな人が書いたのかなど分かるようにするためにも「自己紹介」は大事です。

最後に

僕が覚えている範囲で書いたので、抜けている部分もあるかと思います。
vaster2はカスタムすることを前提にしていると思うし、オリジナルのブログを作るためにもカスタムは重要です。
僕自身、今回のカスタムが正解だとは思わないけど、実際やってみると勉強にもなるしブログのカスタムをして良かったです。
ぜひ参考になれば幸いです。

スポンサーリンク

スポンサーリンク

0 件のコメント :

コメントを投稿