*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

Top Page › Template › カスタマイズ › 投稿時間と最終更新日を表示&追記開閉CSS
2019-05-16 (Thu)  02:21

投稿時間と最終更新日を表示&追記開閉CSS

2019/5/14 の記事に有りますように、修正及び装飾機能を追加致しましたのでカスタマイズのご案内を致します。
対象テンプレート『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』の2カラム,3カラム。

1) 記事の投稿時間表示の追加。
2) 記事の最終更新日表示の追加。
3) コメントの投稿時間表示の追加。
4) 折り畳み追記の表示方法変更。

投稿時間や最終更新日表示については、ユーザー様の要望を拝見致しましたので、5/14の更新でテンプレートに追加致しました。
ただ、投稿時間の表示は「個人の生活ペースが分かってしまうので知られたくない」というお声が、また最終更新日の表示は「誤字脱字程度の修正でも更新として表示されてしまう」というお声がございましたので、更新されたテンプレートでは自身の好みで非表示にできるようHTML内に『不要の際は削除』の文言を入れました。

投稿時間・更新日


(↑見本画像はct_responsive 画像が荒くてスミマセン。^^;)
トップページは要約表示なので敢えて投稿時間を表示せず、個別記事画面で投稿時間及び最終更新日を表示します。
また、頂いたコメントの投稿時間も表示します。



1) 記事の投稿時間表示の追加。
FC2ブログの管理画面左メニュー『設定』の『テンプレートの設定』を選び、使用テンプレートのHTML編集をクリック
[ テンプレート名 ] のHTML編集という枠内約1/3程スクロールした所に、下記のようなHTMLが有ります。

テンプレートの更新等で目印の文字列(コメントアウト)記述が無い場合は、テンプレート管理画面・調べたいテンプレートのHTML編集を表示したまま、キーボードの CtrlF を一緒に押して文字列を検索して下さい。(Mac ご利用の方はCtrlをCommandキーに置き換えて+Fキー)
[ 対象テンプレート ] ct_responsive2c,3c al_responsive2c,3c candy2c,3c green2c,3c lace-al2c,3c ryo-2c,3c
[ 検索する文字列 ] (<%topentry_youbi>) 対象1ヶ所

<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">&#9998;</span></a>


これを下記のように変更します。( (<%topentry_youbi>) の後ろに <!-- 投稿時間不要の場合は ここから--> を追加。)

<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)

<!-- 投稿時間不要の場合は ここから-->
<!--permanent_area-->&nbsp;<%topentry_hour>:<%topentry_minute><!--/permanent_area-->
<!-- 投稿時間不要の場合はここまでを削除 -->
<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">&#9998;</span></a>

紫色になっている <!--permanent_area--> <!--/permanent_area--> を外すと個別記事ページだけでなく、トップページにも投稿時間が表示されます。



2) 記事の最終更新日表示の追加。
上記の位置から少し下へ下がった所に、下記のようなHTMLが有ります。

テンプレートの更新等で目印の文字列(コメントアウト)記述が無い場合は、テンプレート管理画面・調べたいテンプレートのHTML編集を表示したまま、キーボードの CtrlF を一緒に押して文字列を検索して下さい。(Mac ご利用の方はCtrlをCommandキーに置き換えて+Fキー)
[ 対象テンプレート ] ct_responsive2c,3c candy2c,3c green2c,3c ryo-2c,3c
[ 検索する文字列 ] <div class="entry-footer clearLeft"> 対象1ヶ所
[ 対象テンプレート ] al_responsive2c,3c lace-al2c,3c
[ 検索する文字列 ] <div class="entry_state"> 対象1ヶ所

<!-- 全文表示用HTMLの貼り換え ここまで-->

<div class="entry-footer clearLeft"> (若しくは<div class="entry_state">)


これを下記のように変更します。( <div class="entry-footer clearLeft"> (若しくは<div class="entry_state">) の上に追加。)

<!-- 全文表示用HTMLの貼り換え ここまで-->
<!-- 最終更新日不要の場合は ここから-->
<!--permanent_area--><p style="text-align:right;margin:0 10px;">Last Modified : <%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day></p><!--/permanent_area--><!-- 最終更新日不要の場合はここまでを削除 -->

<div class="entry-footer clearLeft"> (若しくは<div class="entry_state">)



3) コメントの投稿時間表示の追加。
同様に、HTML編集枠内を半分より少し下がった所に、下記のようなHTMLが有ります。

テンプレートの更新等で目印の文字列(コメントアウト)記述が無い場合は、テンプレート管理画面・調べたいテンプレートのHTML編集を表示したまま、キーボードの CtrlF を一緒に押して文字列を検索して下さい。(Mac ご利用の方はCtrlをCommandキーに置き換えて+Fキー)
[ 対象テンプレート ] ct_responsive2c,3c al_responsive2c,3c candy2c,3c green2c,3c lace-al2c,3c ryo-2c,3c
[ 検索する文字列 ] <%comment_day> 対象1ヶ所

