有料テンプレート Flat Mag - Responsive Magazine Blogger Templateを入れてみた

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

有料テンプレート 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）とか、設定したほうが綺麗に見える。下記どうぞ。

/*------------------------------------------------------
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