おすすめ記事ピックアップ
有料テンプレート Flat Mag - Responsive Magazine Blogger Templateを入れて見ました。ThemeforestのBloggerテンプレートです。20$です。日本語化や調整について、ざっと紹介しようと思います。日本語化して使うのは、少しだけ難しいテンプレートです。このテンプレートの良い点、悪い点についても紹介します。
Flat Mag - Responsive Magazine Blogger Template
Flat Magですが、3カラムのデザインでして、嫌いな人も多いかと思います。私は、他の人には、シンプルなデザインを進めるのですが、自分のブログはごちゃごちゃしたのが好きなんです。3カラムで左右にウィジェットがあると、なんか落ち着くんです。
他には、関連情報が6個表示されるのもいい感じです。上下左右に記事の誘導を設定できるのが良いです。
レスポンシブデザインもついてます。購入数も100を超えていますし、評価も高いです。評価数が少ない場合は、良くないテンプレートなこともあるのですが、24件の評価で、4.7ですから、たぶん良いテンプレートです。以上から、このテンプレートを選びました。
カスタマイズして完成です。
このテンプレートの良くない点は、この良さそうなスライド機能が、日本語環境や、ダサい画像が多いブログだと、まったくよろしくありませんでした。残念です。使う際にスライド機能は削除しました。
あと、画像のリンク設定の違いによって、投稿画像の表示がズレる問題の処理がされておらず、自前でCSSの調整が必要でした。RELATED POSTSの小さい文字がはみ出しちゃったり、いろいろトラブルありますが、調整しました。
・Bloggerで画像への外部リンクと、画像自体へのリンクで、画像表示がズレるときの対処方法
http://www.furimuke.com/2014/06/blogger.html
英語のままだと、ブログとして使うのが厳しいです。細かく紹介したいけど、カスタムのメモだけ書いておきます。CSSをそこそこ理解している人じゃないと、大変かもしれません。
1.フォント設定が一箇所にまとまっていないので、font-familyのCSS数十箇所の変更必要。
2.フォント設定が小さいので、大きくする必要あり。CSS変更しよう。
3.ロゴ周りは、大きなスペースが入っているので、CSS変更しよう。
4.左一番したのHOT表示を削除すると、上部の表示タグも機能しなくなるので、残しておこう。
5.右上の3つのタブ切り替え機能の上に、ウィジェットを設置することはできないので、HTML直編集でウィジェットの並び替えを操作しよう。bifを読み取ればきっとできる。
6.手動で設定するべきメニューが3箇所あるのでめんどい。
7.RELATED POSTS部分の小さい文字が、はみ出すので.relatedposts pのマージンを60ぐらいにしてごまかす。もっと良い方法あるかも。.relatedposts strongのhiddenも削除すると、良い感じ。
8.小見出し(h3)とか、設定したほうが綺麗に見える。下記どうぞ。
Flat Magのテンプレートについて、知りたいことあれば、分かる範囲で回答します。
http://www.furimuke.com/p/blog-page_3.html
Flat Mag - Responsive Magazine Blogger Template
Flat Magですが、3カラムのデザインでして、嫌いな人も多いかと思います。私は、他の人には、シンプルなデザインを進めるのですが、自分のブログはごちゃごちゃしたのが好きなんです。3カラムで左右にウィジェットがあると、なんか落ち着くんです。
他には、関連情報が6個表示されるのもいい感じです。上下左右に記事の誘導を設定できるのが良いです。
レスポンシブデザインもついてます。購入数も100を超えていますし、評価も高いです。評価数が少ない場合は、良くないテンプレートなこともあるのですが、24件の評価で、4.7ですから、たぶん良いテンプレートです。以上から、このテンプレートを選びました。
カスタマイズして完成です。
このテンプレートの良くない点は、この良さそうなスライド機能が、日本語環境や、ダサい画像が多いブログだと、まったくよろしくありませんでした。残念です。使う際にスライド機能は削除しました。
あと、画像のリンク設定の違いによって、投稿画像の表示がズレる問題の処理がされておらず、自前でCSSの調整が必要でした。RELATED POSTSの小さい文字がはみ出しちゃったり、いろいろトラブルありますが、調整しました。
・Bloggerで画像への外部リンクと、画像自体へのリンクで、画像表示がズレるときの対処方法
http://www.furimuke.com/2014/06/blogger.html
英語のままだと、ブログとして使うのが厳しいです。細かく紹介したいけど、カスタムのメモだけ書いておきます。CSSをそこそこ理解している人じゃないと、大変かもしれません。
1.フォント設定が一箇所にまとまっていないので、font-familyのCSS数十箇所の変更必要。
2.フォント設定が小さいので、大きくする必要あり。CSS変更しよう。
3.ロゴ周りは、大きなスペースが入っているので、CSS変更しよう。
4.左一番したのHOT表示を削除すると、上部の表示タグも機能しなくなるので、残しておこう。
5.右上の3つのタブ切り替え機能の上に、ウィジェットを設置することはできないので、HTML直編集でウィジェットの並び替えを操作しよう。bifを読み取ればきっとできる。
6.手動で設定するべきメニューが3箇所あるのでめんどい。
7.RELATED POSTS部分の小さい文字が、はみ出すので.relatedposts pのマージンを60ぐらいにしてごまかす。もっと良い方法あるかも。.relatedposts strongのhiddenも削除すると、良い感じ。
8.小見出し(h3)とか、設定したほうが綺麗に見える。下記どうぞ。
/*------------------------------------------------------ pre ------------------------------------------------------*/ pre { padding:10px; margin:10px 0; border:1px solid #ddd; background:#e8e8e8; overflow:auto; } pre br{display:none;} code { font:1em/1.2em \'courier new\', courier, monospace; } /*------------------------------------------------------ blockquote ------------------------------------------------------*/ .post-body blockquote { border: 1px solid #cbd4d7; padding: 15px 10px 15px 40px; margin:20px; background:url(http://1.bp.blogspot.com/-sJbFLVX5LVs/UDzoGxMvWrI/AAAAAAAAAmg/qkUni125BV0/s1600/quotation-l.png) no-repeat 10px 10px; } /*------------------------------------------------------ 小見出し ------------------------------------------------------*/ .post-body h3, .status-msg-wrap h3 { font-size:25px; border-left: 5px solid #F15252; margin: 30px 0 30px; padding-left: 10px; font-weight: bold; }
Flat Magのテンプレートについて、知りたいことあれば、分かる範囲で回答します。
http://www.furimuke.com/p/blog-page_3.html