拙テンプレート限定のサイドバー「最新記事」パーツのカスタマイズ

サムネイル画像

サイドバーの「最新記事」パーツの改良

さて、拙テンプレートのバージョンアップに伴い、以前からご利用の方には、再ダウンロードや、改造コードの積み替えなどの、種々のご迷惑をおかけしているところです。
今回は、さらによりよいブログ環境のために、サイドバーの「最新記事」パーツの改良方法を、考えてみました。
ここで紹介する方法は、基本的に、拙テンプレートのバージョンアップ以降のテンプレート向け(New!機能の自力取り込みも含む)ぶんに限ります
というのは、
  • いたお様のNew!機能コードをheadで読み込んでいること。
  • jQueryのライブラリを、プラグインよりも上で読み込んでいること。
が、条件だからです。
ですので、今回の「New!機能コード」を取り入れず、jQueryのライブラリをプラグインよりも上で読み込んでいない場合には、動作しません(正確には、jQueryでは、エラー除けの画像altを仕込んでいるだけなので、もとのjsを積んでいれば、動作はする)。
ご許可をいただいた「FC2ブログのテンプレート工房」様↓

「最新記事」パーツの改良版の仕様

機能概要
各記事のサムネイル画像を表示ここでは、72px大のもともと小さな画像で読み込むための変数を使い、60px大で表示をさせています。 もともと小さい画像で読み込むため、画像読み込みの負担は、それほどでもないと思います。
また、記事内に画像がない場合には、「No Image」という文字を表示するようにしました。
記事の更新から24時間は、「New!」という赤い文字を、記事タイトルの右に表示する。これは、いたお様のコードをもともと読み込んでいるために、表示をさせたい箇所に、サイドバー用の別の変数を組み込んだscriptを設置してやれば、同じように表示をすることができます。

見本

最新記事見本

