うぃず FC2テンプレート

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

スポンサーサイト

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

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


    スポンサードリンク



    2013.05.11 09:30|folder.png カスタマイズcomment.png(4)

    関連記事リストを任意の場所に表示したい

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

  • 関連記事リストって便利なのですが、自分流にカスタマイズしにくいし、何より表示箇所を変えたいという要望があったので紹介したいと思います。




    スポンサードリンク


    Baidu IME_2013-5-11_9-13-32
    ↑ブログの環境設定から、関連記事の表示場所をテンプレート変数のみに変更してください
    こちらが変数です。

    <!--relate_list_area-->
    <dl class="relate_dl">
    <dt class="relate_dt">関連記事</dt>
    <dd class="relate_dd">
    <ul class="relate_ul">
    <!--relate_list-->
    <!--relate_entry_other-->
    <li class="relate_li"><a href="<%topentry_relate_url>"><%topentry_relate_title></a></li>
    <!--/relate_entry_other-->
    <!--relate_entry_now_showing-->
    <li class="relate_li_nolink"><%topentry_relate_title></li>
    <!--/relate_entry_now_showing-->
    <!--/relate_list-->
    </ul>
    </dd>
    </dl>
    <!--/relate_list_area-->

    これで、普段と同じデフォルトの関連記事リストが作成されます。


    【記事個別ページに関連記事リストを挿入】

    <!--more-->
    <%topentry_more>
    <!--▼記事下広告スペース▼-->
    <!--この文章を消してここに広告を貼ると記事下の広告スペースになります-->
    <!--▲記事下広告スペース▲-->
    <!--/more-->

    まず、テンプレートのHTMLから、このような箇所を探してください。
    <!--/more-->の後ろに、上記の関連記事リストの変数を挿入してください。

    つまり、

    <!--more-->
    <%topentry_more>
    <!--▼記事下広告スペース▼-->
    <!--この文章を消してここに広告を貼ると記事下の広告スペースになります-->
    <!--▲記事下広告スペース▲-->
    <!--/more-->
    <!--relate_list_area-->
    <dl class="relate_dl">
    <dt class="relate_dt">関連記事</dt>
    <dd class="relate_dd">
    <ul class="relate_ul">
    <!--relate_list-->
    <!--relate_entry_other-->
    <li class="relate_li"><a href="<%topentry_relate_url>"><%topentry_relate_title></a></li>
    <!--/relate_entry_other-->
    <!--relate_entry_now_showing-->
    <li class="relate_li_nolink"><%topentry_relate_title></li>
    <!--/relate_entry_now_showing-->
    <!--/relate_list-->
    </ul>
    </dd>
    </dl>
    <!--/relate_list_area-->


    このようにすることで、個別記事が終わり、広告を挟んで、関連記事を表示することもできます。


    【記事一覧ページに関連記事リストを挿入】

    <!--more_link-->
    ~~
    <!--/more_link-->

    という箇所を探してください。
    このすぐ下に、関連記事リストの変数を挿入すれば、記事一覧ページの下部にも関連記事リストを設置できるようになります。

    つまり、

    <!--more_link-->
    ~~
    <!--/more_link-->
    <!--relate_list_area-->
    <dl class="relate_dl">
    <dt class="relate_dt">関連記事</dt>
    <dd class="relate_dd">
    <ul class="relate_ul">
    <!--relate_list-->
    <!--relate_entry_other-->
    <li class="relate_li"><a href="<%topentry_relate_url>"><%topentry_relate_title></a></li>
    <!--/relate_entry_other-->
    <!--relate_entry_now_showing-->
    <li class="relate_li_nolink"><%topentry_relate_title></li>
    <!--/relate_entry_now_showing-->
    <!--/relate_list-->
    </ul>
    </dd>
    </dl>
    <!--/relate_list_area-->

    このようにすれば完成です。

    他にも、
    <!--topentry-->~<!--/topentry-->の中であれば、どこにでも関連記事リストを設置することができます。


    関連記事
    初めまして、02T_Whiteについて質問です。
    初めまして、ゲームブログを開いているあすとらると言います。

    3日くらい前からテンプレートを02T_Whiteに変更しまして
    試行錯誤している最中なのですが、
    どうしてもわからないことがありまして、質問させていただきました。

    ブラウザを横に伸ばした際にタイトル、メニューバー、パンくずリストも
    メインコンテンツ同様に固定で付いてくるようにしたいのと、
    fc2関連記事リストの ・ ファビコンっていうのでしょうか?の空いている
    左スペースをもっと左詰めにして記事を詰めたいのですが可能でしょうか?

    以上2点ととなります。ご教示願い致します。m(_ _)m
    [ 2013/05/13 03:23 ] [ 編集 ]
    Re: 初めまして、02T_Whiteについて質問です。
    初めまして!早速ですが、お答えいたします。

    > ブラウザを横に伸ばした際にタイトル、メニューバー、パンくずリストも
    > メインコンテンツ同様に固定で付いてくるようにしたいのと、
    > fc2関連記事リストの ・ ファビコンっていうのでしょうか?の空いている
    > 左スペースをもっと左詰めにして記事を詰めたいのですが可能でしょうか?

    まず、タイトル、メニューバー、パンクズリストをメインコンテンツと同様、固定したいということでしょうか?
    それならば、
    <div id="outline">と</div><!--outline-->の間に、タイトル、メニューバー、パンくずリストが入っていると思います。
    まずは、<div id="outline">と</div><!--outline-->のみを消してください。

    次に、 <div id="outline_main">と記述されていると思うので、 <div id="outline_main">を<body onBlur="" bgcolor= "#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">のすぐ下に移動させてください。

    スタイルシートの方では、

    #outline {
    min-width:1050px;
    width:100%; /* 全体 */
    margin:0 auto;
    }

    は不要なので消してください。このようにすることで、固定長になるかと思います。



    次に、関連記事変数に関してですが、スタイルシートの方に、

    .relate_dl {
    border:2px solid #466e9d; /* 内枠の色 */
    }
    .relate_dt{
    background-color:#466e9d; /* 外側背景色 */
    color:#ffffff;
    font-weight:bold; /* 太字 */
    padding-left:30px;
    font-size:12pt; /* 文字サイズ */
    }

    という記述があると思います。この下に、以下の記述を追加してください。

    .relate_dd {
    margin-left:-5px; /* 内枠の色 */
    }

    この-5pxの部分を、変えてあげれば左に詰めていくことが可能になるかと思います。


    もし質問の答えがズレていた等、また何かあればコメントください('∀`)

    [ 2013/05/13 11:30 ] [ 編集 ]
    m(_ _)m
    素早い、ご返答ありがとうございます。
    早速ですが試しましたところ・・・・


    無事、出来ました!


    yutaさんは神ですね。感謝感激です。ワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ

    これでブログ作業も捗りそうです。
    的確な回答ありがとうございました。
    これにて失礼致します。 |彡サッ
    [ 2013/05/13 12:38 ] [ 編集 ]
    承認待ちコメント
    このコメントは管理者の承認待ちです
    [ 2014/04/25 00:47 ] [ 編集 ]
    コメントの投稿












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

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

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

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

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


    FC2ブロガー必見!

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


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


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

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

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