入口 > スポンサー広告 > スポンサーサイト テンプレ - カスタマイズ > 入口ページにサムネイルを載せる

スポンサーサイト

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

入口ページにサムネイルを載せる

入口ページに直近の投稿記事の画像サムネイルを並べ、それで記事にリンクさせるカスタマイズです。(2014.02.06 加筆しました)
  1. テンプレHTMLの初めの方、「■入口(卜ップ)ページ■」から「■入口(卜ップ)ページ終■」のきりのいいお好きな場所に下記赤字を挿入
    (例えばブログ説明とカテゴリ一覧の間なら以下の通り)

    <!--■入口(卜ップ)ページ■-->
    <div id="index_area_1">
    <h1><span id="h1"><%blog_name></span></h1>
    <div id="setumei"><%introduction></div>
    <ul class="thumbnail">
    <!--topentry-->
    <!--body_img--><li class="tn_date_<%topentry_year><%topentry_month> tn_cat_<%topentry_category_no> tn_no_<%topentry_no>"><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_image_72></a></li><!--/body_img-->
    <!--/topentry-->
    </ul>

    <div class="parent_positioner menu">


  2. テンプレスタイルシート末尾にスタイル指定を加えて調整する
    例えば「サムネ上の余白100px・サムネを縦ではなく3個ずつ横並び・サムネ同士の間の余白10px・サムネの角を丸く・サムネ枠線薄グレー1px」での指定なら下記のように

    .thumbnail a { display: block/*インライン要素をブロック要素に*/; }
    .thumbnail img { vertical-align: top/*上下余白リセット*/; margin: 5px/*余白を四囲に5pxずつ*/; border: 1px solid #ccc/*枠線*/; border-radius: 10px/*角丸*/; }
    .thumbnail { width: 252px/*サムネ3個分の幅:(72px+1px*2+5px*2)*3=252px*/; margin: 100px/*サムネ上余白*/ auto/*中央合わせ*/ 0; }
    .thumbnail li { float: left/*横に並べる*/; }
    .thumbnail:after { content: ""; display: block; clear: both;/*float解除*/}


  3. 他、お好みでアレンジしてできあがり

    ◎記事へのリンクが不要なら手順1で「<a href="<%topentry_link>" title="<%topentry_title>">」と「</a>」を削除

    ◎サムネイル数を増やしたければ「環境設定→ブログの設定→記事の設定」内「記事(PC ページ別)」の数値を増やす

    ◎↑をした上で、新着情報の方は少なめにしたければ、手順2で下記も追加(4行表示の場合)(行数は青字の「68」を「17×行数」で調整:3行なら51、5行なら85)

    .news { line-height: 16px; height: 68px/*4行分:(16px+1px)*4=68px*/; overflow: hidden; }


    ◎特定の年月のサムネを非表示にしたければ手順2で下記を追加(yyyymmをその年月の数に)

    .thumbnail li.tn_date_yyyymm { display: none; }


    ◎特定のカテゴリのサムネを非表示にしたければ手順2で下記を追加(xをそのカテゴリ番号に)

    .thumbnail li.tn_cat_x { display: none; }


    ◎特定の記事のサムネを非表示にしたければ手順2で下記を追加(xxをその記事番号に)

    .thumbnail li.tn_no_xx { display: none; }


    ◎大きいサムネイルが良ければ手順1で「<%topentry_image_72>」の代わりに「<%topentry_image_w300>」を使う(その場合スタイルシート等も適宜変更)

  4. その他注意事項

    ◎表示されるサムネ数は「環境設定→ブログの設定→記事の設定」内「記事(PC ページ別)」の数のうち画像が本文に含まれる記事の数(-意図的に隠しているサムネ数)になるが、これがゼロになると余白だけが残って間抜けなので気をつける

    ◎ここで使っているテンプレート変数は、記事の「本文」に入れた「最初の」画像のみが対象になるが、二番目三番目の画像を使いたい、画像は「追記」に入れたい、又は記事そのものに画像は表示させたくない、といった場合は「本文」最上部にサムネ表示させたい画像タグを入れた上で「<!--」と「-->」でくくっておくとよい


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