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

►2019/05/16 02:21 

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の記事と同じ修正記事です。)
↓(変更方法はここをクリック)

>> ReadMore
スポンサーサイト

テーマ : 共有テンプレート - ジャンル : ブログ

カスタマイズComment(4)Trackback(0) | Top ▲

テンプレートの修正・更新致しました。5/14

►2019/05/14 02:17 

レスポンシブテンプレート、『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』をご利用頂き、誠に有難うございます。m(__)m
ユーザー様よりご連絡を頂きまして、本日HTMLの記述ミス部分を修正・更新を致しました。
その他、記事及びコメント投稿時間(個別記事ページ)の表示、最終更新日(個別記事ページ)の表示、折り畳み追記表示部(ReadMore部分)をJavaScriptからCSSに変更、の追加を致しました。

1) 外部参照CSSのlink要素にtitle属性を指定していたため、CSSの表示優先に生じた不具合修正。
2) 投稿時間や最終更新日表示の追加、折り畳み追記の表示方法変更。


1) 外部参照CSSのlink要素にtitle属性を指定していたため、CSSの表示優先に生じた不具合修正。
修正が必要なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。

外部リンクのJavaScriptとCSSをHTMLに追加記述した際に、JS内記述のスタイル及びCSSの一部が反映しない不具合が報告されました。(縦書き表示用JS・CSS)
テンプレートの <head></head> 内に有る
<link rel="stylesheet" href="<%css_link>" media="all" title="default"> という部分の、title="default" を外す事によって表示されるようになりました。
<link rel="stylesheet" href="<%css_link>" media="all">
(↑上記のように変更)
大変申し訳ございませんでした。そして、不具合にお気付き頂いた方へ、誠に有難うございました。m(__)m

修正する箇所ですが、上記のように<head></head> 内のタグを修正お願い致します。


2) 投稿時間や最終更新日表示の追加、折り畳み追記の表示方法変更。
投稿時間や最終更新日表示については、ユーザー様の要望を拝見致しましたのでテンプレートに追加致しました。
ただ、投稿時間の表示は「個人の生活ペースが分かってしまうので知られたくない」というお声が、また最終更新日の表示は「誤字脱字程度の修正でも更新として表示されてしまう」というお声がございましたので、すぐに非表示にできるようHTML内に『不要の際は削除』の文言を入れました。
カスタマイズとして近日記事に致します。ご入用の方は暫しお待ち下さいませ。m(__)m

個別記事ページの折り畳み追記方法を、JavaScriptの使用からCSSのみに変更致しました。
この仕様変更も、(1)のJSを加えた際の不具合と共にJSのバッティングなのか動いてくれなくなったため、依存しないCSSを使って開閉するように変更致しました。(上記のような追加JSが無ければ現行のままでも問題有りません。)
変更可能なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。

変更した追記部分はこんな感じです。
↓(変更方法はここをクリック)

>> ReadMore

テーマ : 共有テンプレート - ジャンル : ブログ

テンプレ修正等Comment(5)Trackback(0) | Top ▲

令和初投稿♪ゆるJOG日和

►2019/05/02 23:58 

新しい元号に変わり、ゴールデンウィーク真っ只中。
昨日までの雨天から打って変わり本日の快晴♪今日はゆる~いJogging日和♪
で、いつもの栃木県中央公園に行って参りました。

新緑が綺麗な季節です。ホンの一か月で
20190406.jpg
↓こんな景色が
20190502.jpg
こんな景色に。(2019/04/06 → 2019/05/02)

桜が綺麗だった橋の上からの景色も
20190331-1.jpg
↓こんな景色が
20190502-1.jpg
こんな風に変わりました。(^-^) (2019/03/31 → 2019/05/02)

鮮やかな青空と新緑で、何かとっても元気になった♪


テーマ : 日々のつれづれ - ジャンル : 日記

その他Comment(7)Trackback(0) | Top ▲

GW中のお返事、ちょっと遅くなります。m(__)m

►2019/04/28 14:17 

ご訪問頂き、誠に有難うございます。
今年のゴールデンウィーク、平成から令和へ…新しい元号に変わります。
長期のお出掛け等は致しませんが、ちまちまと忙しいので『コメントのお返事』、ちょっと遅れます。
申し訳ございませんが、必ず致しますのでお待ちくださいませ。m(__)m

…平成最後の投稿かな。オマケ。
動物病院の燕夫妻

先日、お世話になっている動物病院に行った際に撮った画像。
毎年来るけど、今年はちょっと早めの巣作り。
『二期作』の如く、ひと番いのヒナの巣立ちが済むと次の(別の)番いがやって来て同じ巣を使うという…(二期作とは、同じ耕地で同じ作物を1年に2回栽培し収穫すること…別の番いが別のヒナを育てるから『二毛作』?…ってか、例えが悪いかな?(;^ω^))
しかも動物病院の入り口&ALS〇K完備で尚安心の優良物件♪
ツバメが下見しにやって来ると、病院スタッフの方がカップうどんの容器を半分に切って壁に貼り付け巣を用意してくれます。(^-^)
(放っておくと勝手に糞で巣を作り始め、壁や下が汚れるので。)

待合室から見えるツバメの様子、卵→ヒナの成長が楽しみ♪です。


テーマ : 日々のつれづれ - ジャンル : 日記

その他Comment(8)Trackback(0) | Top ▲

