共有テンプレートのバージョンアップについて

共有テンプレートのバージョンアップについて

さて、拙作の共有テンプレートでは、このたび、よりよいテンプレート環境の提供を目指して、全種類のテンプレートを対象に、かなり大幅なバージョンアップを行いました。
本日ダウンロードをされるぶんからは、以前と比べ、以下のような変更を加えております。

【新機能】

項目	概要
パンくずリスト	ナビメニューの下に、左寄せで設置しました。 親カテゴリには非対応で、子カテゴリの場合には、子のみが表示されます。
個別記事ページに投稿時刻を追加	個別記事ページの日付の右側に表示されるようにしました。
コメント欄に投稿時刻を追加	コメント投稿の時刻を追加しました。
新投稿記事に２４時間の間New!という赤い文字を表示（トップページと個別記事ページ）	使用させていただいたコードについては、「FC2ブログのテンプレート工房いたお様」より、メールにてご許可をいただきました。 新着記事に新着表示「NEW」マークを付けて目立たせる - FC2ブログのテンプレート工房 10plate.blog44.fc2.com
記事一覧が1000件を超えたときのページャーを追加	FC2の記事一覧ページは、１ページあたりが1000件まで表示されますが、1000件を超えた場合に、積み込んでいるリスト型ページャーが機能していないことに気がついたため。
「assembly」の記事幅を100px広げた	「assembly」の記事幅を100px広げました。最大記事幅は、730pxになりました。

【修正】

項目	概要
ヘッダー下ナビにflex-wrap:wrap;を追加	ナビメニューの数を増やしたときに、スマホで二段になるようにするため。
トラックバックのセルの右marginを削除	もとのテンプレート（公式）に、なぜか右marginがもともとついていたが、不要なので削除。
最新記事の記事下のページャーを右に寄せるための修正	一番新しい記事では、記事下ページャーが左に寄っていて、不自然だったので、これを修正しました。
コメント欄の不要なセレクタを削除	pでdivを囲むというのは、整合性がないので、バリデートでエラーが出るため。もともとのテンプレート（公式）でそうなっていたが、おかしいし、要らないので、この機会に削除することにしました。

そのため、お手数ですが、

1. 特に改造をしていない方は、再ダウンロードをおすすめいたします。
   再ダウンロードの際には、「同じ名前のテンプレートのダウンロードはできない」ので、現在ご利用のものの「テンプレート名」を、ちょっとでも変えれば、新バージョンの再ダウンロードが可能です。
   例えばですが、「free_spirit」を、「free_spirit1」にするとかで、OKです。
   
2. 改造を施している方の場合には、改造箇所の数と、今回のバージョンアップによる編集箇所とを比べていただいて、なるべくなら、再ダウンロードをされたうえで、新バージョンへの改造箇所のコードの積み替えを、おすすめいたします。
3. 改造部分が多くて複雑であるような場合で、再ダウンロードが難しいという場合には、上記の機能のうち、「取り入れたい機能」や、「修正箇所」のコードを、個別に積み込んでください。その方法については、以下で説明します。

初期ダウンロードの場合のファビコンについて、

また、初期にダウンロードをされた場合で、自動ファビコン機能がついているバージョンをご利用中の方の場合には、再ダウンロードをしたあとは、ファビコンが表示されなくなりますので、その場合には、→お引越しのそのあとは～FC2ブログでファビコンを設定してみよう～を参考にされたうえ、ご自身でファビコンを設定し直してください。

記事内容とサイドバーには無関係

また、再ダウンロードをした場合に、これまでの「記事内容」については、一切、影響はありませんので、記事の修正作業は、不要です。
また、サイドバーについても、影響はありません。

「Listen_blue」について

ブログ内限定の配布だった「Listen_blue」については、今回、共有テンプレートのほうに、正式に申請中です。
もしも承認がされれば、来週くらいには、共有テンプレート一覧に、並ぶのではないかと思われます。
その前にバージョンアップを済ませたいという方の場合には、以前と同じページ（「Listen」のカスタマイズについて - Listen）の下のほうに、新しいHTMLとCSSを貼っておりますので、そこからコピペをして、HTMLとCSSの両方を、貼り換えてください。

これまでに配布したテンプレートのうち、機能に差があるものについて

拙テンプレートの一覧は、現在申請中で過去にブログ内限定配布だった「Listen_blue」を除けば、拙テンプレートの一覧で、ご覧になることができます。
このうち、natural_time・Bonbori・Girlieの３作については、部分的に、今回の新機能が積んであります。
そのため、この３つのうちのどれかをご利用の方の場合に、再ダウンロードではなくご自身で機能を追加するという場合には、すでに積んである機能については、今回のバージョンアップで再度積み込む必要はありません。

テンプレート名	パンくずリスト	コメントの投稿時間
natural_time	○	✕
Bonbori	○	✕
Girlie	○	○

再ダウンロードではなく、現在のテンプレートの編集で行う場合

