無料ブログをホームページ風に（その２）。Blogger海外テンプレートのカスタマイズ私の方法

日本ではあまり人気のないGoogleの無料ブログサービスBloggerですが、静的なページを簡単に作成できるなど使い勝手が最高に良いブログです。

ナビゲーションバーやメニュー、ホームページの様な静的ページの作成。
CMSを使ったホームページのようなブログが、Bloggerなら簡単に作れます。

前回、無料ブログサービスでホームページのようなブログを作るという事で、海外のサイトからテンプレートを適用するという方法を紹介しました。

無料ブログをホームページ風に（その１）。Bloggerでwebマガジンを作る

テンプレートを適用してカッコ良いデザインになったら、次は自分のブログに合わせるためにカスタイマイズしなければなりません。

今回は、HTMLもCSSも全く知らない素人である私が、どうやってカスタマイズしたのかを紹介します。

上の画像は私のブログ画面ですが、レイアウトなどは私の技術や知識で変更することはできません。
テンプレートをそのまま使用しています。
カスタマイズしているのは、スライダーとナビゲーションバー。
後はソーシャルボタンのリンク先や、サイドバー内のウィジェット関係です。

ではまず、ナビゲーションバーとスライダーの編集方法を紹介します。

ホームページ上のカスタマイズしたい場所で右クリック、要素の検証を選びます。
すると、上記のようにソースが下に表示されて、自分がカスタマイズしたい場所がソース上のどこを編集すれば良いのかがわかります。

上の写真では、スライダー上部のナビゲーションバーを編集しようと要素を検証してソースを見てみると、<ul class="menus menu-secondary sf-js-enabled sub-menu">と記述されている場所から下が、ナビゲーションの内容だとわかります。

Blogger管理画面からテンプレートを選び、HTML編集画面を開きます。
そこで、検索機能を使って「menu-secondary」を検索し、要素の検証で出てきた場所を探します。

その場所を見つけたら、ナビゲーションで表示させるカテゴリの文字やリンク先を変更しましょう。

HTMLの本当に基本的な事さえわかれば、誰でも編集できます。

これと同じ方法でスライダーや、SNSボタンも編集していきます。
SNSボタンのリンク先には、自分のSNSのアドレスをリンク先にしていきましょう。


そのあと、Bloggerの管理画面からレイアウトを表示して、不必要なウィジェットを削除したり、私の様にソーシャル系のウィジェットを配置するなどして出来上がりです。

私は何も知らない完全な素人でしたが、HTMLの基本的な事くらいなら調べれば簡単に解ります。
Googleで検索するだけなので、たいした手間もかかりません。

ということで、簡単でしたが海外テンプレートをBloggerに適用して、自分のブログとして使用するための最低限のカスタマイズ方法を説明しました。

最後に、一つ気を付けていただきたいのは、カッコ良すぎるテンプレートほど編集の難易度が上がります。
実は、自分にあったテンプレートを探すのが一番大変だったりします。