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

共有テンプレート「assembly（アセンブリー）」

初心者の方向けに製作した共有テンプレート「assembly（アセンブリー）」が、本日承認されました。
とにかくヘッダーを強調したい方向けに、ヘッダー画像を大きく取っています。
もちろん、自前の画像に差し替えて使っていただくことを、想定しています。
以下では、仕様の説明と、利用にあたっての留意事項などを説明します。

仕様・取扱い説明

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

まとめ

今回は、ヘッダー部分を強調したい方向けに、大きな画像の使用を想定して、作ってみました。
できれば、当方の意図したようなユーザーさんの目に留まって、快適なブログライフの一助になることを、願っています。

アップデート

2019/8/16記事内見出し関係の修正

2019/8/15までにダウンロードした方が対象。
詳細は【お知らせ】拙テンプレートの修正について

2019/09/28大規模バージョアップ

詳しくは→共有テンプレートのバージョンアップについて - 共有テンプレートをご覧ください。

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

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

2020/6/4配布終了

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

「assembly」に記事投稿時刻とコメント投稿時刻を設置する

時刻の追加についてですが、これについては、HTMLの５か所に、タグを追加していただく必要があります。

トップページ他

まず、トップページ他のサムネイルつき一覧ページ状態のページの時刻のぶんです。

&nbsp;<%topentry_hour>:<%topentry_minute>

を、<%topentry_day>の直後に入れます。

個別記事ページ

&nbsp;<%topentry_hour>:<%topentry_minute>

を、以下の位置に入れます。

記事一覧ページ

&nbsp;<%titlelist_hour>:<%titlelist_minute>

を、以下の位置に入れます。

検索結果ページ

&nbsp;<%topentry_hour>:<%topentry_minute>

を、以下の位置に入れます。

コメント

&nbsp;<%comment_hour>:<%comment_minute>

を、以下の位置に入れます。
記事一覧ページとコメント欄のぶんの追加タグは、記事部分や検索結果ページのタグとは、違いますので、間違えないように、ご注意ください。
よろしくお願いいたします。

リンク色を変更する

まず、好みの色を選んでおいて、以下の場所（２箇所）の「色番号」を、変更してください。
そして、いつもどおりに、青い更新ボタンを押します。

サイドバーの「最新コメント」の名前部分を白抜きにする

1. 「プラグインの管理」から、「最新コメント」を開きます。
2. そして、以下の部分を、まるっと貼り換えてください。
   コードは、必要に応じて、以下の二種類から選んでください。
   
   • 現在の状態のまま、名前だけを白抜きにしたい場合
     <ul> <!--rcomment--> <li &align> <a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><span class="rc_name"><%rcomment_name></span><%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a> </li> <!--/rcomment--> </ul>
   • 拙ブログと同じにしたい場合（コメントタイトルを入れる場合）
     <ul> <!--rcomment--> <li &align> <a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><span class="rc_name"><%rcomment_name></span><%rcomment_title>「<%rcomment_etitle>」 (<%rcomment_month>/<%rcomment_day>)</a> </li> <!--/rcomment--> </ul>
3. 青い設定ボタンを押す。
4. 次に、「スタイルシート編集」に、CSSを追加します。
   場所は、一番下でも構いません。
   ただし、追加する前に、#65318eを、「好みの色番号」に変えてください。
   

   /*------------最新コメント--------------*/
   .rc_name{display:inline-block;margin:0 5px 3px 0;border-radius:3px;padding:2px 10px;background:#65318e;color:#fff;font-weight:bold;}

5. 青い更新ボタンを押す。
6. ブログを開き、できているかどうかを確認し、できていれば作業は終了です。