アニメ.エ口ゲーなどの感想が多いです。 ↓メニューバーです

TOP > ブログまわりを快適にするよ! > ブログのデザインに不満がある人必見!おしゃれなのに軽いFc2テンプレート「monochro-stripe」


    large_3426296605
    photo credit: Neal. via photopin cc


    先日とてもお気に入りのfc2テンプレートを発見したので、紹介させていただきます。

     

     

    monochro-stripeとはどんなもの?


    一言でいえば「デザインにこわだりつつも、ユーザーへの使いやすさを犠牲にしていない」です。



    具体的にいうと、この3点です。

    ・記事ページからフッター(ブログ下段)にかけてシックなデザインに収まっている。

    ・サイドバーが380pxと大きく取っているので、大きな画像も使える。

    ・テンプレート自体が軽いので、IEでの利用も問題なし。

     

     

    といってもよくわからないと思うので、1つづつ画像で見てみましょう─=≡Σ((( つ•̀ω•́)つ

     

    記事ページからフッター(ブログ下段)にかけてシックなデザインに収まっている。

    monochro-stripe の説明


    [記事ページ、サイドバー、続きを読む、カテゴリ・タグ]のすべてに可愛らしいアイコンが標準装備されています。少しのアクセントがよりブログをおしゃれにしていますね。

    そして背景と記事ページに注目してください。目を凝らさないとわからないですが、木目状になっています。これのおかげでちょっと落ち着いた雰囲気に?( "・ω・゛)ナッテルカモ。

     

    そしてスクロールでくるくる下に行くと、ページナビとフッターが見えてきます。

    ページナビはホームアイコンが加わり、ユーザーがTOPページに行きたい欲求を満たしてくれます。

    フッターは黒の木目タイルぽくて良い感じ。おしゃれは足元ということですかね?それとフッターの枠は、左からプラグイン2、真ん中がプラグイン3に対応しています。

    monochro-stripe 説明2_compressed

     

     

    サイドバーを380pxと大きく取っているので、大きな画像も使える

     

    monochro-stripe 説明3_compressed

     

    デフォルトテンプレートのサイドバーは200PX前後と小さめなものが多いです。しかしmonochro-stripeなら380pxあるので大きな画像も貼りつけられます。


    サイドバーに画像をバンバン貼りまくってる人は、中々使いやすいんじゃないですかね。




    テンプレート自体が軽いので、IEでの利用も問題なし



    デザインがおしゃれでも、テンプレ自体が重かったら使わなくなっちゃいますよね。

    monochro-stripeはHTMLとCSSの書き方が良いのか、とても軽いです。fc2共有テンプレートの「週間DL」で、上位テンプレを20個ほど漁りましたが、これが一番IEでの表示がスムーズでした。





    以前使っていたテンプレとmonochro-stripeを比べてみる



    以下の手順で、テンプレートの重さを見ていきます。
    ―――――――――――――――
    TOP記事

    下段までスクロール

    上段に戻る

    個別記事にいく

    下段までスクロール

    ―――――――――――――――
    ※スクロールは手動です。なるべく同じ速度でスクロールするように心がけました。

    1,以前のテンプレート







    2、monochro-stripe



    ちょーっとわかりにくいかな・・・?( "・ω・゛)ドウデショウカ?

    ※プラグインは変えてませんが、スクロールは手動で、しかもテンプレ毎に画像のちょっとした違いがあります。あくまで、あくまで参考程度に見てください。(といってもmonochro-stripeのほうが、記事ページにいろいろ突っ込んでるので重いのですが)


    以前に使っていたテンプレはとにかく重いものでした。しかしmonochro-stripeに変えたところ、驚くほどスムーズにページが表示されるようになりましたヽ(>ω<)ノヤッタネ

    IEでの表示が軽くなったことで、chromeでの表示も若干軽くなったのでわたしゃあほくほくですよ!

    HTMLやCSSの書き方でブラウザでの表示がここまで変わるなんて思いもしなかったですね。






    monochro-stripeにも弱点はある


    オシャレで軽いmonochro-stripe。
    確かに良いテンプレです。

    ただmonochro-stripeにも弱点があります。
    それは、初心者にはカスタマイズが難しいところです。



    カスタマイズとは?



    FC2ではテンプレート管理画面で、HTMLやCSSをいじることで自分好みのデザインにすることが可能です。

    いじり慣れている人ならわかるとおもいますが、カスタマイズしやすいテンプレはHTML内に「どこからどこまでがここのエリアですよ」と書いてあります。

    これは、lightframe_monotoneというテンプレのHTML内の記述です。


    monosHTMLkizyutu (1)



    対して、 monochro-stripe。


    monaosHTMLkizyutu (1) 





    どこがどこのエリアでどこをいじればどうなるかが分かりにくいです。

    なんですかこのコード波は!頭痛がするほどにワカランヌ(・ω・;)



    ただこれにはワケがありそうです。HTML内で日本語での記述はあまり推奨されてないようなんですね。SEO対策なども考慮にいれた結果なのかもしれません。



    ちなみにわたしは、monochro-stripeのHTMLとCSSを3日かけてようやく理解できました⊂⌒~⊃。Д。)⊃アウアウ




    それでは導入してみましょう!


    画像で説明していきます。


    FC2ブログの管理画面に行きます。
    左にある「テンプレの設定」をクリック

    monochro-stripe 導入方法1_compressed 



    ・そして上段にある「共有テンプレート」をクリック

    monochro-stripe 導入方法2_compressed



    ・共有テンプレートからmonochro-stripeを検索します。
    名前の欄に、「 monochro-stripe 」と入力しましょう。

    monochro-stripe 導入方法3_compressed





    ・目当てのテンプレートが出てきたら「詳細」をクリック
    コピー ~ monochro-stripe 導入方法4


    ・そして「ダウンロード」をクリック

    コピー ~ monochro-stripe 導入方法5 



    ・ダウンロードしたら「テンプレートの設定」画面に戻ります。

    あとはmonochro-stripeにチェックを入れて「適用」で完了です。

    monochro-stripe 導入方法6_compressed

     

     

    まとめ


    ・ブログの頭から足元までオシャレ!

    ・サイドバーが大きく使いやすい!

    ・テンプレート自体が軽いので、ページ表示がスムーズ!

    ・カスタマイズが難しい。


    今のfc2テンプレートに不満がある人は、一回使ってみてはどうでしょうか。ちなみに作者さんのページはこちらです 。
    参考:共有テンプレートmonochro-stripeについて


    んでは、おすすめのfc2テンプレートのの紹介でした(>ω<)ノシ



    ● 記事を共有する


    よく読まれている新ブログの記事。

















トラバ














         template by SEO