<!--コメント表示-->
<!--comment-->
<p class="com2" id="comment<%comment_no>"></p>
<article class="com_block <%comment_name>">
<h3 class="com_title"><%comment_title></h3>
<%comment_body>
<div class="com_state">
<%comment_year>-<%comment_month>-<%comment_day> * <%comment_name> <script>


これを下記のように変更します。( <%comment_day> の後ろにを追加。)

<!--コメント表示-->
<!--comment-->
<p class="com2" id="comment<%comment_no>"></p>
<article class="com_block <%comment_name>">
<h3 class="com_title"><%comment_title></h3>
<%comment_body>
<div class="com_state">
<%comment_year>-<%comment_month>-<%comment_day>

<!-- 投稿時間不要の場合は ここから-->-<%comment_hour>:<%comment_minute><!-- 投稿時間不要の場合はここまでを削除 --> * <%comment_name> <script>



4) 折り畳み追記の表示方法変更。
5/14 の修正記事のように、個別記事ページの折り畳み追記方法を、JavaScriptの使用からCSSのみに変更致しました。
個人で追加したJavaScript等がバッティングして開閉動作がされない場合にご利用下さい。
変更可能なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。

変更した追記部分はこんな感じです。(5/14の記事と同じ修正記事です。)
↓(変更方法はここをクリック)

変更箇所は、HTML編集枠内1/3程スクロールした所に有る

<p id="readmore" style="padding-top:3em;margin-top:-3em;margin-left:-5px;">&#8203;</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr class="hr1">
<%topentry_more><a href="#readmore" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


という部分を下記に変更

<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">&#8203;</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<input type="checkbox" id="navTgl">
<label for="navTgl" class="open">ReadMore</label>
<div class="hidden_show"><%topentry_more>
<label for="navTgl" class="close">Close</label>
</div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


そして、スタイルシート編集枠内一番下(“@media only screen” で括っていない所)にでも

/* 記事ページ追記ボタン */
.hidden_box label{
padding:0 10px;
border:solid 1px #aaa;
cursor:pointer;
}
.hidden_box label:hover{
background:#e1f0f6;
color:#333;
}
.hidden_box input {
display:none;
}
.hidden_box .hidden_show{
height:0;
padding:0;
overflow:hidden;
opacity:0; /* 中身を非表示にしておく */
}
.hidden_box input:checked ~ .hidden_show{
padding:10px 0;
height:auto;
opacity:1; /* クリックで中身表示 */
}


上記を追記して更新ボタンを押せば完了です。
不具合が有った時のために複製を作っておくと安心です。
スポンサーサイト

最終更新日 : 2019-06-06

* - 様へ * by aki
ご訪問頂き有難うございます。(^_^)
不躾に訪問して、勝手に色々書き込んで大変失礼致しました。
そして、可愛くカスタマイズして頂き感謝致します。(ヘッダー画像のお手々がセンス良いです♪)
時々カスタマイズや修正・更新記事を掲載しておりますので、是非見に来て下さいね。
また、ご不明な点やお気付きの点なども、どうぞ気兼ね無くコメント下さいませ。

この度は素敵な出会いを有難うございました。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

管理人のみ閲覧できます * by -

* - 様へ * by aki
大変失礼致しました。
テンプレートの種類やDL時期によって、タグのclassやid名が違ったりコメントアウトが記述されていない場合も有りますね。
(…というご質問と受け取りましたが、 違っておりましたらお教え下さい。)
先程この記事の内容を修正致しましたので、文字検索でカスタマイズの位置を探し、必要タグを追記述して下さい。
宜しくお願い致します。m(__)m

管理人のみ閲覧できます * by -

Comment




ご質問の際は確認用にURLをお願い致します。




管理者にだけ表示を許可

* - 様へ

ご訪問頂き有難うございます。(^_^)
不躾に訪問して、勝手に色々書き込んで大変失礼致しました。
そして、可愛くカスタマイズして頂き感謝致します。(ヘッダー画像のお手々がセンス良いです♪)
時々カスタマイズや修正・更新記事を掲載しておりますので、是非見に来て下さいね。
また、ご不明な点やお気付きの点なども、どうぞ気兼ね無くコメント下さいませ。

この度は素敵な出会いを有難うございました。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-05-21-01:38 * aki [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-05-20-20:15 * - [ 編集 ]

* - 様へ

大変失礼致しました。
テンプレートの種類やDL時期によって、タグのclassやid名が違ったりコメントアウトが記述されていない場合も有りますね。
(…というご質問と受け取りましたが、 違っておりましたらお教え下さい。)
先程この記事の内容を修正致しましたので、文字検索でカスタマイズの位置を探し、必要タグを追記述して下さい。
宜しくお願い致します。m(__)m
2019-05-16-23:37 * aki [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-05-16-20:58 * - [ 編集 ]