共有テンプレート「Listen_blue」の仕様説明

共有テンプレート「Listen_blue（リスン・ブルー）」

初心者の方向けに製作した共有テンプレート「Listen_blue（リスン・ブルー）」が、本日承認されました。
「Listen_blue」は、「Listen（リスン）」の姉妹版として、ブログ内配布をしていたものですが（「Listen」のカスタマイズについて）、今回は、正式に申請をしてみることにしました。
以下では、仕様の説明と、利用にあたっての留意事項などを説明します。

また、このテンプレートでは、トップページに１０件ぶん程度を並べて、閲覧者さんが記事を選びやすいようになることを想定して、作っていますので、「環境設定」から、表示件数のほうを、変更されることをおすすめします。

仕様・取扱い説明

項目	詳細
テンプレートのコンセプト	Yahooからの移行者の方たちや、改造慣れのしない初心者の方で、文章をメインとしたブログを書いている方や、記事内に画像がない場合が多い方をターゲットとして想定し、作成にあたりました。
推奨利用ブラウザ	ChromeかFirefoxなど。IEでは、利用は可能ですが、製作者の意図したようには表示されない可能性があります。
トップページの仕様	サムネイルをかなり小さく取り、本文の抜粋がついたタイル状態です。 記事内に画像がない場合は、記事タイトルだけが表示され、「No Image」という表示にはなりませんので、自然に見えます。 【テストブログでの例】 ２列目の右側のセルが、記事内に画像がないときの例です。
メッセージボード	管理画面のプロフィール紹介文に書いた内容が、トップページの一番最初のページでのみ、カラム部分の「お知らせ」として、表示されます。その他のページでは、サイドバーの所定の位置に戻ります。 この機能が不要な場合は→「お知らせ」機能の削除手順と、カスタマイズをして使う場合の説明
記事の「古い順表示」について	記事の「古い順表示」を選択されている場合は、メッセージボードの表示がされませんが、これが仕様なので、ご了承願います。
レスポンシブ	ブレイクポイントは、けっこう細かく設定しました。 「環境設定」から、「スマホ版を非表示」に設定して、ご利用ください。 そうしないと、モバイルでは、このデザインが反映されません。
OGP設定について	このテンプレートでは、個別記事ページの下のページ送りには、次や前のページに記事内に画像がある場合には、その画像をサムネイル画像として表示するようになっています。 ですが、「OGP設定」を、「有効」にしておいていただかないと、表示されません。 そのため、「環境設定」の中の「メタタグの設定」から、「OGP設定」を、「有効」に変えてください。 また、記事内に画像がひとつもない場合には、画像は表示されません（基本的には）。 なお、jsについては、universal-zero氏がはてなブログで公開されていたものをアレンジさせていただきました。
リスト型ページャー	個別記事ページ以外のページャーには、ご本人の許可を得たうえで、hatena chips様のjavascriptを使用させていただきました。 FC2ブログ用の軽量なページネーションを作ったよ - hatena chips 今まで使っていたページネーションの仕様に少し不満があったので自作のものに置き換えました。割りと満足できるものになったのでスクリプトを公開します。難易度:... hatenachips.blog.fc2.com
改造について	ヘッダー画像については、このままお使いいただいてももちろんけっこうですが、お好みのものに変えていただいても、OKです。 推奨画像サイズは、1480px × 650pxです。 ただし、このテンプレートでは、ヘッダー画像の上部が、コンテンツ部分のサイドバーほかのタイトル部分の背景画像も兼ねていますので、それに合わせた画像を選ぶように、注意してください。 また、差し替え用の画像によっては、文字の色を変える必要があるかもしれませんので、その場合は→「Listen」のカスタマイズについて また、ヘッダー画像とシャボン玉のアニメーションエフェクトは、別々に設定していますので、ヘッダー画像を変えただけでは、シャボン玉のエフェクトは消えません。 シャボン玉のアニメーションエフェクトが不要だとか、そういう場合は→「Listen」のカスタマイズについて 今回は、ヘッダーには、大きな画像を使いますので、差し替える場合には、なるべく、以下のようなツールで↓軽量化をしてから、アップロードするようにしてください。面倒でも、あとあと、よかったということになります。 オンラインイメージ最適化ツール OptimizillaはJPEGやPNGフォーマットのイメージを最小サイズに圧縮する、高性能のイメージ最適化ツールです。 imagecompressor.com シンボルアイコン画像 は、CSSの1箇所のurlを変えれば、全部が変わります。また、推奨画像サイズは、300px × 300pxのpngで、縦横比が同じなら、だいたいOKです。 背景色は、お好みで自由に変更。 なお、カスタマイズ方法については、基本的には、「free_spirit」のカスタマイズページをご参照ください（ただし、Listenでは、ヘッダーの画像サイズが違うのと、トップページの仕様が大幅に違うので、不明な点があれば→「Listen」のカスタマイズについて、または個別相談で）。 共有テンプレート「free_spirit」のカスタマイズについて 共有テンプレート「free_spirit」のカスタマイズ：葉っぱのアイコン画像を変える 共有テンプレート「free_spirit」カスタマイズ：メニューバーとフッターの文字色を変更 共有テンプレート「free_spirit」カスタマイズ：上に戻るボタンの背景色と文字色を変更
Google 英数フォント	Cabin Sketch - Google Fontsを導入、年月日部分に使用。
Google Material Icons	実際に利用するのはたったの数種類であることから、軽量なこのアイコンフォントを搭載。
コメント欄本人アイコン	埋め込み済み。訪問者用には、草花のようなシンボルのイラスト画像。
コメント欄返信リンク機能	返信をクリックすると、投稿フォームへ移動し、自動で「Re:タイトル」が表示されるようになっている。
トラックバック	トラックバック利用可。
パンくずリスト	ナビメニューの下に、左寄せで設置しました。 親カテゴリには非対応で、子カテゴリの場合には、子のみが表示されます。 中央寄せで表示をしたい場合には、パンくずリスト用のCSSを以下に変えてください。 #breadcrumb{margin:0 0 20px;display:block;font-size:14px;text-align:center;}
新投稿記事に２４時間の間New!という赤い文字を表示（トップページと個別記事ページ）	使用させていただいたコードについては、「FC2ブログのテンプレート工房いたお様」より、メールにてご許可をいただきました。 新着記事に新着表示「NEW」マークを付けて目立たせる - FC2ブログのテンプレート工房 10plate.blog44.fc2.com
質問・相談等	ご相談は、随時お受けします。また、当方はプロではないので、無料のため、あまり混んでいる場合は、お待ちいただくこともあるかもしれません。 また、あまり大規模な改造で、当方が代替としてコードを全部書かなければならないようなケースは、遠慮させていただきます。
改造慣れしたブロガーさんの利用について	自力で改造をしていただければ、搭載した機能を利用しつつ、お好みの状態で使っていただけると思います。 ただ、HTML下部のjsを撤去すると、正常に動作しなくなりますので、jsは撤去しないでください。
不具合報告	不具合報告等は、随時歓迎いたします。 修正が必要な箇所が見つかれば、できるだけ、迅速に対処したいと思いますので、よろしくお願いいたします。
ファビコン	ファビコンについては、運営の指摘により、共有テンプレートに仕込むことは、認められないということなので、お引越しのそのあとは～FC2ブログでファビコンを設定してみよう～を参考に、ご自身で設置してください。
再配布	再配布は不可とさせていただきます。

