Blogger英語テンプレ日本語化1-ダウンロードとフォントの変更

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

こんな感じで日本語化できます。

・海外テンプレートサイト
http://www.allblogtools.com/blogger-templates/2-columns/delicacy/?theme=demo

・日本語化&カスタマイズサイト
http://testblog0006.blogspot.jp/

Bloggerの英語テンプレートを日本語化するテクニックを何回に分けて紹介します。ざっくり書くとこんな感じ(http://www.furimuke.com/2013/04/blogger_7.html)ですが、もう少し丁寧に説明しようと考えています。

またこのBlogger英語テンプレートを日本語化してほしいという要望がありましたら、コメント覧にでも投稿ください。チャレンジします。

英語テンプレートは、簡単に日本語化できるものあれば、妙にいろいろ作業が必要な場合もあります。フリーテンプレートの場合は、元からのテンプレートの品質が低くカスタマイズしないと使い物にならないこともあります。

テンプレートはいろんな形でつくられているので、こうすればOK!というモノがありません。ケースバイケースです。実際に海外テンプレートを日本語化して行く作業を見ることが、一番近道かなーと思います。

ということで、複数回にわたって詳細に日本語化してゆきますので、ご興味がありましたお付き合い&ご質問ください。最初は、シンプルで見た目も良いDelicacy(http://www.allblogtools.com/blogger-templates/2-columns/delicacy/?theme=demo)テンプレートを日本語化してみます。


テンプレートのZIPファイルをダウンロードして解凍します。XMLファイルがテンプレです。「Delicacy Blogger Template - Without slider」は画像スライダーなしの方です。今回はこちらを選びます。説明を簡単にするためです。

管理画面のテンプレートに入り、バックアップ/復元でXMLファイル(Delicacy Blogger Template - Without slider)を選択してアップロードします。

こんな感じになれば、まずは成功です。

私の場合は、最初にレイアウトの整理から行います。レイアウト画面を見ます。後から追加できるので、不要っぽいものは全部削除します。例えば右側のごちゃごちゃしたのは、不要です。

レイアウトでは、消せないガジェット(ウィジェット)もあります。ナビバーはオフにしておきましょう。消せないものは、とりあえずそのままにしておきましょう。


ぐっとシンプルになりました。

次は、英字フォントは日本語に合わないので、使用されている部分を書き換えます。HTMLコードのfont-familyを検索します。BloggerのHTMLの編集からだと、コードが折り畳まれているため、検索してもうまく対象のコードが出て来ません。

テラパット(http://www.vector.co.jp/soft/win95/writing/se104390.html)やMKエディター(http://www.vector.co.jp/soft/win95/writing/se083554.html)等で、ダウンロードしたXMLファイル(Delicacy Blogger Template - Without slider.xml)を開いて検索すると良いです。行数番号を見つけて、BloggerのHTMLを編集しましょう。

font-familyを検索すると Sans-serif とか Arial とか出てきます。それらを次のように日本語フォントに変更してゆきます。黄色い部分を変更して行きます。「:」と「;」で挟む必要がありますので、コピペで消さないように注意してください。日本語フォントに関してはこちら(http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html)を参考にしてください。

font-family: "PT Sans","Oswald",Arial,Sans-serif;
↓
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;

今回は、より簡単に説明したいので、フォントの指定はブラウザーにお任せする方法を取りたいと思います。つまりフォントの指定を削除します。


font-family: "PT Sans","Oswald",Arial,Sans-serif;
↓
font-family: ;


HTMLコードの説明に関しては、Mergely(http://mergely.com/)を使って説明しますと。左が元のコード、右がfont-familyの指定を削除したものです。エディター等でfont-familyを見つけて、フォント指定を削除してしまいましょう。

font-familyまるごと削除してしまっても良いのですが、いつか何かフォントを指定したくなった時のために、残して置いてもよさそうですね。


今回のテンプレートのfont-familyは、行数でいうと50、62、67、72、81,84,97,153,446、1120です。行数を参考に、該当部分のfont-familyの指定をすべて削除しましょう。


微妙な違いですが、フォントの英字がスッキリしました。本日はここまで!!

次回に続く。
http://www.furimuke.com/2013/04/blogger2.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英語テンプレ日本語化1-ダウンロードとフォントの変更
Blogger英語テンプレ日本語化1-ダウンロードとフォントの変更
Bloggerの英語テンプレートを日本語化するテクニックを何回に分けて紹介します。ざっくり書くとこんな感じ(http://www.furimuke.com/2013/04/blogger_7.html)ですが、もう少し丁寧に説明しようと考えています。 またこのBlogger英語テンプレートを日本語化してほしいという要望がありましたら、コメント覧にでも投稿ください。チャレンジします。
http://1.bp.blogspot.com/-e3iyUp7CTes/UXaXGd6soiI/AAAAAAAAJL0/Vl4SztvtdXE/s640/Delicacy+Blogger+Templates.jpg
http://1.bp.blogspot.com/-e3iyUp7CTes/UXaXGd6soiI/AAAAAAAAJL0/Vl4SztvtdXE/s72-c/Delicacy+Blogger+Templates.jpg
ふりむけばコウホウ
http://www.furimuke.com/2013/04/blogger1.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2013/04/blogger1.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