以下では、再ダウンロードではなく、現在のテンプレートの編集で行う場合の手順について、説明します。
再ダウンロードではない場合には、今回追加した新機能と、修正箇所のうち、「欲しい」「積み込みたい」と思う機能について、ご自身で選んでいただいて、その部分について積み込んでいただければ、よいと思います。

「assembly」の記事幅広げ

これについては、レスポンシブの調整もあって、ややこしくなっているため、再ダウンロードをおすすめします。
改造用コードを積んである方は、再ダウンロード後に、積み替えていただくよう、お願いいたします。

パンくずリスト

1. HTMLの<div class="l_container cf">の直下に、以下を追加する。
   文字列などを整える必要はなく、とにかく貼ればよい。
   
   <!--パンくずリストここから--> <!--category_area--> <div id="breadcrumb"> <a id="bread_top" href="<%url>">トップ</a> > <span id="bread_last"><%sub_title></span> </div> <!--/category_area--> <!--permanent_area--> <div id="breadcrumb"> <!--topentry--><a id="bread_top" href="<%url>">トップ</a> > <a id="bread_middle" href="<%topentry_category_link>"><%topentry_category></a> > <span id="bread_last"><%sub_title></span><!--/topentry--> </div> <!--/permanent_area--> <!--tag_area--> <div id="breadcrumb"> <a id="bread_top" href="<%url>">トップ</a> > <span id="bread_last"><%tag_word></span> </div> <!--/tag_area--> <!--date_area--> <div id="breadcrumb"> <a id="bread_top" href="<%url>">トップ</a> > <span id="bread_last"><%now_year>年<%now_month>月</span> </div> <!--/date_area--> <!--titlelist_area--> <div id="breadcrumb"> <a id="bread_top" href="<%url>">トップ</a> > <span id="bread_last">記事タイトル一覧</span> </div> <!--/titlelist_area--> <!--search_area--> <div id="breadcrumb"> <a id="bread_top" href="<%url>">トップ</a> > <span id="bread_last"><%search_word></span> </div> <!--/search_area--> <!--/パンくずリストここまで-->
2. スタイル編集（CSS）に、以下を追加する。位置は、一番下でもいい。

   /*=========================================
     パンくずリスト
   =========================================*/  
   #breadcrumb{margin:0 0 20px;display:block;font-size:14px;}

3. 青い「更新」ボタンを押し、ブログを開いて、設置できているかどうかを確認する。

パンくずリストを中央寄せにしたい場合

中央寄せで表示したい場合には、CSSを、以下に変えてください。

#breadcrumb{margin:0 0 20px;display:block;font-size:14px;text-align:center;}

個別記事ページに投稿時刻を追加

1. HTMLの以下の位置に、以下のコードを追加する。
   
   <span class="hour_hm"><%topentry_hour>:<%topentry_minute></span>
   
2. スタイル編集（CSS）に、以下を追加する。位置は、一番下でもいい。
   

   #entry_page .blog_entry .blog_content_date .hour_hm{margin:0 0 0 10px;}

3. 青い「更新」ボタンを押し、ブログを開いて、設置できているかどうかを確認する。

コメント欄に投稿時刻を追加

1. HTMLの以下の位置<%comment_day>の直後に、以下のコードを追加する。
   前後に余白などは作らないようにする。
   
   &nbsp;<%comment_hour>:<%comment_minute>
   
2. 青い「更新」ボタンを押し、ブログを開いて、設置できているかどうかを確認する。

新投稿記事に２４時間の間New!という赤い文字を表示

1. HTMLの以下の３箇所に、それぞれのコードを追加する。
   まず、以下のコードを、headの閉じタグの直前に入れる。
   ただし、文字列を揃えたりしてはいけない（もしも全角が入ると、余計な空白ができてしまう可能性がある）。とにかく、ただ貼りつければ、それでOK。
   <!--▼新着記事用newマーク（http://10plate.blog44.fc2.com/blog-entry-126.html）いたお様許可済み▼--><!--not_titlelist_area--><!--not_search_area--><!--not_edit_area--> <script><!-- function nw(u1,u2,u3,u4) { var today=new Date(); var nt=24; var c=new Date(u1,u2-1,u3,u4); if (today-c<3600000*nt) { document.write('New!')} } --> </script> <!--/not_edit_area--><!--/not_search_area--><!--/not_titlelist_area--><!--▲新着記事用newマーク▲-->
2. 次に、以下のコードを、２箇所に貼り付ける。
   
   <!--▼newマーク▼--> <span class="new"> <script> nw(<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>) </script> </span> <!--▲newマーク▲-->
   • 【１つ目】
     「記事繰り返し表示(トップ記事一覧)」の下の<%topentry_title>の直下。文字列をそろえたりしなくても、とにかく貼り付ければOK。
     
   • 【２つ目】
     「個別記事」の下の<div class="blog_content_sup">の直下。文字列をそろえたりしなくても、とにかく貼り付ければOK。
     
