FC2ブログでアイキャッチ画像付き関連記事を任意の場所に表示してみよう - 初心者でもできる画像の編集+加工

ブログURL変更のお知らせ

いつも「初心者でもできる画像の編集+加工」をご覧いただきありがとうございます。

このたび、ブログURLを変更しましたのでお知らせいたします。新しいURLは以下のとおりです。

新URL:http://gazocustomize.xyz/

旧URLにアクセスしても新しいURLに転送されるようになっています。

今後も「初心者でもできる画像の編集+加工」をどうぞよろしくお願いします。

GIMP編集
無料画像編集ソフトGIMP2.8で画像の編集+加工の記事一覧はこちら

スポンサーサイト

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

FC2ブログでアイキャッチ画像付き関連記事を任意の場所に表示してみよう

20170110.jpg

FC2ブログも「関連記事リストにアイキャッチ画像が表示」できるようになりましたね!
関連記事リストは当ブログでも表示させているのですが、
デフォルトでは、記事終了直後に表示するようになっています。
また、縦1列で関連記事リストが縦長になってしまうので、
今回は、アイキャッチ画像付き関連記事リストを2列にして任意の場所に表示してみよう!
当ブログでのデフォルトの場合、関連記事リストは以下のように表示します。
20170110-1.jpg


今までとは違い、アイキャッチ画像が付くことで、見た目も良くなったんですが、
関連記事リストが、左に寄って縦1列で、ずらずらと長くなって右が空いてるので、
レイアウト的には横2列にしたい感じです。

あと、記事文章終了後、記事下に固定表示されてしまうので、
指定の場所に表示したいですね。

関連記事リストにアイキャッチ画像を表示する設定


まず、関連記事リストにアイキャッチ画像を表示するように設定をしておかないと、
いつまで経っても表示されないので、設定を済ませておきましょう。

FC2ブログの「管理画面」から、
「設定」⇒「環境設定」⇒「ブログの設定」⇒「記事の設定」に進み、
「関連記事リスト アイキャッチ画像」をリストにアイキャッチ画像を「表示する」に設定し、「更新」をクリックします。
20170110-2.jpg


これで、個別の記事下に関連記事リストにアイキャッチ画像を表示できるようになりました。
参考:【ブログ】関連記事リストにアイキャッチ画像が表示できるようになりました!
今回は、任意の場所に関連記事リストを表示したいので、次の設定を進めていきます。

関連記事リストを指定の場所に設定する方法


アイキャッチ画像付き関連記事リストをあなたの表示したい場所に設定するには、
先ほど、「関連記事リスト アイキャッチ画像」をリストにアイキャッチ画像を「表示する」に
設定した画面にいきます。
「設定」⇒「環境設定」⇒「ブログの設定」⇒「記事の設定」から、
「関連記事リスト表示場所」リストを「テンプレート変数のみ」に表示するに変更して「更新」します。
20170110-3.jpg


今回、追加された関連記事リストのアイキャッチ画像の変数は「<%topentry_relate_thumbnail>」です。
<%topentry_relate_thumbnail>」を「<!--relate_list--> ~ <!--/relate_list-->」内で使うようです。
でも、「<!--relate_list--> ~ <!--/relate_list-->」内で「<%topentry_relate_thumbnail>」使ってもアイキャッチ画像のURLが表示されるだけです。
これをアイキャッチ画像表示するには、「<img src="<%topentry_relate_thumbnail>">」にします。

FC2ブログの関連記事リストをあなたの好きな場所に設置するには、
HTML内の「<!--topentry-->~<!--/topentry-->」なら、どこでもかまいません。
アイキャッチ画像の変数が入った以下のコードを、
「<!--topentry-->~<!--/topentry-->」内に追加してみます。
「<!--topentry-->~<!--/topentry-->」で囲まれたHTMLのところは、エントリー記事が表示する部分。
<!--▼アイキャッチ画像付関連記事・開始▼-->
<!--relate_list_area-->
<dl id="fc2relate_entry_thumbnail_area" class="relate_dl fc2relate_entry_thumbnail_on">
<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>"><img src="<%topentry_relate_thumbnail>"></a>
<a href="<%topentry_relate_url>"><%topentry_relate_title></a>
</li>
<!--/relate_entry_other-->
<!--/relate_list-->
</ul>
</dd>
</dl>
<!--/relate_list_area-->
<!--▲アイキャッチ画像付関連記事・終了▲-->

当ブログでの上記ソースの表示結果はというと、
20170110-4.jpg

アイキャッチ画像が表示されるようになりましたが、
リストマークの黒丸点が表示して、画像が144(px) × 144(px)でやけに大きくなって、
記事タイトルの位置が画像の右下になってしまいました。

これをCSS(スタイルシート)で調整してみます。
HTML・CSSをさわる前に必ずバックアップしておきましょう。

アイキャッチ画像付き関連記事リストをHTML&CSSで調整


