Blogger(ブロガー)で海外のテンプレートを日本語化カスタマイズして利用する方法

おすすめ記事ピックアップ

※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です。


どのような日本語指定にすればよいか、論議がやまないところですが、オススメのサイトがあるので、その指定をコピペします。


CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係
http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html

すべてのfont-familyを書き換えます。デザイン的に残したい部分があれば残してもOKです。


スッキリ日本語になりました。でも日本語にしたせいでレイアウトが崩れています。


こういう時は、要素を検証で調べて、CSSの文字サイズなどを書きなおせばOKです。


60pxぐらいで調度良いですね。HTMLを調べて修正して完成です。



完成するとこんな感じです。他にもおかしなところがありますが、こんな感じでカスタマイズしてゆけば、だいたい日本語化できると思います。



いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : Blogger(ブロガー)で海外のテンプレートを日本語化カスタマイズして利用する方法
Blogger(ブロガー)で海外のテンプレートを日本語化カスタマイズして利用する方法
http://1.bp.blogspot.com/-PTZhL2TIuhE/UWF7pUCooUI/AAAAAAAAIh0/otLEglFQqDg/s640/kijini01.jpg
http://1.bp.blogspot.com/-PTZhL2TIuhE/UWF7pUCooUI/AAAAAAAAIh0/otLEglFQqDg/s72-c/kijini01.jpg
ふりむけばコウホウ
http://www.furimuke.com/2013/04/blogger_7.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2013/04/blogger_7.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy