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

製作 プログラム

2016/10/18(火)

bloggerのシンプルテンプレート

グーグルが提供しているブログサービス「blogger」の無料テンプレート「Tokyo」を作成しました!!

「Tokyo」は、シンプルでキレイなデザインと、設定不要で機能の一通り揃ったブログを持てるコトの二つをコンセプトにしています。シンプルなテンプレートを探している方はぜひ一度使ってみてくださいね。

手前味噌ですが今回はこのTokyoテンプレートのおすすめポイントなどを紹介をしていきます。

blogger-simple

bloggerテンプレートTokyoってこんなの

Tokyoの見た目はこんな感じです。bloggerでtokyoテンプレートを有効にしたサンプルブログを作りましたので参考にしてみてください。

シンプルなテンプレートTokyoのおすすめポイント

Tokyoテンプレートはシンプルで、かつ、ブログ初心者の方でもすぐ始められる機能もちゃんと持たせるコトの二つを意識して作りました。おすすめしたい具体的な機能についてまず紹介していきますね。

  1. シンプルな2カラムデザイン
  2. SEO対策
  3. スマホ対応のレスポンシブデザイン
  4. 付いてくるサイドバー
  5. 関連記事表示機能
  6. テンプレートデザイナー

シンプルで見やすい2カラムデザイン

blogger-simple

Tokyoテンプレートはシンプルなブログになるよう、アメブロやはてなブログでもよく見られる左側にメインの記事、右側にサイドバーという一番オーソドックスなブログデザインにしています。

一番見慣れているデザインなのでブログ初心者の方も違和感無く使っていただけると思います。

またせっかくグーグルのサービスであるbloggerを使うのでアドセンス広告を張りたい方も多いはず。というコトでサイドバーを少し太めにして、幅300ピクセルのラージスカイスクレイパーやレクタングルを配置できるようにしてあります。

bloggerでされていないSEOの最適化

bloggerのデフォルト設定だとブログ自体のタイトルがh1タグになっています。ホントなら記事ごとのタイトルをh1タグにするべきですよね。

また同じくbloggerデフォルトの設定だとツイッターやフェイスブックでシェアした時、ブログ記事がどのようにツイッターやフェイスブック上で表示されるか設定できていません。(OGP設定といいます。)

あとパンくずリストというものがbloggerにはついていません。パンくずリストっていうのは「TOP>カテゴリ名>記事タイトル」みたいにそこまでのリンク構造を書いてあるやつです。このブログにもありますし、大体のブログで表示されているものです。

Tokyoテンプレートではブログの記事タイトルをh1タグにする、ツイッターやフェイスブック上での記事の見え方を設定する、そしてパンくずリストを表示するなど、bloggerのデフォルト設定では最適化されていないSEO対策を行っていますので、少しだけ検索順位の上昇が期待できます。

スマホ対応のレスポンシブデザイン

Tokyoテンプレートはパソコンやスマホ、タブレット端末などウィンドウのサイズに合わせてブログの見え方をキレイに整えるレスポンシブデザインに完全対応しています。スマホで見ても、パソコンで見ても、またipadで見てもシンプルでキレイにブログが表示されるようにデザインされています。

blogger4 分かりづらいですがスマホで見たときのデザイン。サイドバーが下に回りこみます。

ついてくるサイドバーも標準装備

blogger-simple

ブログの中には記事本文をスクロールして読み進めているとサイドバーがずっとついてくるタイプのものがあります。googleアドセンスの広告をずっとサイドバーに表示したり、見て欲しい記事をずっと表示させることが出来るので、この「ついてくるサイドバー」はブログにぜひ欲しい機能ですよね。

Tokyoテンプレートでは「ついてくるサイドバー」を標準で搭載していますので、自分の好きなコンテンツを配置するだけでスグに「ついてくるサイドバー」機能を使うことが出来ます。

関連記事をデフォルト表示

読者の方がその記事に興味を持った場合、次に読む記事を探せるよう関連記事機能はブログに必須なものだと思います。ただbloggerには関連記事を表示する機能が標準ではついていません。

Tokyoテンプレートでは各記事下部に関連記事を表示する機能を標準で搭載しています。特別な設定ナシにただ記事にラベル(bloggerではカテゴリのコトをラベルと言います。)をつけて書いていれば自動的に関連記事が表示されるようになります。

テンプレートデザイナーで配色をカンタン設定

bloggerにはテンプレートデザイナーというブログの配色を自分で設定できる機能があります。Tokyoテンプレートでもテンプレートデザイナー機能を有効にしてありますのでタイトル文字色や背景、リンク色まで細かく設定することができます。

「シンプルだけどちょっと色合いが好きじゃないな」という場合はお好みのブログデザインに調整することが出来ます。

blogger6 テンプレートデザイナーの見た目。操作はクリックだけ。好きな色を選んでいきます。

blogger7 テンプレートデザイナーを使った後。好きな配色にできます。

bloggerシンプルテンプレートTokyoの初期設定

Tokyoテンプレートの初期設定について紹介しますね。というよりもblogger自体の初期設定ですので、どのテンプレートを使う場合でもこの設定をしておくと、よりシンプルな見た目になるのでオススメです。(モバイル設定OFFについてはレスポンシブ対応のテンプレートのみ)

モバイル設定をOFFに

Tokyoテンプレート自体がレスポンシブデザインに対応しているので、bloggerが勝手にスマホ用にデザインを変更してしまう「モバイル設定」は無効にしておきましょう。

レイアウトからNavbarをOFFに

Tokyoテンプレートを導入した後、ナビゲーションバーが表示されていると思います。野暮ったくなっちゃうので「レイアウト」→「Navbar」より「OFF」を選んでナビゲーションバーを消しちゃうのがおすすめです。

ちなみにNavbarのOFF設定は、「Tokyo」テンプレートに関わらずbloggerの全テンプレートで行うことが出来ますよ。

レイアウトが崩れたら…

bloggerのテンプレートは前に使っていたテンプレートのウィジェットが残る仕組みになっています。なので古いテンプレートのウィジェットが表示されてしまってレイアウトが崩れてしまうコトがよくあります。

こんなときは消すことの出来るウィジェット(レイアウト画面で左に灰色のつまみがあるやつ)を一度全て消してみるのがおすすめです。シンプルな状態に戻せますのでそこから新たにウィジェットを配置していきましょう。

ちなみにTokyoテンプレートでは「ついてくるサイドバー」というエリアに入れたウィジェットがついてくるサイドバーとして表示されるようにしていますので、もしウィジェットを全て消してしまったとしてもいつでもついてくるサイドバー機能を使用するコトができます。

シンプルな無料テンプレートTokyo

今回はシンプルでブログに必要な機能を詰め込んだbloggerテンプレート「Tokyo」を紹介しました。

bloggerの設定ってけっこう独特で最初は迷いがちです。「特別な設定をしなくても最初から必要な機能を持っているテンプレートがあればな」と前々から思っていたので今回力を入れて作りました。

初心者の方に特におすすめしたいテンプレートですのでぜひ一度使ってみてくださいね。

無料テンプレート「Tokyo」のダウンロードはコチラ!!

バグ等ありましたら下記「Message」よりお知らせください。

bloggerをこれから始めようかなという方のためにblogger初心者講座の記事を書きましたのであわせて参考にしてくださいね。(blogger初心者講座はこちら!