うぃず FC2テンプレート

FC2ブログのテンプレートの配布や、コピペで簡単にカスタマイズできるような方法を紹介しています。
FC2ブログで使えるテンプレートを配布しています
2013.09.29 01:01|folder.png テンプレートcomment.png(6)

01SP_Redを申請中です

  • このエントリーをはてなブックマークに追加

  • スマートフォン用FC2テンプレート【01SP_Red】を申請中です。どのくらい時間かかるかな?

    運営しているサイトのアクセス解析等を行っていると、スマートフォンからのアクセスがどんどん増えている傾向が見られました。

    これからはスマホの時代というわけですね(´∀`)

    各箇所マイナーチェンジしております。

    現在公開しておりません

    スポンサードリンク


    で、そんなこんなで現在スマートフォン用に力を入れています。

    スマートフォン用になるとPC用のテンプレートに比べてカスタマイズ性が少なく、プラグインが少ないことも考えると、

    独自の機能等で差別化を図るしかないのかなぁ・・・とか考えています。

    ドロップダウンメニュー等はもちろんのこと、下部に常に表示されるようなナビゲーションバーなんかも付けてみたいなーとか考えています。でも、下部にナビバー付けると、FC2の下にずっと付いてくるオーバーレイ広告と被ってしまって、ボタン押せなくなったりするので、意味ないかな・・・とか思っています。

    スマホ用テンプレートに、 ブログの上部にスクロールしても常に表示されるメニューバーっぽいものを設置したいで設定しているtop: 0;って箇所をbottom: 0;にしてあげたら常に下にくっつくようになるので、簡単作れるのですが、広告なんとかならないかなー。

    Screenshot_2013-09-29-10-19-46.png  Screenshot_2013-09-29-10-20-04.png
    タイトル部分の濃い赤色は、もうちょっと薄くても良かったかもしれません。
    メニューバーのCATEGORYとCOMMENTはドロップダウンメニューに対応しています。


    Screenshot_2013-09-29-10-22-08.png  Screenshot_2013-09-29-10-21-09.png
    個別記事ページと、プラグインページです。下部の4つのアイコンはそれぞれ「ホームへ」「記事の上へ」「ログイン」「メールで友達に教える」です。アイコンのURLさえ変えれば自作のアイコンも使用可能です。


    Screenshot_2013-09-29-14-34-37.png
    関連記事まわりは改善の余地アリです。
    「コメント()」、「コメントを書く」もドロップダウンに対応しています。
    公式テンプレートでは、コメントを書くページやコメント閲覧ページでは、元の記事を見ることができなかったため、このテンプレートでは個別記事と同じ箇所にコメント閲覧とコメント投稿をできるように改造しています。
    その分、コメントを書く際に入力したURLの表示ができなくなってしまいました。

    使用カラーも少なくし、簡単に色替えできるようにしました。

    メインカラー :#B22222(濃)
    メニューカラー:#FF3333(鮮)
    サブカラー  :#FFFAFF(薄)
    ラインカラー :#DDBBDD(線)

    CSS上で、Ctrl+Fで検索して置換していただければきれいに色替えできるかと思います。


    SP01_GrayやSP01_Blueの色違いなだけかと思いきや、各箇所マイナーチェンジしております。
    もしかすると不具合があるかもしれませんが、もしよければダウンロードしてくださいね(^-^)
    関連記事
    繝?せ繝?
    [ 2013/09/29 10:34 ] [ 編集 ]
    トップ絵について
    yuta様、はじめまして。
    スマートフォン用テンプレート「01SP_Blue」について少々伺いたい事があります。
    タイトル部分をトップ絵に入れ替えたいのですが、どうしても左右にサイズが合わずに半分くらいしか表示されません。
    画像サイズは幅640px。サイドにテンプレート画像のブルーの雲?画像が表示されています。
    初歩的な質問で申し訳ありませんが、ご回答頂けると幸いです。
    [ 2013/10/04 05:09 ] [ 編集 ]
    Re: Re: トップ絵について
    コメントありがとうございます。
    HTML編集にて、<h1>~</h1>を以下のように変更したと仮定します。
    <h1>
    <a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="画像URL" border="0" /></a>
    </h1>
    この場合、私も確かに画像が中途半端な表示しかされないのを確認いたしました。


    解決方法として、CSS編集にて、以下の赤い箇所を変更または追加してみてください。

    /*============================================================
    ●●ヘッダー●●
    ============================================================*/
    /****************************** ▼全体▼ */
    #header {
    position:relative;
    min-height: 60px;
    margin:0 0 0px;
    padding: 0 0px;
    background-color:#B22222; /* ヘッダ背景色(全体)*/
    color:#FEFEFE; /* ヘッダ文字色 */
    text-align: center; /* 中央寄せ */
    background:url("http://blog-imgs-42.fc2.com/x/x/n/xxnostalgiaxx/17_s.jpg")

    }
    /****************************** ▲全体▲ */

    /****************************** ▼タイトル文字部分▼ */
    #header h1 {
    overflow: hidden;
    width: 100%;
    margin:0 auto;
    padding: 0px 0;
    font-size:20px; /* 文字の大きさ */
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    #header img {
    width: 100%;
    }


    #header h1 a { color:#FFFFFF;} /* 文字色 */
    #header h1 a :hover{ color:#FFFFFF; } /* 触れた時の文字色 */


    /****************************** ▲ヘッダタイトル部分▲ */


    もし不要でしたら
    background:url("http://blog-imgs-42.fc2.com/x/x/n/xxnostalgiaxx/17_s.jpg")
    は削除してくださいね。

    #header imgで、width: 100%;を設定しています。
    挿入したTOP画像がどんな大きさであろうとも、テンプレートの横幅100%の大きさの画像になるように調整してあります。もし、大きすぎる場合などがありましたら、値を変更してみてください。



    yuta様、はじめまして。
    スマートフォン用テンプレート「01SP_Blue」について少々伺いたい事があります。
    タイトル部分をトップ絵に入れ替えたいのですが、どうしても左右にサイズが合わずに半分くらいしか表示されません。
    画像サイズは幅640px。サイドにテンプレート画像のブルーの雲?画像が表示されています。
    初歩的な質問で申し訳ありませんが、ご回答頂けると幸いです。
    [ 2013/10/04 14:32 ] [ 編集 ]
    Re: Re: トップ絵について
    yuta様、ご丁寧に解説して頂きどうもありがとうございます。
    当方全くの初心者なのでとても助かります。

    該当部分の変更、追加したところ、お陰様でPC版のグーグルクロームではきちんと表示されるようになりました。
    しかし、手持ちのスマホ3機種(GALAXYSⅢ等)のブラウザでは余白が出来てしまいます…
    また、当初からなのですが、右下のメールアイコンが大きくなり、その他アイコンの下に空白部分が出来てしまっているので、もしかしたら私のスマホのブラウザ?画面サイズのせいできちんと表示できていないだけなのかもしれません。
    お忙しいところ申し訳ありませんが、何か解決法があれば教えて頂きたく存じます。
    [ 2013/10/04 23:14 ] [ 編集 ]
    Re:Re: Re: トップ絵について
    http://10lab.blog.fc2.com/?spのように、当サイトのトップ絵を変更してみましたが、PC、スマホ(T-01D、F-06E)、タブレット(NEXUS7)共に特に余白は見られませんでした。
    トップ絵の画像自身に余白などはないでしょうか?もしよろしければ、サイト又はトップ絵を見せていただけたらと思っています。その際は右下のメールフォームからURLを送って頂ければと思います。


    バグのご指摘ありがとうございます。確かにメールアイコンだけが大きくなっていました(^_^;)


    CSS編集にて、
    /*============================================================
    ●●下部ナビ●●
    ============================================================*/
    /****************************** ▼下部ナビ▼ */
    #page_navi {
    overflow:hidden;
    border-bottom: 3px solid #B2D5E6; /* 枠線色 */

    }
    #page_navi li {
    min-width:25%;
    border: 0px solid #B2D5E6; /* 枠線色 */
    }
    #page_navi .page_home{ float:left; margin:0px;} /* ホーム 左寄せ */
    #page_navi .page_top { float:left; margin:0px;} /* ページトップ 右寄せ */
    #page_navi .login { float:left; margin:0px;} /* ログイン 左寄せ */
    #page_navi .osieru { float:left; margin:0px;} /* 教える    右寄せ */

    赤の箇所のようにwidthをmin-widthとしてみてください。おそらく改善されるかと思います。

    また、レイアウト自体に影響を与えるものではありませんが、青い箇所も訂正して頂ければと思います。完全に表記ミスをしておりました。申し訳ありません(´Д`;)

    [ 2013/10/05 13:17 ] [ 編集 ]
    Re:Re: Re: トップ絵について
    yuta様、何度もご丁寧に解説して頂きどうもありがとうございます。

    どうやら修正後の更新が上手くいっていなかったようで、何度も繰り返していたらきちんと表示されるようになりました。

    この度はとても親切に対応して頂きましてどうもありがとうございました。
    とても使いやすく素敵なテンプレートなので、これからも大事に使わせて頂きます。
    [ 2013/10/05 22:29 ] [ 編集 ]
    コメントの投稿












    管理者にだけ表示を許可する
    トラックバック
    この記事のトラックバックURL

    検索フォーム
    スマートフォン用テンプレート
    カスタマイズしやすいように考慮してHTMLを記しています。
    SP01_Gray
    スマートフォンテンプレートグレー
    グレーが基本色のテンプレートです。
    メインカラー :#444444
    メニューカラー:#333333
    サブカラー  :#EFEFEF
    ラインカラー :#999999
    で主に構成しています。CSSにて色指定箇所を置換すれば簡単に色替えが可能です。 お好みの色に変更して楽しんでください。

    SP01_Blue
    スマートフォンテンプレート青
    爽やかな水色が基本色のテンプレートです。
    TopNTagCloud

    フリーエリア
    メールフォーム
    何か質問等ありましたらお気軽にお問い合わせください。

    名前:
    メール:
    件名:
    本文:


    FC2ブロガー必見!

    必ず結果が出るブログ運営テクニック


    もっとカスタマイズしたい方必見!


    毎日メンテナンスするだけで・・・

    最新トラックバック
    ブロとも申請フォーム