手順

  1. まず、バージョンアップを済ませる(再ダウンロードか、利用中のテンプレートへの機能の取り込み→共有テンプレートのバージョンアップについて )。
  2. 次に、公式プラグインの「最新記事」の「詳細設定」を開く。【HTMLの編集】というところをクリックすれば、タグの中身が出てくる。
  3. 中身が出たら、以下のコードにまるっと貼り換える
    貼り換えなので、もともと入っていたコードは、全部消して、残したりしないように注意。
    最新記事貼り換え
  4. 青い「設定」ボタンを押して、保存する。
  5. 次に、「テンプレートの管理」を開き、下の方の「スタイル編集(CSS)」に、以下を追加する。位置は、一番下でもいい。
    /*-------最新記事パーツ用---------*/  
    #recent_plug{margin:0 -10px;display:flex;flex-wrap:wrap;/*IE対策*/}
    #recent_plug>li{display:flex;flex-wrap:wrap;margin:0 0 5px 0;}
    .l_right_area .plugin_right_content .recent_img{margin:0 10px 0 0;width:60px;height:60px;display:block;flex-shrink:0;padding:0;}
    .recent_img>img{width:100%;height:100%;} 
    .recent_title{display:block;width:calc(100% - 70px);text-align:left;}
    a.recent_img:empty{position:relative;}
    a.recent_img:empty:before{content:"No Image";white-space:pre;width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;position:absolute;left:0;top:0;background:#f5f5f5;font-size:9px;font-weight:bold;color:#888;}
  6. ↓エリア変数の削除作業をする。
  7. 青い「更新」ボタンを押して、保存する。
  8. ブログを開き、ちゃんとできているかどうかを確認する。
  9. できていれば、作業は終了。

追記:2019/10/3【エリア変数の削除】

このカスタマイズをした場合には、head内のscriptを囲んでいるエリア変数(適用ページを指定している変数タグ)を、削除してください。

削除するタグ

【囲んでいる上のぶん】
<!--not_titlelist_area--><!--not_search_area--><!--not_edit_area-->
【囲んでいる下のぶん】
<!--/not_edit_area--><!--/not_search_area--><!--/not_titlelist_area-->
エリア変数の削除

お好みでのカスタマイズについて

自力で改造ができる人は、お好みで調整をしていただければと思います。
  • また、サムネイル画像の大きさについては、CSSの
    • .recent_imgのところのwidthとheight
    • .recent_titleのところのwidth:calc(100% - 70px);
    の3箇所で指定していますので、変える場合には、3箇所全部を変えてください。
  • 記事内画像がない場合の表示のカスタマイズは、a.recent_img:empty:beforeのbackgroundの色番号や、文字色color:#888;などを変えてください。
    「No Image」という言葉自体を変えたい場合には、そこを直接書き直してください。空白は有効になります。
  • 画像を丸くしたい場合は、.recent_img>imgとa.recent_img:empty:beforeの2つに、border-radius:50%;を追加します。
関連記事

コメント

コメント(16)
トホホ・・・
すみません、出来の悪い私です。
「最新記事パーツ」の改造は、文字を読む必要は、特になく、コピペのみなので、すぐにできるかと思います。
ということで、上記2つをコピペしたのですが、出来たのですが、最新記事が二つ(写真ありと写真なし)になってしまいました。
最初の①のバージョンアップはしていません。2~8の手順は全てやりました。
またご指導お願いします。ホンマ訊いてばかりで自分が情けなくなります。(泣)

柴犬マイア

2019/10/02 06:26 URL 編集返信
Janedoe1471
To 柴犬マイアさん
拝見しましたが、たぶん、最新記事パーツの中身が、そっくりそのまま残っていると思います。
「貼り換え」なければならないので、もともと入っていたコードは、全部残さず消す、という意味なのですが、私の説明がよくなかったのかもしれません。
最新記事パーツの詳細の中身に、もともと入っていたコードを、全部消してみて、今回の改造用のコードだけになるように、してみてください。

Janedoe1471

2019/10/02 16:39 URL 編集返信
おバカな私・・・・
本当にすみません~。
間違えて「最新記事」に貼るコードを「最新コメント」にも貼ってしまいました。
「最新コメント」の元のコードを教えていただけませんでしょうか?
「最新記事」は直りました。ありがとうございます。
ホンマにお手数ばかりかけて申し訳ありません。

柴犬マイア

2019/10/03 05:59 URL 編集返信
Janedoe1471
To 柴犬マイアさん
最新記事パーツのほうは、できていることを確認しました。
また、最新コメントパーツについては、特に改造はしていませんので、いったん削除をして、公式プラグインの追加で、新しいのを設置すれば、それでよいはずです。
また、バージョンアップの手順のうち、「記事下ページャーの調整のコード」は、入っていないようですので、それについても、お願いいたします。
スタイル編集(CSS)に、以下を追加です。
.pager_next{flex-grow:1;}

Janedoe1471

2019/10/03 13:47 URL 編集返信
ご案内御礼
こんにちは。
コメントありがとうございます。さっそくサイドバーの最新記事カスタマイズをやってみました。コピペで楽々で…。ご案内くださり、御礼申し上げます。
できればヘッダーの写真もかえたり、ファビコンを設定してみたりしたいとは思っているのですが、じつのところなかなか手がつかないままでいます。
ところで、ファピコン用やアイコン用の画像はどんなところで探せますか?私はそういうサイトのことは疎いので、教えていただければ幸いなのですが…。

さきた☆たまき

2019/10/03 16:33 URL 編集返信
Janedoe1471
To さきた☆たまきさん
今回は、再ダウンロードで、お手数をおかけいたしました。
これで、本格的なバージョンアップが済んだので、改造には、ちょうどいい時期だと思います。
また、次の記事を更新されたときに、今回導入した「New!」という文字が、ちゃんと出るかどうかを確認していただければと思います。

ファビコン用の画像ですが、ファビコンというのは、小さく表示されるので、選び方は、難しいかもしれませんが、シンプルで、くっきりしているもののほうが、普通は、よいとされています。
また、普通の四角い画像よりは、一部分が透過されている画像のほうが、見た目は、いいかもしれません。
以下のようなサイトを参考に、いいファビコン素材を配布している場所を、探していただくと、よろしいかと思います。
https://goworkship.com/magazine/favicon-create-matome/
https://coliss.com/articles/build-websites/operation/design/688.html

また、もっと自分風味のブログにしていくためには、そろそろご自身で選んだヘッダー画像への差し替えも、されたほうがよろしいかもしれませんね。
その場合に、もしも、ブログタイトルの文字色の変更などが必要になれば、また、ご相談ください^^

Janedoe1471

2019/10/03 17:06 URL 編集返信
Janedoe1471
To さきた☆たまきさん
申し訳ありません、もうひとつ作業を追加させていただきました。
記事内の「追記:2019/10/3【エリア変数の削除】」という部分ですが、エリア変数タグの削除のほうをしておいていただくと、サイドバーのNew!という文字が、検索ページ、記事タイトル一覧ページ、コメント編集ページでも表示されます。
お手数をおかけいたしますが、よろしくお願いいたします。

Janedoe1471

2019/10/04 00:37 URL 編集返信
Janedoe1471
To 柴犬マイアさん
柴犬マイアさんも、申し訳ありません、もうひとつ作業を追加させていただきました。
記事内の「追記:2019/10/3【エリア変数の削除】」という部分ですが、エリア変数タグの削除のほうをしておいていただくと、サイドバーのNew!という文字が、検索ページ、記事タイトル一覧ページ、コメント編集ページでも表示されます。
お手数をおかけいたしますが、よろしくお願いいたします。

Janedoe1471

2019/10/04 00:37 URL 編集返信
ありがとうございました!!!
なんとか全てできたと思います。
何度も質問を繰り返してお手を煩わせて申し訳ありませんでした。
今、更新記事をあげました。確認したら一応できていると思うのですが・・・。
今後ともよろしくお願いします。

柴犬マイア

2019/10/04 07:40 URL 編集返信
Janedoe1471
To 柴犬マイアさん
はい、今拝見いたしました。お疲れさまでした。
こちらこそ、バージョンアップで、お手数をおかけしてしまいました。
今後とも、よろしくお願いいたします^^

Janedoe1471

2019/10/04 12:08 URL 編集返信
追加の作業もしてみました
こんにちは。
今日、『追加の作業』もしてみました。できましたが…、プレビューのときにカテゴリーとコメントの項目がずれて表示されて「あれ?」と…。でも更新ボタンを押し、実際の画面を見てみればちゃんとしていました。なのでたぶんできているとは思うのですが、どうでしょうか?
それからファビコンの件でサイトを教えていただきありがとうございました。たくさんあって選択が難しいですが、とりあえずは作ってみようと思います。
ヘッダーのカスタマイズの件も…。この先なにかありましたら、そのときはよろしくお願いいたします。

さきた☆たまき

2019/10/04 15:43 URL 編集返信
Janedoe1471
To さきた☆たまきさん
はい、お手数をおかけいたしました。

そうなんです、FC2のテンプレート編集のプレビュー画面というのは、フォントアイコンを読み込まないので、実際に更新をしてみれば、できているんですが、プレビューの時点では、サイドバーのタイトルパーツの左側にあるアイコンが、出現していないのですが、プレビュー機能の問題なので、実際には、問題はありません。
ヘッダー画像も、みなさん、お気に入りの画像がたくさんあって、迷われるようですが、画像によっては、ブログタイトル文字の色の変更が、必要になるかもしれませんので、そのときには、また、お声をおかけください^^
また、ヘッダー画像は、あまり重いと、いけませんので、一度軽量化ツールにかけてから、アップロードしたほうが、よろしいと思います→https://imagecompressor.com/ja/

Janedoe1471

2019/10/04 15:56 URL 編集返信
「New!」が出てきません
こんにちは。先日はどうもお世話になりました。
ところで本日やっと最新記事をアップしました…が、肝心の「New!」の表示が出てきません。下書き扱いしてからアップしたせいでしょうか??

さきた☆たまき

2019/10/10 16:06 URL 編集返信
Janedoe1471
To さきた☆たまきさん
そうですか、調べてみますので、少しお待ちください。

Janedoe1471

2019/10/10 18:29 URL 編集返信
解決しました
お忙しい中調べていただきまして恐れいります。
教えていただいた通り修正をし、テスト記事をアップしてみたところ、『New!』の表示がつきました。どうやら「>」を削除してしまったようですね。この程度ですんだのでよかったですが、消してしまうものによってはテンプレートを壊してしまうところでした。
以後気をつけたいと思います…。
本当にありがとうございました。

さきた☆たまき

2019/10/11 15:38 URL 編集返信
Janedoe1471
To さきた☆たまきさん
はい、ただいま、テスト記事のほうを拝見し、直っているということを確認いたしました。
バージョンアップ等、今回は、いろいろと、お手数をおかけいたしました^^

Janedoe1471

2019/10/11 15:45 URL 編集返信
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

Author:Janedoe1471 この写真とはまったく違うおばさんです。
が、気持ちだけは、いつまでも、こういう感じでいたいと思っています。

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

検索フォーム