したいことは、リストマークの黒丸点を消して、アイキャッチ画像を90(px)✕90(px)にして、
タイトルの位置を画像横の中央にもっていき、2列に変更してみます。

イメージ
20170110-5.jpg


リストマークの黒丸点を消して、アイキャッチ画像を90(px)✕90(px)にすることは、そんなに難しくないんですが、
リストを横2列にしてリストタグの中で、画像の横のテキストを中央揃えにするのに手こずってしまいました。

display:inline-block; vertical-align:middle;を使い、画像とテキストを2つのdivで囲んでみましたが、
うまくいかなかったので、flex-boxを使ってなんんとか思い通りに表示することができました。

最終的に作ってみたソースがこちら
<!--▼アイキャッチ画像付関連記事・開始▼-->
<!--relate_list_area-->
<dl id="fc2relate_entry_thumbnail_area" class="relate_dl fc2relate_entry_thumbnail_on">
<dt class="relate_dt">関連記事</dt>
<dd class="relate_dd">
<ul class="relate_ul">
<!--relate_list-->
<!--relate_entry_other-->
<li class="relate_li">
<div class="thumbnail_wrapper">
<div class="relate_entry_thumbnail_image">
<a href="<%topentry_relate_url>"><img src="<%topentry_relate_thumbnail>"></a>
</div>
<div class="relate_entry_String">
<a href="<%topentry_relate_url>"><%topentry_relate_title></a>
</div>
</div>
</li>
<!--/relate_entry_other-->
<!--/relate_list-->
</ul>
</dd>
</dl>
<!--/relate_list_area-->
<!--▲アイキャッチ画像付関連記事・終了▲-->


/*アイキャッチ画像付関連記事 */
#fc2relate_entry_thumbnail_area {
margin: 25px 0px 0px 0px !important;
padding: 15px 0px 5px 0px !important;
border: 1px #dddddd solid !important; /* 枠線の色 */
background: #fafafa !important; /* リスト背景色 */
-webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
}

#fc2relate_entry_thumbnail_area .relate_dt {
margin: 0 !important;
padding: 0px 20px 10px 20px !important;
border: 0 none !important;
border-bottom:1px solid #dddddd !important;/* 下線の色 */
box-shadow: 0 1px 0 rgba(255,255,255,1) !important;
line-height: 1.1 !important;
background: none !important;
}

#fc2relate_entry_thumbnail_area .relate_dd {
margin-left:0px;
overflow: hidden;
}

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul {
margin: 10px !important;
padding: 0 !important;
overflow: hidden;
}

#fc2relate_entry_thumbnail_area .relate_dd .relate_ul li {
width: 50%;/* 2列は50% 3列は33.3% */
height: 107px;
float: left;
list-style: none;
border-bottom:1px solid #dddddd;/* 下線の色 */
box-shadow: 0 1px 0 rgba(255,255,255,1) !important;
}

#fc2relate_entry_thumbnail_area .relate_entry_thumbnail_image img {
padding: 2px !important;
margin: 5px !important;
width: 90px !important;/* 画像の大きさ */
height: 90px !important;/* 画像の大きさ */
border: 1px #dddddd solid !important;/* 画像の枠線 */
}

.thumbnail_wrapper {
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
align-items: center;
}

.thumbnail_wrapper> *{
flex:1 1 auto;
}

.relate_entry_String {
word-break: break-all;
line-height: 1.2em;
padding:1em;
}

#fc2relate_entry_thumbnail_area .relate_li a{
text-decoration: none !important;/* テキスト下線なし */
}

#fc2relate_entry_thumbnail_area .relate_li a:hover{
text-decoration: underline !important;/* マウスホバーでテキスト下線あり */
}

CSS(スタイルシート)の各プロパティ:の値に「!important;」を使っています。
!important;」を記述すると、通常の優先順位に関係無くスタイルが優先されます。

今回、関連記事リスト内に現在開いている記事・日付を表示しないようにしているのと、
リストに背景色・枠線、アイキャッチ(サムネイル)画像に枠線をつけています。

変更後の関連記事の表示結果は、
20170110-6.jpg


関連記事リストにアイキャッチ画像が表示されるようになり、
記事タイトルも中央に揃えることができました。

今回のカスタマイズでは、記事の中に画像がない場合や記事の設定でアイキャッチ画像を設定していない場合は、
以下のように何も表示されず抜け落ちてしまうので、注意してくださいね。
20170110-7.jpg


FC2ブログで、サムネイル代替画像の設定が追加されたみたいです。
参考:【ブログ】記事サムネイルの代替画像を表示する機能を追加しました

どうやら、テンプレートにサムネイル関連の変数が設定されている箇所に、
<!--body_img-->、<!--body_img_none-->の変数を使用することで、
画像がある場合とない場合の表示内容をコントロールできるみたいなので、
次回試してみたいと思います。
この記事を読んだ人はこんな記事も読んでます




Comment
非公開コメント

Track Back

http://gazocustomize.blog.fc2.com/tb.php/135-d0634502

スプレッドで比較

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