テンプレートの修正・更新致しました。4/26

►2019/04/26 04:30 

レスポンシブテンプレート、『al_responsive』『ct_responsive』『candy』『green』『lace_al』をご利用頂き、誠に有難うございます。m(__)m
ユーザー様よりご連絡を頂きまして、本日HTMLの記述ミス部分を修正・更新を致しました。

修正したのは2点。
1) ドロワーメニュー下の Title list 及び RSS のリンク先URLの誤記述。
2) 文字サイズを任意で大きくした際の、下方文字はみだしをしないように修正。

1) ドロワーメニュー下の Title list 及び RSS のリンク先URLの誤記述。
修正が必要なテンプレート 『ct_responsive』『candy』『green』の2カラム・3カラム。

画面幅が狭く、サイドメニューがドロワーメニューになった際、メニュー最下段に【 Admin * Title list * RSS 】が表示されます。
そのうちの【 Title list 】と【 RSS 】のリンク先が、弊ブログURL「https://sorauta1.blog.fc2.com/」になっておりました。
表示確認に入れたものですが、いつから、どの時点でこうなっていたのか、全く気付きませんでした。ひょっとして初めから…?(…共有申請時に審査で撥ねられるからそれは無いか…)
大変申し訳ございませんでした。そして、お気付き頂いた方へ、誠に有難うございました。m(__)m

修正する箇所ですが、下記に掲載致しますHTMLを修正お願い致します。

FC2管理画面左メニュー『テンプレートの設定』より、該当テンプレート名のHTML.CSS編集をクリック。
[ 該当テンプレート名 ] のHTML編集枠を3/4程スクロールした所に

<!-- 1カラム時のメニュー下管理ページリンク-->
<ul class="admin">
<li>* <a href="https://admin.blog.fc2.com/control.php" title="管理ページトップ">Admin</a> * </li>
<li><a href="https://sorauta1.blog.fc2.com/?all" title="全記事一覧">Title list</a> * </li>
<li><a href="https://sorauta1.blog.fc2.com/?xml" title="RSS">RSS</a></li>
</ul>
<!--/ 1カラム時のメニュー下管理ページリンク-->


という部分が有りますので、そこを下記のように変更して下さい。(コピペ可)

<!-- 1カラム時のメニュー下管理ページリンク-->
<ul class="admin">
<li><a href="<%server_url>control.php" title="管理ページトップ">Admin</a> * </li>
<li><a href="<%url>?all" title="全記事一覧">Title list</a> * </li>
<li><a href="<%url>?xml" title="RSS">RSS</a></li>
</ul>
<!--/ 1カラム時のメニュー下管理ページリンク-->


(若しくは <%url> の部分をご自身のブログURLに変更でもOK。)


2) 文字サイズを任意で大きくした際の、下方文字はみだしをしないように修正。
カスタマイズで文字サイズを大きくされる方も多いと思いますので、もう少し簡単に・文字のはみ出し無く表示されるように修正致しました。
修正・更新したテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』の2カラム・3カラム。
('19/04/05 修正まとめ記事にHTML該当部分が有りましたので記事修正致しました。併せてテンプレートのCSS修正をお願い致します。m(__)m '19/04/26 )

FC2管理画面左メニュー『テンプレートの設定』より、該当テンプレート名のHTML.CSS編集をクリック。
[ 該当テンプレート名 ] のHTML編集枠を3/1程スクロールした所に

<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
<p class="right-txt"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</div>
</div>


という部分が有りますので、そこを下記のように変更して下さい。(コピペ可)

<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
<p class="right-txt"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</div>


(上記青文字HTMLの4行目と5行目の上下を変更しています。)
そしてもう1点、[ 該当テンプレート名 ] のスタイルシート編集枠を2/5程スクロールした所に

.moji-c{
height:70px; /* 文字表示部分の高さ(3行分 文字数は200字で省略) */
overflow:hidden;
line-height:1.8;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; /* 3行表示末尾に3点リーダー表示(webkit系のみ) */
}


というような部分(heightの数値、3点リーダーの数値が違う場合も)が有りますので、下記のように変更して下さい。(コピペ可)

.moji-c{
overflow:hidden;
padding-bottom:1.8em;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; /* 3行表示末尾に3点リーダー表示(webkit系のみ) */
max-height:5.2em; /* IE,Firefox対策(4行は7.0em、5行は8.8em) */
}


(上記青文字CSSの height:70px; を削除し、line-height:1.8; を padding-bottom:1.8em; に変更、最後に max-height:5.2em; という行を追加しています。また、-webkit-line-clamp:3; が4と記述されていた場合は4にし、max-height:7.0em; にして下さい。)
そして、文字サイズを大きくする場合は、スタイルシート編集枠内上の方に

html{
font-size:83%; /* フォントサイズは1em(16px)の83% */
overflow-x:hidden;
}

という部分が有りますので、ここのフォントサイズのパーセントの数値を調整して下さい。

HTML/CSSの修正に不安が有る場合は、複製を作成してから作業すると安心です。
この度の修正も、大変お手数とは存じますが、宜しくお願い致します。m(__)m

2019/05/13 修正
.moji-c の max-height数値を0.2emずつ減らしました。(ギリギリだとちょっぴりはみ出る文字が有るようなので…)m(__)m

テーマ : 共有テンプレート - ジャンル : ブログ

テンプレ修正等Comment(8)Trackback(0) | Top ▲