3. スタイル編集（CSS）に、以下を追加する。位置は、一番下でもいい。
   Listen・Listen_blue・natural_timeの場合は、下のほうの別のコードなので注意。
   【Listen・Listen_blue・natural_time以外のテンプレート用】
   

   /*=========================================
     New!
   =========================================*/ 
   .new{margin:0 5px;display:inline-block;color:#ff5151;font-size:13px;font-weight:bold;}

   【Listen・Listen_blue・natural_time用】
   

   /*=========================================
     New!
   =========================================*/ 
   .new{margin:0 5px;display:inline-block;color:#ff5151;font-size:13px;font-weight:bold;}
   .blog_content_item .new{position:absolute;left:0;top:0;line-height:1.3em;} 

4. 青い「更新」ボタンを押し、ブログを開いて、設置できているかどうかを確認する。

記事一覧が1000件を超えたときのページャーを追加

1. HTMLの以下の位置<!--/titlelist_area-->の直前に、以下のコードを追加する。
   文字列をそろえたりする必要はなく、とにかく貼ればOK。
   <!--一覧ページページャー--> <div class="pager_index <!--prevpage--> have_prev<!--/prevpage--><!--nextpage--> have_next<!--/nextpage-->"> <!--prevpage--> <div class="pager_prev"> <a class="pager_prev_link" href="<%prevpage_url>"> <span class="pager_next_text">＜&nbsp;&nbsp;前のページ</span> </a> </div> <!--/prevpage--> <!--nextpage--> <div class="pager_next"> <a class="pager_next_link" href="<%nextpage_url>"> <span class="pager_next_text">次のページ&nbsp;&nbsp;＞</span> </a> </div> <!--/nextpage--> </div> <!--一覧ページページャーここまで-->
   
2. 記事一覧ページから、数字型のページャーの適用を除外する。
   以下のコードで、以下の画像の２箇所を囲むようにする。
   【囲み上用】
   
   <!--not_titlelist_area-->
   【囲み下用】
   
   <!--/not_titlelist_area-->
   【１箇所目】
   【２箇所目】
   
3. スタイル編集（CSS）に、以下を追加する。位置は、一番下でもいい。
   

   /*-------記事一覧ページページャー--------- */
   .pager_index{margin:30px auto;width:100%;height:50px;display:block;position:relative;}
   .pager_index .pager_next,.pager_index .pager_prev{position:absolute;}
   .pager_index .pager_next{right:0;top:0;}
   .pager_index .pager_prev{left:0;top:0;}
   .pager_index .pager_next_link,.pager_index .pager_prev_link{flex-wrap:wrap;padding:0;}
   .pager_index .pager_next_link:after,.pager_index .pager_prev_link:before{display:none;} 

4. 青い「更新」ボタンを押し、ブログを開いて、設置できているかどうかを確認する（ただし、記事数が1000件を超えていなければ、設置に成功していても、ページャーは出てこないので、実際には確認はできない）。

動作確認済み

再ダウンロードをされた半漁人の生き方様（記事数が1000件超え）のブログで、「記事一覧ページ用ページャー」が動作をしていることを、確認できました。

ヘッダー下ナビにflex-wrap:wrap;を追加

1. スタイル編集（CSS）の「header下menu」の#navi-listのカッコの中に、以下を追加する。
   

   flex-wrap:wrap;

   

トラックバックのセルの右marginを削除

1. スタイル編集（CSS）の「トラックバック」の#tb .sub_contentのmarginを、以下と差し替える。
   

   margin:0;

   

最新記事の記事下のページャーを右に寄せるための修正

1. スタイル編集（CSS）に、以下を追加する。
   位置は、一番下でもいい。
   

   .pager_next{flex-grow:1;}

コメント欄の不要なセレクタを削除する

「コメント一覧」の以下の位置の<p class="comment_item_footer">と</p>を削除する。

2019/09/29 16:11追記

記事一覧用のページャー設置の項に、エリア除外用のコードのぶんを書くのを忘れていたので、追記しました。
バージョンアップ済みのテンプレートには、もともと入っています。

初期ダウンロードで、再ダウンロードをしない場合の修正コード

初期にダウンロードをされた方（前回のバージョンアップ７月１２日よりも前）のうち、今回、再ダウンロードをしないという場合には、個別記事のページャーのサムネイルの大きさの修正コードを、追加しておいてください。

1. スタイル編集（CSS）の「個別ページページャー」の中の.pager_next_link>img,.pager_prev_link>imgのカッコの中に、以下を追加する。
   

   flex-shrink:0;

   

まとめ

ご利用の方には、お手数をおかけいたしますが、今回は、再ダウンロードをしないという場合には、ご自身で手を加えねばならない箇所が、多岐に渡り、かなりの手間と思われますので、できれば、再ダウンロードをされたうえ、独自の改造部分のコードをあとから積み替えるというほうが、おすすめです。

＊また、ハックル70さんの場合は、「Bonbori」のスペシャルエディションですので、ほとんどの新機能は積み込み済みですが、若干の修正箇所がございましたので、それについては、あとでご連絡させていただきます。