おすすめ記事ピックアップ
※2013年4月25日 追記:より細かく説明する記事を作成しました。
http://www.furimuke.com/2013/04/blogger1.html
~~~~
Blogger自体に、さまざまなテンプレートがあり、それ自体が細かく変更できるので、わざわざ海外などのテンプレートを利用するメリットは少ないかもしれませんが、しかし利用できると、カッチョ良いサイトを作ることもできます。
Blogger(ブロガー)で、外部のフリーテンプレートを日本語化カスタマイズして利用する方法を紹介します。実際に海外のフリーのテンプレートをカスタマイズして利用してみます。時間は30分程度で利用できました。英語環境が前提なので、予期せぬ不具合もありますが、このやり方ができれば、90%の問題は解決できます。テンプレートごとに、いろいろな不具合がありますので、ケースバイケースで修正する力が必要です。
完成したサイトはこちら
http://testdodorigesu.blogspot.jp/
元の海外のテンプレートはこちら
http://www.allblogtools.com/blogger-templates/2-columns/quinte/?theme=demo
まずテスト用にブログを作ります。シンプルを選びます。
見慣れた画面が出てきます。
テストでいくつか記事を投稿します。
Blogger自体のテンプレートを利用する場合は、管理画面のカスタマイズから、行えます。この機能だけでも、かなり自由度が高いです。簡単に紹介。
元から複数のテンプレートが用意されています。これでも十分使えます。
背景を変更できたり、ブログの幅を変更したり、レイアウトを増やしたり減らしたり、上級者向けでは、テキストなど細かく設定変更できます。
この機能でハッキリ言って十分ですが、さらにカスタマイズを極めたい方には、海外などの無料や有料テンプレートの利用をオススメします。とてもおもしろいです。
有名なところで、オールブロガーツール(http://www.allblogtools.com)を利用してみます。
かっこ良いテンプレを発見しました。これにします。
ダウンロードします。
管理画面のテンプレートを選択して「バックアップ復元」をクリックします。
「ファイルを選択」して先ほどダウンロードした、テンプレートxmlを選びます。
テンプレートがアップロードできました。めでたしめでたし!ではありません。
レイアウトがズレていたり、変なところに配置されていたり、英字フォントだったりします。これを修正しなくては、カッコ悪いです。
管理画面のレイアウトに入ります。ここで不要なレイアウトを削除したり移動します。
テンプレートによってはロックされていることがあります。そんな時には、対象のWebサイトのおかしい部分を、Chromeの右クリックで「要素を検証」します。
この部分のIDや該当コードを見つけます。テンプレート→HTMLの編集から、そのコードを検索して該当箇所を見つけます。※追記:HTMLの編集画面が新しくなりました。コードの編集方法に関しては、こちらを参考に!http://www.furimuke.com/2013/04/blogger-html3html.html
locked = true となっていると、レイアウトから編集できないようにロックされます。これを false に書き換えます。
そうすると今まで、削除変更できなかったレイアウトが自由に変更できます。
表示がおかしい物は、削除したり、削除すると問題が出るものは移動したりして修正します。著作権云々の物は削除せず、下の方にでも移動しましょう。レイアウトはスッキリしました。
次は固定されたテキストデザインを変更します。要素の検証を行い該当箇所を日本語で書き換えます。と思ったけど、そのままテキストで検索すればOKでした。
日本語になりました。
英字フォントと日本語フォントが混合していると、違和感が強いのです。font-family で検索します。font-familyの後ろの部分を日本語に書き換えればOKです。
どのような日本語指定にすればよいか、論議がやまないところですが、オススメのサイトがあるので、その指定をコピペします。
すべてのfont-familyを書き換えます。デザイン的に残したい部分があれば残してもOKです。
スッキリ日本語になりました。でも日本語にしたせいでレイアウトが崩れています。
こういう時は、要素を検証で調べて、CSSの文字サイズなどを書きなおせばOKです。
60pxぐらいで調度良いですね。HTMLを調べて修正して完成です。
完成するとこんな感じです。他にもおかしなところがありますが、こんな感じでカスタマイズしてゆけば、だいたい日本語化できると思います。
http://www.furimuke.com/2013/04/blogger1.html
~~~~
Blogger自体に、さまざまなテンプレートがあり、それ自体が細かく変更できるので、わざわざ海外などのテンプレートを利用するメリットは少ないかもしれませんが、しかし利用できると、カッチョ良いサイトを作ることもできます。
Blogger(ブロガー)で、外部のフリーテンプレートを日本語化カスタマイズして利用する方法を紹介します。実際に海外のフリーのテンプレートをカスタマイズして利用してみます。時間は30分程度で利用できました。英語環境が前提なので、予期せぬ不具合もありますが、このやり方ができれば、90%の問題は解決できます。テンプレートごとに、いろいろな不具合がありますので、ケースバイケースで修正する力が必要です。
完成したサイトはこちら
http://testdodorigesu.blogspot.jp/
元の海外のテンプレートはこちら
http://www.allblogtools.com/blogger-templates/2-columns/quinte/?theme=demo
まずテスト用にブログを作ります。シンプルを選びます。
見慣れた画面が出てきます。
テストでいくつか記事を投稿します。
Blogger自体のテンプレートを利用する場合は、管理画面のカスタマイズから、行えます。この機能だけでも、かなり自由度が高いです。簡単に紹介。
元から複数のテンプレートが用意されています。これでも十分使えます。
背景を変更できたり、ブログの幅を変更したり、レイアウトを増やしたり減らしたり、上級者向けでは、テキストなど細かく設定変更できます。
この機能でハッキリ言って十分ですが、さらにカスタマイズを極めたい方には、海外などの無料や有料テンプレートの利用をオススメします。とてもおもしろいです。
有名なところで、オールブロガーツール(http://www.allblogtools.com)を利用してみます。
かっこ良いテンプレを発見しました。これにします。
ダウンロードします。
管理画面のテンプレートを選択して「バックアップ復元」をクリックします。
「ファイルを選択」して先ほどダウンロードした、テンプレートxmlを選びます。
テンプレートがアップロードできました。めでたしめでたし!ではありません。
レイアウトがズレていたり、変なところに配置されていたり、英字フォントだったりします。これを修正しなくては、カッコ悪いです。
管理画面のレイアウトに入ります。ここで不要なレイアウトを削除したり移動します。
テンプレートによってはロックされていることがあります。そんな時には、対象のWebサイトのおかしい部分を、Chromeの右クリックで「要素を検証」します。
この部分のIDや該当コードを見つけます。テンプレート→HTMLの編集から、そのコードを検索して該当箇所を見つけます。※追記:HTMLの編集画面が新しくなりました。コードの編集方法に関しては、こちらを参考に!http://www.furimuke.com/2013/04/blogger-html3html.html
locked = true となっていると、レイアウトから編集できないようにロックされます。これを false に書き換えます。
そうすると今まで、削除変更できなかったレイアウトが自由に変更できます。
表示がおかしい物は、削除したり、削除すると問題が出るものは移動したりして修正します。著作権云々の物は削除せず、下の方にでも移動しましょう。レイアウトはスッキリしました。
次は固定されたテキストデザインを変更します。要素の検証を行い該当箇所を日本語で書き換えます。と思ったけど、そのままテキストで検索すればOKでした。
日本語になりました。
英字フォントと日本語フォントが混合していると、違和感が強いのです。font-family で検索します。font-familyの後ろの部分を日本語に書き換えればOKです。
どのような日本語指定にすればよいか、論議がやまないところですが、オススメのサイトがあるので、その指定をコピペします。
CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html
すべてのfont-familyを書き換えます。デザイン的に残したい部分があれば残してもOKです。
スッキリ日本語になりました。でも日本語にしたせいでレイアウトが崩れています。
こういう時は、要素を検証で調べて、CSSの文字サイズなどを書きなおせばOKです。
60pxぐらいで調度良いですね。HTMLを調べて修正して完成です。
完成するとこんな感じです。他にもおかしなところがありますが、こんな感じでカスタマイズしてゆけば、だいたい日本語化できると思います。