*Essence

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

Top Page › その他 › 楽しかったひと時が今はもう過ぎてゆく
2018-09-18 (Tue) 22:36

楽しかったひと時が今はもう過ぎてゆく

ずっとずっと昔、「楽しかったひと時が~今はもう過ぎてゆく~♪」と出演者の方々の合唱でエンディングを迎える『カックラキン大放送』というTV番組がありまして、、
私の場合、楽しかった事が終わってしまうと、何となく頭の中に浮かんできてしまうフレーズなんですよね…。
1975年4月から1986年3月まで放送されていたバラエティ番組で、この「悲しみのソレアード」という曲がエンディングに使われていたのは1980年夏からだそうです。
9月14日が兄の命日であるのと、お盆は旦那さんの実家に行ったため来れなかったのもあって、15日(土)から17日(月)まで新潟に帰省してきました。
猫と老ウサギが居るので、申し訳ないけど旦那さんはお留守番。
…で、15日夕飯に新潟の美味しいもの 食べてきましたよ~♪

新潟古町9田舎家

姪っ子に「どうしても食べてみたい!」と頼まれて、食べてきました『新潟市古町9 田舎家』のわっぱ飯。

田舎家『魯山人わっぱ膳』

新潟に来たら味わうべき郷土料理『のっぺい汁』もおすすめ。繊細で上品な、出汁の利いた煮物です。
やっぱり新潟人なら一度は食べないと。(^-^) ということで、たいそう美味しかったらしく姪っ子超感動。
「生まれてから今までで一番美味しかった!」だそうです。
実はうちの親が過去に30年近くこのお店で働いていて、私は学生の頃に 店の娘さん(小学生)の子守として暫くバイトしてた事があるという…。賄い、美味しかったなぁ~。(ひょっとして身バレ?(;^_^A)

翌16日はお墓参りした後に ほぼ恒例になったカラオケに、従弟夫婦に姪っ子達、妹と親を含めた親族計7名で行って参りました。
大体帰省すると みんなで集まってさわぐのがメイン。6時間たっぷり歌って、楽しい時間を過ごせました。(^^)

人の持つ 時間の長さはそれぞれ。だったら、出来るだけ、楽しい思い出がいっぱいな人生の方が良いもんね!
だけど楽しい時間ってすごく短く感じるから、終わった時 すごく寂しくて切ないけどね。。
素姓乱雑 様へ * by aki
素姓乱雑様、大変お手数をお掛け致しました。
HTML5,CSS3 はまだまだ不勉強で、この度の件は当方にとって有難い『学び』となりました。
また何かお気付きの点がございましたらお教え下さいませ。
今後とも宜しくお願い致します。m(__)m

No Subject * by 素姓乱雑
akiさま、ありがとうございました。
完了です。

素姓乱雑 様へ * by aki
コメント、見て頂き有難うございます。m(__)m

素姓乱雑様の見ていらっしゃるのは、html5.validator の結果だと思います。
HTMLの終了タグチェックではエラーは出ないのですが、ふと考えてみたら追記文の中にh2vR.jsによる<div></div>が生成されるのですよね。
で、思い当たったのがタグの入れ子ルール!

<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<label for="label1">Read More</label>
<input type="checkbox" id="label1"/>
<div class="hidden_show"><p><%topentry_more></p></div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->

追記部分を表示するFC2ブログの変数<%topentry_more>を、段落として後でスタイル(marginやpadding等)が付けやすいように<p>タグで括って有ります。
ブロックレベル要素である<p>の中には、インライン要素のみ入れ子がOKなので、span、img、a、strong、等々…記事表示されるタグとしては問題無いのですが、縦書き編成をするための<div>タグはブロック要素なので入れる事は出来ません。そのため初めの<p>が無視されているのかも…。
参考:HTML5でのタグの入れ子のルールを徹底まとめ https://webliker.info/46840/#toc_18
実際、<p></p>を外すとエラーが出なくなります。(^^;

<div>が内包される事が分かっており、且つ必ず必要とする部分では無いので、下記のように<p></p>を取り払って更新してみて下さい。

<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<label for="label1">Read More</label>
<input type="checkbox" id="label1"/>
<div class="hidden_show"><%topentry_more></div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->

大変お手間を取らせて申し訳無いです。ご確認の程、宜しくお願い致します。m(__)m

No Subject * by 素姓乱雑
調べてみるとReadMoreで表示した記事の最初の行が
おかしいのは当方のミスでした。 marginが入っていました。
あと、ReadMoreのある記事の、関連記事の部分で</p>
(閉じタグ)が現れerrorになる。どこか原因がつかめません。
因みにReadMoreのない記事はOK(^^♪ 表示にも差しさわりは有りませんが
errorの出るのは気になる。
<dl class="relate_dl fc2relate_entry_thumbnail_off">↩
<dt class="relate_dt">関連記事</dt>↩
<dd class="relate_dd">↩
<ul class="relate_ul">↩
<li class="relate_li">↩
<a href="blog-entry-19.html">↩
蓮の花(1) </a>↩
</li>↩
<li class="relate_li_nolink">↩
蓮の花(2) </li>↩

<li class="relate_li">↩
<a href="blog-entry-21.html">↩
蓮の花(3) </a>↩
</li>↩
<li class="relate_li">↩
<a href="blog-entry-22.html">↩
蓮の花(4) </a>↩
</li>↩
<li class="relate_li">↩
<a href="blog-entry-23.html">↩
蓮の花(5) </a>↩
</li>↩
</ul>↩
</dd>↩
</dl>↩

</p></div> ↩
</div> ↩

No Subject * by 素姓乱雑
あと一点だけ。ReadMoreで表示した記事の最初の行が
おかしいです。何が原因でしょうか。
この画面が懐かしい。そういえばこの画面の時も、
同じようにReadMoreで開いた画面がずれて
苦労したような気がする。あの時も、ReadMoreを
外したりしてみたような…

No Subject * by 素姓乱雑
akiさま、ありがとうございました。
無事に表示することを確認しました。
ありがとうございました。(^^♪
すごいですね、akiさまの勉強家には
頭が下がります。

素姓乱雑 様へ * by aki
一応、ご報告させて下さい。(^^;)
表示されない原因が分かりましたのでお知らせ致します。

テンプレートの<head>内に
<link rel="stylesheet" href="<%css_link>" media="all" title="default">
という文言が有りますので、そこの title="default" を外して

<link rel="stylesheet" href="<%css_link>" media="all">

にして下さい。
この部分は昔の(自身の作った)テンプレートからの流用で記述してきたのですが、これがネックになって『スタイルシートを外部から参照させる場合、link要素に title属性を指定すると、そのスタイルシートが優先的に読み込まれる』ため、h2vR.css が一部反映しなかったのが原因でした。
[見本ページ]
https://sorauta1.blog.fc2.com/?template=ct_responsive2c-l11&no=279

但し、追記格納JavaScriptはやはり共存が出来ないようで、色々試してみたのですが当方では改善出来ませんでした。
なので、(個別記事ページの)追記部分はそのまま表示するようにして、HTML編集枠内の改変必要箇所を

<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<%topentry_more>
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->

のように修正するか、只今のこのページのようにCSSで開閉できるように修正して下さい。

<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<label for="label1">Read More</label>
<input type="checkbox" id="label1"/>
<div class="hidden_show"><p><%topentry_more></p></div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->

そして、スタイルシート編集枠最下段に下記を追加します。


.hidden_box label{
padding:0 10px;
border:solid 1px #666; /*ボタン装飾*/
cursor:pointer;
}
.hidden_box label:hover{
background:#ccc; /*ボタン装飾、ホバー時*/
color:#333;
}
.hidden_box input{
display:none;
}
.hidden_box .hidden_show{
height:0;
padding:0;
overflow:hidden;
opacity:0; /*中身を非表示にしておく*/
transition:0.5s;
}
.hidden_box input:checked ~ .hidden_show{
padding:10px 0;
height:auto;
opacity:1; /*クリックで中身表示*/
}

追記開閉式にする場合はこのようにして下さい。
色々お手数をお掛け致しました。
機会がございましたらご利用下さいませ。m(__)m

素姓乱雑 様へ * by aki
いえいえ、とんでもないです。m(__)m
正直に申しまして、まだ正しく表示出来ていないのが現状です。(勇み足で、ぬか喜びしてしまいました…)
というのも、PCでのGoogleChrome、IE10、MS Edge、Firefox、Opera、スマホ(android)のChromeは表示出来たのですが、PCのSafari と iPhone(iOS)では縦に表示されませんでした。
しかも、iPhoneでは Safari、Chrome、Firefox、Operaが縦書き表示にならず、横書きで行間が狭まっている状態。(確認用にいっぱい入れてます。要するに iOSが全滅。(^-^;)
これからのデバイスとしてスマホを考慮するのは必須(且つiPhoneユーザーが多い)ですし、JSが読み込まれないためCSS(opacity)を当てるのも解決!とは言い難いので、もう暫く色々足掻いてみようと思います。^^;
沢山ご迷惑をお掛け致しました。
何時かこの件に私なりの結論が出ましたらご連絡致しますね。(要らない・迷惑かもしれませんが…)

スマホ版の非表示の件ですが、そうですね、今後のためにももっと記事に掲載して参ります。(カスタマイズの初期設定ページにしか書いて無かったので。)

素人テンプレなので、不勉強この上ないですが、この度のようにご意見・ご質問から新しい学びが有ります。
また何かお気付きの点などございましたら、どうぞ気兼ね無くお声掛け下さいませ。
有難うございました。(レスは不要です。)m(__)m

No Subject * by 素姓乱雑
aki様拝見しました。
当方のわがままにお付き合いいただきまして
心よりお礼申し上げますとともに
aki様のご努力に拍手を送ります。
今すぐには変更しませんが、(変えたばかりですから)
時を見計らって考慮したいと思います。
(Fc2はプログラムが古いのでいままでもJavaScriptで衝突しています)これからも素敵なプログラムを作られるように願っています。蛇足ですが、せっかくのレスポンシブですから、Fc2の環境設定のスマートフォン版の表示設定を無効にするように啓蒙していただけませんか。そうでないと、意味が無くなります。


Comment-close▲

Comment







管理者にだけ表示を許可

aki 素姓乱雑 様へ

素姓乱雑様、大変お手数をお掛け致しました。
HTML5,CSS3 はまだまだ不勉強で、この度の件は当方にとって有難い『学び』となりました。
また何かお気付きの点がございましたらお教え下さいませ。
今後とも宜しくお願い致します。m(__)m
2019-05-10-23:25 * aki [ 返信 * 編集 ]

No Subject

akiさま、ありがとうございました。
完了です。
2019-05-10-15:05 * 素姓乱雑 [ 返信 * 編集 ]

aki 素姓乱雑 様へ

コメント、見て頂き有難うございます。m(__)m

素姓乱雑様の見ていらっしゃるのは、html5.validator の結果だと思います。
HTMLの終了タグチェックではエラーは出ないのですが、ふと考えてみたら追記文の中にh2vR.jsによる<div></div>が生成されるのですよね。
で、思い当たったのがタグの入れ子ルール!

<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<label for="label1">Read More</label>
<input type="checkbox" id="label1"/>
<div class="hidden_show"><p><%topentry_more></p></div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->

追記部分を表示するFC2ブログの変数<%topentry_more>を、段落として後でスタイル(marginやpadding等)が付けやすいように<p>タグで括って有ります。
ブロックレベル要素である<p>の中には、インライン要素のみ入れ子がOKなので、span、img、a、strong、等々…記事表示されるタグとしては問題無いのですが、縦書き編成をするための<div>タグはブロック要素なので入れる事は出来ません。そのため初めの<p>が無視されているのかも…。
参考:HTML5でのタグの入れ子のルールを徹底まとめ https://webliker.info/46840/#toc_18
実際、<p></p>を外すとエラーが出なくなります。(^^;

<div>が内包される事が分かっており、且つ必ず必要とする部分では無いので、下記のように<p></p>を取り払って更新してみて下さい。

<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<label for="label1">Read More</label>
<input type="checkbox" id="label1"/>
<div class="hidden_show"><%topentry_more></div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->

大変お手間を取らせて申し訳無いです。ご確認の程、宜しくお願い致します。m(__)m
2019-05-10-13:51 * aki [ 返信 * 編集 ]

No Subject

調べてみるとReadMoreで表示した記事の最初の行が
おかしいのは当方のミスでした。 marginが入っていました。
あと、ReadMoreのある記事の、関連記事の部分で</p>
(閉じタグ)が現れerrorになる。どこか原因がつかめません。
因みにReadMoreのない記事はOK(^^♪ 表示にも差しさわりは有りませんが
errorの出るのは気になる。
<dl class="relate_dl fc2relate_entry_thumbnail_off">↩
<dt class="relate_dt">関連記事</dt>↩
<dd class="relate_dd">↩
<ul class="relate_ul">↩
<li class="relate_li">↩
<a href="blog-entry-19.html">↩
蓮の花(1) </a>↩
</li>↩
<li class="relate_li_nolink">↩
蓮の花(2) </li>↩

<li class="relate_li">↩
<a href="blog-entry-21.html">↩
蓮の花(3) </a>↩
</li>↩
<li class="relate_li">↩
<a href="blog-entry-22.html">↩
蓮の花(4) </a>↩
</li>↩
<li class="relate_li">↩
<a href="blog-entry-23.html">↩
蓮の花(5) </a>↩
</li>↩
</ul>↩
</dd>↩
</dl>↩

</p></div> ↩
</div> ↩
2019-05-10-07:16 * 素姓乱雑 [ 返信 * 編集 ]

No Subject

あと一点だけ。ReadMoreで表示した記事の最初の行が
おかしいです。何が原因でしょうか。
この画面が懐かしい。そういえばこの画面の時も、
同じようにReadMoreで開いた画面がずれて
苦労したような気がする。あの時も、ReadMoreを
外したりしてみたような…
2019-05-10-06:07 * 素姓乱雑 [ 返信 * 編集 ]

No Subject

akiさま、ありがとうございました。
無事に表示することを確認しました。
ありがとうございました。(^^♪
すごいですね、akiさまの勉強家には
頭が下がります。
2019-05-10-05:52 * 素姓乱雑 [ 返信 * 編集 ]

aki 素姓乱雑 様へ

一応、ご報告させて下さい。(^^;)
表示されない原因が分かりましたのでお知らせ致します。

テンプレートの<head>内に
<link rel="stylesheet" href="<%css_link>" media="all" title="default">
という文言が有りますので、そこの title="default" を外して

<link rel="stylesheet" href="<%css_link>" media="all">

にして下さい。
この部分は昔の(自身の作った)テンプレートからの流用で記述してきたのですが、これがネックになって『スタイルシートを外部から参照させる場合、link要素に title属性を指定すると、そのスタイルシートが優先的に読み込まれる』ため、h2vR.css が一部反映しなかったのが原因でした。
[見本ページ]
https://sorauta1.blog.fc2.com/?template=ct_responsive2c-l11&no=279

但し、追記格納JavaScriptはやはり共存が出来ないようで、色々試してみたのですが当方では改善出来ませんでした。
なので、(個別記事ページの)追記部分はそのまま表示するようにして、HTML編集枠内の改変必要箇所を

<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<%topentry_more>
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->

のように修正するか、只今のこのページのようにCSSで開閉できるように修正して下さい。

<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<label for="label1">Read More</label>
<input type="checkbox" id="label1"/>
<div class="hidden_show"><p><%topentry_more></p></div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->

そして、スタイルシート編集枠最下段に下記を追加します。


.hidden_box label{
padding:0 10px;
border:solid 1px #666; /*ボタン装飾*/
cursor:pointer;
}
.hidden_box label:hover{
background:#ccc; /*ボタン装飾、ホバー時*/
color:#333;
}
.hidden_box input{
display:none;
}
.hidden_box .hidden_show{
height:0;
padding:0;
overflow:hidden;
opacity:0; /*中身を非表示にしておく*/
transition:0.5s;
}
.hidden_box input:checked ~ .hidden_show{
padding:10px 0;
height:auto;
opacity:1; /*クリックで中身表示*/
}

追記開閉式にする場合はこのようにして下さい。
色々お手数をお掛け致しました。
機会がございましたらご利用下さいませ。m(__)m
2019-05-09-17:02 * aki [ 返信 * 編集 ]

aki 素姓乱雑 様へ

いえいえ、とんでもないです。m(__)m
正直に申しまして、まだ正しく表示出来ていないのが現状です。(勇み足で、ぬか喜びしてしまいました…)
というのも、PCでのGoogleChrome、IE10、MS Edge、Firefox、Opera、スマホ(android)のChromeは表示出来たのですが、PCのSafari と iPhone(iOS)では縦に表示されませんでした。
しかも、iPhoneでは Safari、Chrome、Firefox、Operaが縦書き表示にならず、横書きで行間が狭まっている状態。(確認用にいっぱい入れてます。要するに iOSが全滅。(^-^;)
これからのデバイスとしてスマホを考慮するのは必須(且つiPhoneユーザーが多い)ですし、JSが読み込まれないためCSS(opacity)を当てるのも解決!とは言い難いので、もう暫く色々足掻いてみようと思います。^^;
沢山ご迷惑をお掛け致しました。
何時かこの件に私なりの結論が出ましたらご連絡致しますね。(要らない・迷惑かもしれませんが…)

スマホ版の非表示の件ですが、そうですね、今後のためにももっと記事に掲載して参ります。(カスタマイズの初期設定ページにしか書いて無かったので。)

素人テンプレなので、不勉強この上ないですが、この度のようにご意見・ご質問から新しい学びが有ります。
また何かお気付きの点などございましたら、どうぞ気兼ね無くお声掛け下さいませ。
有難うございました。(レスは不要です。)m(__)m
2019-05-04-03:15 * aki [ 返信 * 編集 ]

No Subject

aki様拝見しました。
当方のわがままにお付き合いいただきまして
心よりお礼申し上げますとともに
aki様のご努力に拍手を送ります。
今すぐには変更しませんが、(変えたばかりですから)
時を見計らって考慮したいと思います。
(Fc2はプログラムが古いのでいままでもJavaScriptで衝突しています)これからも素敵なプログラムを作られるように願っています。蛇足ですが、せっかくのレスポンシブですから、Fc2の環境設定のスマートフォン版の表示設定を無効にするように啓蒙していただけませんか。そうでないと、意味が無くなります。

2019-05-03-17:32 * 素姓乱雑 [ 返信 * 編集 ]