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

mineoおすすめ契約方法

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

2016.11.15 | カテゴリ:ブログ/カスタマイズ

後述している昨日紹介した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ブログカスタマイズ:関連記事の表示
ブログへのYouTune埋め込み動画をスマホ用にサイズを自動変換
軽いSNSボタンをまとめてブログに設置
FC2ブログで画像付き関連記事を表示させる[Milliard関連ページプラグイン編]

関連タグ:

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

Fire7hklk.png   Fire7HD8300x250.jpg  

この記事へコメントする・コメントを見る (0)

今日の人気ページ

fire600.jpg

新着記事

全裸待機禁止Tシャツ企画進行中!? NifMoのTwitterが面白い [08月20日]
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」 を紹介!AppStoreから削除される前に入手を [08月19日]
iPhoneのバッテリー診断アプリの決定版 「Battery Life」【悲報 再削除】 [08月18日]
Googleが警告を出すので早期のFC2ブログのSSL化を求む [08月18日]
セブンスター仕様1935レプリカZippoが当たるQRコードキャンペーンに挑戦[2017年8月1日-10月31日] [08月15日]
JTが電気加熱型たばこ『Ploom TECH』の抽選販売受付を開始【第5回目】 [08月11日]

mineo紹介キャンペーン
最新記事
2016年人気記事ランキング
Apple公式のiPhoneのバッテリー診断方法 [2017年最新版] dsgre.jpg
iPhoneのバッテリー診断アプリの決定版 「Battery Life」 rank20160605 (3)
iPhoneのホーム画面のアイコンの位置を自由に変更する裏ワザthdth.jpg
クリックポストの配達日数を実際に体験した日数と目安の調べ方を紹介rank20160605 (10)
iPhoneのバッテリーの劣化を調べるiOSアプリ 「coconutBattery」hjkh.jpg
PHILIPS(フィリップス) ソニックケアーを修理に出す60409121432820.jpg
FREETEL Simple2はまさかの3種類展開と1年間無料キャンペーン開始FREETE.jpg
iPhoneのバッテリー診断アプリ「Battery Doc」と「Battery Care」を紹介dndeth.jpg
あのiPhoneのバッテリー診断アプリ「coconutbattery」がAppStoreに復活!→【再削除】→iOS10でアプリも起動せずhjkh.jpg
ドコモ「Xiパケ・ホーダイ for iPhone」を解約(廃止)rank20160605 (6)
Amazonのタブレット Kindle Fire HDで自炊漫画を読むblog-entry-1037.jpg
iPhone最強の広告ブロックアプリ 「AdBlock」 がiOS10で復活yfyfghjv.png
docomo契約SIMカードは差し替え注意201620.jpg
メルカリ 返金までの流れを実体験 その5 「返金(取引キャンセル)編」23131.jpg
ドコモ Xiパケ・ホーダイ for iPhoneを解約(廃止)の注意点201615.jpg
mineo紹介キャンペーンの甘い罠→【再延長】2017年1月31日まで→【仕様変更】一部条件で特典がEJOICAセレクトギフトに201616.jpg
ドコモのパケットサービスを解約しようとするが問題発生201617.jpg
iPhoneバッテリー診断アプリの信憑性gufddcrt.jpg
メルカリ 返金までの流れを実体験 その1 「商品破損編」rank20160605 (9)
docomo iPhone契約SIMをガラケーに挿す201613.jpg
記事を探す
サイト内検索
  • iPhone/全般(50)
  • iPhone/アプリ(53)
  • iPhone/アイテム(39)
  • MVNO(54)
  • MVNO/mineo(124)
  • MVNO/NifMo(19)
  • MVNO/0SIM(10)
  • FREETEL/Simple/Simple2(43)
  • タブレット(29)
  • ケータイ/スマホ雑記(29)
  • ケータイ/スマホNEWS(233)
  • NM705i/6120c(2)
  • 705NK/N73(94)
  • Nokia E51(42)
  • 雑記(95)
  • ブログ記事録(105)
  • ブログ/アクセス数公開(30)
  • ブログ/カスタマイズ(34)
  • プリペイド/プリモバイル(13)
  • デジカメ(4)
  • LINE(14)
  • IQOS/PloomTECH/Zippo(23)
  • アンケート(3)
  • MVNO2台持ち用 通話専用機種(30)
  • NOKIA その他(3)

  • 月別一覧を開く

    関連ワード一覧を開く

    全記事一覧表示
    Author
    ペンギンのアイコン素材管理人:705んk
    @musiatui | Twitter

    iNoWBh.png

    管理人利用中アイテム
    カテゴリ別記事一覧