ヒビコレ

iPhone使いの携帯・スマホ関連の雑記ブログ

2717930.jpg

FC2ブログに画像付き新着記事のプラグインが追加!代替画像も選択可→【更新】記事下にも設置

カスタマイズ』カテゴリの関連記事

スポンサードリンク

後述している昨日紹介したFC2ブログの新プラグインの 最新記事のサムネイル付きプラグイン

今回は自分用のメモ書きとして、これを記事下(HTML内)にも表示させます

方法はプラグインを選択し、[プラグインの改造]→[HTMLの編集]で中にあるコードをコピペするだけなのですが、そのままペーストすると日付が表示されない。

dcewqe (1)

日付を表示するために以下の箇所を変更。

削除:<span class="fc2_recent_entry_thumb_date">&dateformat</span>

追加:[<%recent_month>月<%recent_day>日]


上記を変更して日付も問題無く表示。

adew.jpg

以下が公式プラグインの[最新記事 (サムネイル付)]を利用したHTML用タグ。

<dl class="relate_dl">
<dt class="relate_dt" style="text-align: center;">新着記事</dt>
<style type="text/css">
#fc2_recent_entry_thumb_703713{padding:0 5px}
#fc2_recent_entry_thumb_703713 .fc2_recent_entry_thumb_link{display:table;table-layout:fixed;width:100%}
#fc2_recent_entry_thumb_703713 .fc2_recent_entry_thumb_img,#fc2_recent_entry_thumb_703713 .fc2_recent_entry_thumb_text{display:table-cell;vertical-align:middle;padding:9px 0;line-height:1.4em}
#fc2_recent_entry_thumb_703713 .fc2_recent_entry_thumb_img{padding:4px 0;width:84px}
#fc2_recent_entry_thumb_703713 .fc2_recent_entry_thumb_img img{margin: 0 9px 0 0;padding: 0;width:72px;height:72px}
#fc2_recent_entry_thumb_703713 .fc2_recent_entry_thumb_text{width:100%;word-break:break-all}
#fc2_recent_entry_thumb_703713 .fc2_recent_entry_thumb_link:hover .fc2_recent_entry_thumb_img{opacity:.9}
#fc2_recent_entry_thumb_703713 .fc2_recent_entry_thumb_blogtitle,#fc2_recent_entry_thumb_703713 .fc2_recent_entry_thumb_date{display:block;word-wrap:break-word}
#fc2_recent_entry_thumb_703713 .fc2_recent_entry_thumb_date{font-size:.8em}
</style>
<div id="fc2_recent_entry_thumb_703713">
<!--recent-->
<div class="fc2_recent_entry_thumb_item" &align>
<a class="fc2_recent_entry_thumb_link" href="<%recent_link>" title="<%recent_title>">
<span class="fc2_recent_entry_thumb_img"><!--recent_image_72_with_alt--></span>
<span class="fc2_recent_entry_thumb_text">
<span class="fc2_recent_entry_thumb_blogtitle"><%recent_title></span>
[<%recent_month>月<%recent_day>日]
</span>
</a>
</div>
<!--/recent-->
</div>
</dl>


今回のプラグインで選択肢は広がっていいいのですが、問題はそれをどう活かすか。この辺はセンスが問われるので難しい所。

【以下2016年11月14日 投稿記事】

FC2ブログを利用ユーザーには嬉しい機能が公式に追加されました。

それは 新着記事のサムネイル画像付きプラグイン

img1479124944815.jpg

使い方は簡単で[公式プラグイン追加]→[最新記事 (サムネイル付)]を追加するだけで新着記事が画像付きになります。今回のプラグインはスマホ用のプラグインにも対応。

rerfwerf.jpg

*表示記事数は[環境設定]→[ブログの設定]→[記事の設定]→[最新記事一覧]で表示件数をお好みで変えて下さい。

新着記事に画像を付けるにはやりようによっては表示は出来ていた。最近では記事下にブログパーツの「FeedWind」を利用して新着記事を表示させてます。

ブログの記事下に最適!サムネイル画像付き記事一覧を表示可能な FeedWind を導入

001 (2)


上記は設定によりランダム表示も出来ますが、今回の公式の画像付き新着記事プラグインが加わったことで、様子を見てこの辺の表示を変えていきます。

ここでもう一度冒頭の画像を見ていただきたいのですが、もう一つ機能が追加されています。

それは 記事サムネイルに代替画像を表示 させる設定。

このブログでは自分の文章力の低さを補うために画像は必ず入れるようにしています。

またブログの投稿を自動でTwitterに上げるようにしていますが、その際にTwitterCardの設定をしていれば記事内の画像付きでTwitterに更新通知を上げることが出来ます。

Twitterへのブログ更新通知に画像を付ける

dacse.png

記事の加筆・修正時にもTwitterに上げるようにしていますので、フォローしてくれると嬉しい(705んk(@musiatui)さん | Twitter)。

Twitterに関して昔から利用はしていますが、未だにルールや機能がよく分かっていない。メッセージを貰ってもどうしたら良いかわからないので、何かある場合はブログのコメントでもらえると対応しやすい。

代替画像の設定は[環境設定]→[ブログの設定]→[サムネイル代替画像の設定]で変更。

この代替画像に対応するのは3つ。

・画像付きの関連記事リスト
・画像付き最新記事一覧プラグイン
・テンプレートにサムネイル関連の変数が設定されている箇所


FC2総合インフォメーション 【ブログ】記事サムネイルの代替画像を表示する機能を追加しました


今回の新着記事にも対応という事で早速でどのように表示されるかテスト。代替画像はFC2が用意しているデフォルト(No image)を選択。記事は画像を掲載せずに投稿。

結果は 問題無く機能しています

cdqweqw.png

本機能は記事によって画像を掲載しない人がありがたい機能だと思う。また個人的には過去の画像が不手際で消えている物があるので、それも自動で対応してくれるので助かる。

代替画像もこだわりたい方は、高品質・高解像度のフリー写真素材を提供している ぱくたそ さんがオススメ。

ぱくたそ-フリー写真素材・無料ダウンロード

ぱくたそさんは、このブログでも散々お世話になっていて、その中でもLala*さんを多用しています。

また以前上記の方の画像がもっと欲しいと書いたら、実際にその後すぐに対応してもらえた。私以外からの要望が多かったのもあると思うが、フットワークは軽いと思うので、この画像がもっと欲しいという方は要望を出してみてください。

ぱくたそ超絶人気モデルの Lala*さん の新作画像がそろそろ欲しい件→【画像追加】感謝と更なる画像希望

画像の縮小や代替画像に文字を入れたい方は、以下の記事でおすすめサイトを掲載していますので参考にどうぞ。

ブログ更新時に利用している超おすすめサイトの紹介

今回追加された物は前々から公式で対応して欲しい機能でした。気持ち的にはスラムダンクのメガネ君的な。追加してもそれほどアクセス数に影響を及ぼすものでもないと思うが、これを上手く使ってアクセス数を増やしていきたい。

 カスタマイズ

 FC2 ブログ カスタマイズ 新着記事 サムネイル画像

スポンサードリンク

今日の人気ページ

Fireタブレットが4,000円OFF-

0 Comments

コメント *クリック