入口 > スポンサー広告 > スポンサーサイト お問合せ - お返事 > 【再・修正版】うちで適用中のスマホテンプレについて

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------

【再・修正版】うちで適用中のスマホテンプレについて

手順「1」にも間違いがありました、度々すみません…修正いたしました<(_ _)> (2013/04/05)

手順「7」に間違いがありました! 閉じタグ二種類が抜けておりました……大変申し訳ありませんでした、修正いたしました。ご指摘ありがとうございました!!!<(_ _)> (2013/04/03)



◆cha さま 

こんにちは、お返事が大変遅くなりまして申し訳ありません!
ご賛同と丁寧なお問い合わせ、ありがとうございました。(PC用でも携帯用でもなければバージョン情報のご記入は不要です、ありがとうございます^^)

>「このざま」のリンクでスマホ画面らしきページに飛びましたが、あの画面デザインは配布されてないのでしょうか?

とのことで、サイトトップでも少しお知らせをしておりましたが、あちらは「FC2ブログのテンプレート工房」さんのお作りになったスマホテンプレ「10plate_sp_white」をカスタマイズしたものです。すっきりしてきれいですよね!
一応具体的にどこをどう変更したか、機械的にではありますがわかる限りで下に挙げておきますので、もし参考になる部分があればお使いください。
コメント機能・トラバ機能、記事投稿の時・分・秒はざっくり削り、プラグインもカテゴリ以外使わないつもりでのカスタマイズです。

  1. 「10plate_sp_white」テンプレHTMLの始めの方、「▼ メニューバー ▼」の下あたり

    <!--▼ メニューバー ▼-->
    <ul id="menu_bar">
    <li><a href="<%url>">HOME</a></li>
    <li><a id="menu04">CATEGORY</a></li>
    <li><a id="menu03">COMMENT</a></li>
    <li><a href="<%url>?pc" style="border-right:0px;">PC</a></li>
    </ul>
    <!--▲ メニューバー ▲-->


    <div id="menu_list03" style="display: none;">
    <h2>最新コメント</h2>
    <ul class="plugin_list">
     ・
     ・
    <!--/rcomment-->
    </ul>
    </div>

    <div id="menu_list04" style="display: none;">
    <h2>カテゴリ</h2>

    灰字部分を削除、青字部分を追加(※青字関係足しました! 2013/04/05)




  2. その更に下あたり

    <h2>カテゴリ</h2>
    <ul class="plugin_list">
    <!--category-->
    <li>
    <a href="<%url>?cat=<%category_number><%tail_url>" style="color:&plugin_tcolor;">
    <%category_name>(<%category_count>)
    </a>
    </li>
    <!--/category-->

    </ul>
    </div>

    黄字部分を以下赤字で置換

    <ul class="plugin_list">
    <!--category-->
    <!--category_sub_begin-->
    <ul>
    <!--/category_sub_begin-->
    <!--category_nosub-->
    <li>
    <a href="<%url>?cat=<%category_number><%tail_url>"><%category_name></a>
    <!--/category_nosub-->
    <!--category_parent-->
    <li>
    <a style="cursor:default;"><%category_name></a>
    <!--/category_parent-->
    <!--category_sub_hasnext-->
    <li>
    <a href="<%url>?cat=<%category_number><%tail_url>"><%category_name></a>
    <!--/category_sub_hasnext-->
    <!--category_sub_end-->
    <li>
    <a href="<%url>?cat=<%category_number><%tail_url>"><%category_name></a>
    <!--/category_sub_end-->
    <!--category_nosub-->
    </li>
    <!--/category_nosub-->
    <!--category_sub_hasnext-->
    </li>
    <!--/category_sub_hasnext-->
    <!--category_sub_end-->
    </li>
    </ul>
    </li>
    <!--/category_sub_end-->
    <!--/category-->

    </ul>



  3. そのまた更に20行ぐらい下(「記事詳細ページ以外」の8行ぐらい下)

    <!--topentry-->
    <li class="arrow">
    <a href="<%topentry_link><%tail_url>">

    黄字部分を以下赤字で置換

    <!--topentry-->
    <li class="arrow<!--index_area--> index_date_<%topentry_year><%topentry_month><!--/index_area--><!--not_category_area--> list_cat_<%topentry_category_no><!--/not_category_area-->">
    <a href="<%topentry_link><%tail_url>">



  4. またまた更に4行ほど下

    <div class="entry_tip"><%topentry_year>/<%topentry_month>/<%topentry_day> <%topentry_hour>:<%topentry_minute> CM:<%topentry_comment_num> TB:<%topentry_tb_num></div>

    黄字部分を以下赤字で置換、灰字部分を削除

    <div class="entry_tip date_<%topentry_year><%topentry_month>"><%topentry_year>/<%topentry_month>/<%topentry_day></div>



  5. そして更にずーっと60行ほど下、「エントリー詳細ページ」の5行下

    <div class="entry_text"><%topentry_body><br />

    青字部分をひとつ増やして

    <div class="entry_text"><%topentry_body><br /><br />

    とする


  6. のまた3行下

    <div class="entry_category">
    <p>カテゴリ : <a href="<%topentry_category_link>"><%topentry_category></a></p>
    <p><%topentry_year>年<%topentry_month>月<%topentry_day>日<%topentry_hour>:<%topentry_minute></p>

    <p>
    <!--allow_comment-->コメント : <a href="<%topentry_link>&m2=res<%tail_url>"><%topentry_comment_num></a><!--/allow_comment--> /
    <!--allow_tb-->トラックバック : <a href="<%topentry_link>&m2=tb<%tail_url>"><%topentry_tb_num></a><!--/allow_tb-->
    </p>

    </div>
    </div>
    <!--allow_tb-->
    <div id="tb_box">
    <strong>トラックバックURL</strong>
    <div><%trackback_url></div>
    </div>
    <!--/allow_tb-->

    <div class="pager">

    黄字部分を以下赤字部分で置換、灰字部分を削除

    <div class="entry_category">
    <p>[<a href="<%topentry_category_link>"><%topentry_category></a>]</p>
    <p><%topentry_year>.<%topentry_month>.<%topentry_day></p>



  7. もいっちょ、そのまた7行ほど下から

    </div>
    </div>
    <div class="button_box">
    <!--allow_comment-->
    <a href="<%topentry_link>&m2=res<%tail_url>" class="button darkblue">コメントを見る</a>
     ・
     ・
    <!--/allow_tb-->
    </div>

    <!--/topentry-->
    <!--/permanent_area-->


    <!--form_area-->
    <!--コメントを書く-->
    <h2 id="pagetitle">コメントを書く</h2>
     ・
     ・
    (すごくたくさん)
     ・
     ・
    <a href="<%url>?m2=form&no=<%pno><%tail_url>" class="button darkblue">コメントを書く</a>
    </div>
    <!--/trackback_area-->


    <div id="footer">
    <div class="ad02"><%ad2></div>

    灰字部分を削除(※途中黒字の二行を足しました! 2013/04/03)


  8. としておいて、スタイルシート前半1/4ぐらいの

    width:79px; /* 1つのメニューボタンの幅 */

    の「79」を「106」に変更


  9. スタイルシート末尾に

    .index_date_yyyymm, .list_cat_X { display: none; }
    .date_yyyymm { visibility: hidden; }

    と加え、青字を未来記事の日付に、赤字をトップの記事一覧に載せたくないカテゴリ番号に変更


以上です。
宜しくお願い致します。

※個人的な事例ですので、この記事に関しては、明らかなミスのご指摘以外でのお問い合わせはご遠慮ください。
2013-04-05
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。