有料テンプレート 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






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


名前

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
ふりむけばコウホウ : 有料テンプレート Flat Mag - Responsive Magazine Blogger Templateを入れてみた
有料テンプレート Flat Mag - Responsive Magazine Blogger Templateを入れてみた
http://3.bp.blogspot.com/-OMkc0uxQwQc/U6ge8YQU9fI/AAAAAAAAScM/FiZ-EdU_HoA/s1600/Blogging+++Flat+Mag+++Responsive+Magazine+Blogger+Template+++ThemeForest.png
http://3.bp.blogspot.com/-OMkc0uxQwQc/U6ge8YQU9fI/AAAAAAAAScM/FiZ-EdU_HoA/s72-c/Blogging+++Flat+Mag+++Responsive+Magazine+Blogger+Template+++ThemeForest.png
ふりむけばコウホウ
http://www.furimuke.com/2014/06/flat-mag-responsive-magazine-blogger.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2014/06/flat-mag-responsive-magazine-blogger.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