注意事項

PC版で見た場合は、トップページが２列のタイルなので、記事タイトル部分は、２行を超えた場合には、省略するようになっています（あくまでも、トップページの話で、個別記事ページには無関係）。
そして、レスポンシブであるために、「記事タイトルの幅」というのは、閲覧するデバイスによって、違いますので、記事タイトルが長くて途中から省略されるかどうかは、閲覧時のデバイスによっても、違ってきます。
なので、そういう仕様だということを承知していただいたうえで、ご利用いただきたいと思います。
また、長い記事タイトルを常用されるブログの場合には、このテンプレートは、向いていません。

まとめ

先日の、全テンプレートを対象にしたバージョンアップ（９月２８日）の際に、「Listen_blue」についても、正式に申請してみようと思い立った次第です。
もしも、気に入ってくださる方がおられれば、幸いです。

トップページ等のアイキャッチ画像の上の日付を削除する場合

「テンプレートの管理画面」を開き、HTMLとスタイル編集（CSS）の両方から、削除部分を削除します。

HTML（上の枠）

<div class="blog_content_date_outer"><span class="blog_content_date"> <span class="blog_content_date_y"><%topentry_year></span><span>/</span><span class="blog_content_date_m"><%topentry_month></span><span>/</span><span class="blog_content_date_d"><%topentry_day></span> </span> </div> <!--▼newマーク▼--> <span class="new"> <script> nw(<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>) </script> </span> <!--▲newマーク▲-->

スタイル編集（下の枠）

最後のカンマも、忘れずに消す↓

.blog_content_sup .blog_content_date,

.blog_content_item .new{position:absolute;left:0;top:0;line-height:1.3em;}

.blog_content_date_outer{display:block;text-align:center;} 
body:not(#entry_page) .blog_content_date{display:block;margin:0 auto;box-sizing:content-box;padding:3px 5px;background:#f8f4e6;font-size:13px;font-family:'Cabin Sketch',cursive;font-weight:bold;color:#888;}

.blog_content_sup .blog_content_date>span{display:inline;}
.blog_content_date_y,.blog_content_date_m,.blog_content_date_d{margin:0 2px;display:inline-block;}

削除が終わったら、青い更新ボタンを押して、ブログを開き、確認し、できていれば、作業は終了です。

アップデート

2020/5/19リストタグ関係のCSS修正

リストタグ関係の修正をしました。
詳細は→拙共有テンプレートの一部修正について（リストタグ関係）

2020/6/4配布終了

2020/6/4配布終了しました。