serene_resp テンプレート共有化しました。

本日、申請していたテンプレート [serene_resp3c] [serene_resp2c-r(右メニュー)] [serene_resp-l(左メニュー)] の3点が共有化致しました。
今回の共有化は早かったです。が、実は昨日CSSで一ヵ所(FC2ブログ上部に有る検索バーの表示が)崩れる問題が有って、FC2に却下されたんですけどね。(^-^;
直ぐに修正して再申請し、無事共有化致しました。
昔は共有テンプレートを申請する人もいっぱいいて、共有化するまで一週間位掛かってたんですが…今は作る人減っちゃったからすぐに審査してもらえるのかな~?(;´∀`) それとやっぱり Yahoo!ブログ閉鎖の影響も有るのかも?
FC2ブログには沢山の素敵なテンプレートが有りますよ~♪…っていうのも売りですし。
まぁ、うちのは相変わらず昔ながらのデザインですが…そういうのもたまには有りでしょ。^^;

serene-2clm← [serene-2cl(2カラム・左メニュー)]
ディスプレイサイズによって、カラム数が 2 → 1 と変化します。

serene-2crm← [serene-2cr(2カラム・右メニュー)]
ディスプレイサイズによって、カラム数が 2 → 1 と変化します。

serene-3cm← [serene-3c(3カラム)]
ディスプレイサイズによって、カラム数が 3 → 2 → 1 と変化します。

1カラムになるとメニューがドロワー表示になり、ドロワー内のメニューは、他を開くと閉じる仕様。
また2・3カラムとも、記事上に表示されていたプラグイン3は、個別記事画面を表示すると記事下に表示され読み易くなります。
トップページのエントリー内 Comment-open でコメントを10件まで表示、個別記事ページの追記記述部分も展開式になっております。
PC及びモバイル端末で表示した際、420pxまでは全文表示しますが、それ未満の画面サイズでは要約表示になります。
これは、スマートフォンなどの小さい画面サイズで長文を表示すると、表示が重くなる・データ量が大きくなる・読みたい記事を探すのが大変等が憂慮されますので、このように表示するようにメディアクエリのブレークポイントを設定しております。
420px未満でも全文表示されたい場合は、スタイルシート編集枠内を下の方までスクロールさせ(7/8位)

@media only screen and (max-width:420px) {

という部分以下の

.kiji1{
display:block; /* 1カラム時要約表示 */
}
.kiji2{
display:none; /* 1カラム時記事非表示 */
}

を削除するか、若しくは下記のように変更して下さい。

.kiji1{
display:none; /* 1カラム時要約非表示 */
}
.kiji2{
display:block; /* 1カラム時記事表示 */
}


DLされた方は是非、テンプレートのHTMLとCSSの編集枠内をご覧になって下さい。
カスタマイズし易いようにコメントアウトを付けておりますので、追加したり・削除したり・変更したり、ご自身のお好みに近付ける事が出来ます。
その際にご不明な点などが有りましたら、どうぞ気兼ね無くお声掛け下さいませ。m(__)m


レスポンシブテンプレートは表示サイズ可変対応になっておりますので、パソコン・タブレット・スマートフォン等での表示のために、以下の設定をして下さい。

① レスポンシブテンプレートはパソコン・スマホ共通なので設定を変更する。
PCやモバイル端末等の閲覧で、画面サイズが変化するレスポンシブデザインテンプレートを使う場合、初めに「スマートフォン版の表示設定」を変更して下さい。
管理画面左の『環境設定』 → 『ブログの設定』 →『スマートフォン版の表示設定』を無効にして更新。

② 検索バーはレスポンシブ未対応なので非表示にする。
FC2ブログ上部に有る検索バーはレスポンシブ未対応なので、画面の表示サイズによっては途切れて表示されてしまうため表示を無効にします。
管理画面左の『環境設定』 → 『ブログの設定』 →『検索バーの設定』で[利用しない]を選択して『更新』。

先ず、上記2点の設定をお願い致します。m(__)m


Comments

ありがとうございます

ご訪問ありがとうございました。

思いもよらないやさしいコメントに感激です。

昨日からのFC2の利用者で、しかも

パソコンの知識も無いので戸惑っています!

「共有テンプレート」のイロハも知りません。

使用規則などあるのでしょうか?

もし、無知ゆえのご無礼をしていましたらお知らせくださいませ。

これからよろしくお願いします ♡
2019-06-25-17:07 m3hm ( okki )
[ 返信 ]
aki

m3hm( okki ) 様へ

いえいえ、こちらこそ突然の書き込み、大変失礼致しました。
何となくご近所感が嬉しかったもので。(^-^)
改めまして、この度は数あるテンプレートの中から選んで頂き、誠に有難うございます。
利用の規約としては、FC2の規約に反してなければ問題有りません。
また、FC2ブログの使い方でご不明な点など当方の分かる範囲であればお教えできますので、何か有りましたらお声掛け下さいね。

この出会いに感謝して…、今後とも末永く宜しくお願い致します。m(__)m
2019-06-25-22:11 aki
[ 返信 * 編集 ]

複数画像の表示

初めまして。
大変美しいテンプレートで、自分のブログに左メニュータイプを試してみました。
幅の違う5枚の画像を、height属性で高さをそろえて横に並べているところがあるのですが、このテンプレートでは1枚1枚が1カラムの横幅いっぱいに縦5段に表示されました。
テンプレート適用時にはwidthを%で指定するように修正すれば問題は無いのですが、原因がわかればお教えいただけると、類似の問題の予防になると思いまして、何卒宜しくお願い致します。
2019-07-07-17:09 ゆーゆら
[ 返信 * 編集 ]
aki

Re: ゆーゆら 様へ

ゆーゆら 様、初めまして。コメント頂き有難うございます。

当方不勉強な故、どの様に配列をされているのか、本来の実寸はどれ位なのかを見てみないと何とも判断付きかねるのですが…
原因として思い付くのは、HTML4.01とHTML5のwidth属性とheight属性の違いかも、と思います。(他にも有るでしょうが^^;)
また、%単位指定記述の廃止などもあります。

このテンプレートはHTML5ですので、HTML4.01で表示出来ていたものが、タグの記述によっては崩れてしまう可能性は有ります。
もし宜しければ、テンプレートを適用していなくても結構なので、貴殿のブログURLと崩れるページをお教え頂けれは問題を見付ける事が出来るかもしれません。
鍵付きのコメントでも結構なので、お教え頂けませんか?
宜しくお願い致します。m(__)m
2019-07-08-01:22 aki
[ 返信 * 編集 ]

Re: aki 様へ

senrohaichi.blog51.fc2.com/blog-entry-303.html
では元々の「height="60"」で
senrohaichi.blog51.fc2.com/blog-entry-304.html
では「width="**%"」に修正して同じ画像を表示しています。
304が意図通りの表示ですが、303では縦に並んでいます。
2019-07-08-20:47 ゆーゆら
[ 返信 * 編集 ]
aki

Re: ゆーゆら 様へ

結論から申しますと、テンプレート毎のCSSの設定次第でこうなります。
多分、今ご利用になっているテンプレートのCSSセレクタimgには何もプロパティや値は設定されていないと思います。
なので、img要素のheight属性通りに表示されます。
当方のテンプレートではimgにheight:auto;を設定しています。height="60"になっているimgに対してheight:auto;で『上書きされた(height属性はスタイルのheightプロパティよりも優先度が低い)』ので(且つwidthの指定が無いため)横幅は記事カラムのmax-widthで、heightもそれに合わせた寸法で表示されたわけです。
304の方が崩れずに表示されたのは、widthが指定されていたからです。(CSSのimgでは最大値しか指定していないので。)
こちらのQ&Aも是非ご参考に。(^-^)
https://teratail.com/questions/127248

じゃあどうするか、imgのheight:auto;を削除すれば綺麗に(横並び)表示されます。
(若しくはheight:auto;を削除せず、304のようにheight="値"では無くwidth="%"で書く)
テンプレート[serene_resp2c-l]では、スタイルシート編集枠内の上の方に有ります。

img{
opacity: 1;
animation:fadeIn 0.8s ease 0s 1 normal;
vertical-align:bottom;
border:none;
max-width:100%;
height:auto; /* ←これを削除 */
}

これで表示されると思いますのでお試し下さいませ。m(__)m
2019-07-09-00:31 aki
[ 返信 * 編集 ]

アルバム設置について

aki様、お早うございます。
図々しいお願いかと心配していましたが、快諾下さり有難うごさいます。
ブログにお邪魔するたびに、意味の解らない言語が溢れていて恐れを
なす私ですが、自分にできそうなところから始めていきたいと思います。
2019-07-09-07:26 ひまわり
[ 返信 * 編集 ]
aki

Re: ひまわり 様へ

ひまわり様なら大丈夫ですよ。
何故なら、今現在FC2でブログを運営できていますもの。(^_-)-☆
私のテンプレートは独学で作ってます。
色んなミスも、不勉強ながら皆様に助けられつつ何とかやってます。
「分からない事は楽しい事」です。考える時間を楽しみましょう♪
頑張り過ぎずに、たまには、です。(^-^)
2019-07-09-23:13 aki
[ 返信 * 編集 ]

Re: aki 様へ

せっかくのレスポンシブなのでできる調整をして、どうしようもないときはご教示いただいた方法を試してみようと思います。
ありがとうございました。

なるべく使用中のテンプレートに合わせようとカスタマイズをしています。
追記の部分はトップページでは非表示、個別記事のページでは最初から表示したままにしたいのですが、このテンプレートではできないのでしょうか。
追記部分の要素にid属性を設定してリンクを設定していると、同じ記事内だと正しく表示されるのですが、違う記事だと当該の要素の位置にジャンプできなくなります(本文の末尾が表示されます)
何かやりようがあるでしょうか。

2019-07-11-22:54 ゆーゆら
[ 返信 * 編集 ]
aki

Re: ゆーゆら 様へ

お返事頂き有難うございます。

> 追記の部分はトップページでは非表示、個別記事のページでは最初から表示したままにしたいのですが、このテンプレートではできないのでしょうか。
…serene_respというテンプレートには、初めから実装されているものが色々有って、不要であればHTMLから削除して頂く事で装備を外す事が出来ます。
後で装備を追加するよりも、その方がはるかに簡単で改変個所の指示を間違える事が少ないと判断しました。HTMLの枠内を見て頂くと、外せる部位にコメントアウトを入れてあります。

個別記事ページの追記開閉が不要な場合は、下記のように変更して下さい。
HTML編集枠を1/3より少し下辺りまでスクロールした所に

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

という部分が有りますので、その部分を下記のように変更して下さい。

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


これで、個別記事ページの追記部分が開いている状態で表示され、Read More の有った所にリンクします。
Read More を『続きを読む』等に変更する場合は上記のHTMLより4行上に有る

<p><a href="<%topentry_link>#readmore">Read More</a></p>

の文字を『続きを読む』に変更して下さい。
作業にお手数をお掛け致しますが、当方の出来得る限りでお手伝い致しますので、何かございましたらお声掛け下さい。
宜しくお願い致します。m(__)m
2019-07-12-00:13 aki
[ 返信 * 編集 ]

Re: aki 様へ

削除部分をコメントアウトした(つもりでいた)らレイアウトが崩れてしまいまして、ちゃんと削除したらうまくいきました。お手を煩わせてすみません。
過去記事を確認してからになりますが、右メニュータイプにしようと思います。
ありがとうございました。

テンプレートを見て気になった点ですが、
1.HTMLの方にインデントがあったほうが修正時に間違いが少なくなると思います。
2.コピーライト表示には「著作権保持者名(ブログではアカウント名)」と「公開年(ブログでは開始年)」が無いと効果が低いそうです。
ご留意いただけますと幸いです。
2019-07-14-20:57 ゆーゆら
[ 返信 * 編集 ]
aki

Re: ゆーゆら 様へ

いえいえ、何より崩れが直って良かったです。(^-^)

テンプレートの制作時に、インデントを付けた方がカスタマイズも分かり易いかなぁ~?…と考えるのですが、自身の頭が古いものでHTML4.01時代からの記述が楽になってしまっているのです。
新しいものとの折り合い(とは言ってもHTML5等は既に何年も経ってますが)を徐々にでも付けていきたいなと思っております。
それとコピーライト表示ですが、そうなのですか。古くからやってると良いことも有りそうですね。(2007年からなので)
自身が使うブログに今度入れてみます。
有難うございました。m(__)m
2019-07-15-01:30 aki
[ 返信 * 編集 ]

Re: aki 様へ

自分のブログにテンプレートを適用しました。スマホのことを考慮していなかった過去記事の調整に呆然としています。

使ってみて

1、プラグイン同士の間隔をもう少し詰めたい
2、ページ移動のリンクを記事の上と下の両方(fc2ブログの記事管理の画面みたいな形)に置きたい

と思うのですが、どうすればよいでしょうか。

質問ばかりで申し訳ないですが、よろしくお願いします。
2019-07-24-23:49 ゆーゆら
[ 返信 * 編集 ]
aki

Re: ゆーゆら 様へ

拙いテンプレートをご愛顧頂き、誠に有難うございます。m(__)m

ご質問の件です。

1、プラグインの内余白を調整してみます。
スタイルシート編集枠を1/3程スクロールした所に
.menu-box{
padding:10px 17px 50px;
overflow:hidden;
}
.menu_block{
padding-top:25px;
}
という部分が有ります。ここのオレンジ色の数値が内余白なので、個々の数値を調整して下さい。
(50pxはプラグインの下余白、25pxはメニュータイトルの上余白です。)

2、ページナビゲーションの設置は、JavaScriptやCSSにidを使っているので、各ページに一つしか付ける事が出来ません。では、何回も使えるclassにしたら良いのでは…?と思って弄ってみたのですが、当方には上手く改変できませんでした。
一番簡単なのは、プラグイン3を使うと各ページの上部に表示されるので、今お使いの『PageNavigation 2.0』をプラグイン1から3に変更してみて頂ければすぐ使えます。
プラグインの設定→カテゴリの▼を開いて3に変更、これだけです。
因みに『軽量 ページネーション』というプラグインは、JSとCSSに弊テンプレートと同じid名前が付いているので、id名を変更すれば使えます。

プラグイン3を試してみて頂けますか?
2019-07-25-04:08 aki
[ 返信 * 編集 ]

Re: aki 様へ

おおよそ思っていた形にできたのですが、軽量ページネーションはpagenaviを全部別の名前にしてみても、うまく表示されませんでした。

javascriptはまったくわからないのですが、変えてはいけない所があるのでしょうか。

追記:と思っていたら、プレビューではうまく表示されないだけで、設定したら表示されました。

ありがとうございました。
2019-07-27-15:03 ゆーゆら
[ 返信 * 編集 ]
aki

Re: ゆーゆら 様へ

無事に表示されたという事で何よりです。(^-^)

自力でのJavaScriptの作成や改変は、残念ながら勉強した事が無いので無理ですが、悩む事は出来ますので^^;、ご不明な点がございましたら気兼ね無くお声掛け下さいませ。

今後とも末永くお付き合い下さいます様、宜しくお願い致します。
2019-07-28-04:13 aki
[ 返信 * 編集 ]

Re: aki 様へ

ブラウザの幅を変えて表示してなかったので試したところ、1カラム表示になると軽量ページネーションが表示されなくなりました。
いくつか試した他のページ移動プラグインは1カラムでも表示されました。
また、軽量ページネーションをプラグイン1に移動して、1カラム表示のメニューから軽量ページネーションを表示すると、メニューが壊れてしまうようです。
原因の見当もつきませんが、ご報告まで。
2019-08-03-22:39 ゆーゆら
[ 返信 * 編集 ]
aki

Re: ゆーゆら 様へ

ご報告頂き有難うございます。m(__)m
検証してみましたら、弊テンプレートが1カラムになった時のドロワーメニュー大枠(プラグイン1+プラグイン2)が<nav>というタグで括られて右に格納されているのですが、『軽量ページネーション』の表示にも同じ<nav>が使われていて、ドロワーメニュー側のマイナスマージンが原因で消えてしまったようです。
<nav>というタグは、ページ上の主要なナビゲーションに使われるタグで、何度使っても問題無いはずなのですが、テンプレートのドロワーメニューでマイナスマージンを使っているのが影響してしまったようです。
(そのため、通常の2カラム3カラム状態では表示されます。)
タグ自体は必ずしも<nav>でなくてはいけない訳では無いので、もし『軽量ページネーション』をお使いになるようでしたら、お手数ですが共有プラグインの編集画面のHTML編集を開き、
<!-- 下記の1行をテンプレートのHTMLの表示したい場所に移動 -->
<nav id="変更したid名"></nav>
の部分を
<div id="変更したid名"></div>
のように変更して下さい。
…ですが、既に他の物をお使いのようですね。(^-^)
そちらのページネーションは全頁から選べて使い勝手が良さそうです。

ご連絡頂き、有難うございました。m(__)m
2019-08-04-00:17 aki
[ 返信 * 編集 ]

Re: aki 様へ

<strong>がかかっている一部のフォントサイズや色を変えると、その部分だけ<strong>がキャンセルされてしまうようです。
1.<strong>あ<span style="font-size:x-large;">い<span style="color:#FF0000">う</span>え</span>お</strong><br />
2.<strong>あ</strong><span style="font-size:x-large;"><strong>い<span style="color:#FF0000">う</span>え</strong></span><strong>お</strong><br />
3.<strong>あ</strong><span style="font-size:x-large;"><strong>い</strong><span style="color:#FF0000"><strong>う</strong></span><strong>え</strong></span><strong>お</strong><br />
は全部同じ表示になるはず(以前使っていたテンプレートやリアルタイムプレビューでは同じ)ですが、1.は「いうえ」、2.は「う」が強調されていません。
何とかなるでしょうか。
2019-08-18-11:40 ゆーゆら
[ 返信 * 編集 ]
aki

Re: ゆーゆら 様へ

お返事が遅くなり申し訳ございません。m(__)m
検証していて「何でだろう?」状態だったのですが、原因は reset css であると判明致しました。
大変ご迷惑をお掛け致しました。

スタイルシート編集枠内上部に、スタイルをリセットするCSSが記述されています。
リセットCSSはブラウザごとの違いを最初にリセットして、新たにスタイルを設定し構築していくためのものです。
その中に span も有るのですが、リセットするスタイルとして
font-weight:normal; が指定されております。これが原因でした。

CSSの適用優先順位として<strong>のようなタイプセレクタは、要素に属性を持つものよりも低いので、span の持ってるスタイルが上書きされてしまい、その部分の文字が normal になってしまうという状態になったのだと思います。
試しに reset css 内の font-weight:normal; を削除してみたら強調文字が反映されるようになりました。

ご報告頂き有難うございました。
今迄複数のテンプレートを沢山ダウンロードして頂きましたが、この問題についてのお申し出がございませんでした。
当方も不具合を確認致しましたので、この部分の修正をして更新しようと思います。

修正としましては、テンプレートの下段スタイルシート編集枠内上部に有る
/* -----reset css------ */ 以下5行目位の
font-weight:normal;
という部分を削除して下さい。
そしてもう一ヵ所、
reset css の最終行の後に下記を追加(↓8/20下記を追記致します。このように。)
~省略~section,summary{display:block;}h1,h2,h3,h4{font-weight:normal;}
以上です。後は更新ボタンを押して下さい。


記事に掲載致しましたが、修正方法を変更致しました。
大変お手数をお掛けして 申し訳ございません。m(__)m


これで3パターンとも同じ表示になります。(当方確認致しましたが、宜しければ再度お手数ですがご確認下さいませ。)

この度は重要で有益なご指摘、誠に有難うございました。
また何かお気付きの事などございましたら、気兼ね無くお声掛け下さいませ。
今後とも宜しくお願い致します。m(__)m

p.s. 重要案件なので、'19/08/19 修正・更新記事として掲載致しました。
2019-08-19-16:35 aki
[ 返信 * 編集 ]

Re: aki 様へ

hr要素のwidthで幅を狭くすると規定では中央寄せになるらしいのですが、alignでcenterを指定しても左寄せになってしまいます。
hrは何が非推奨なのか分かりにくいのですが、何か使い方を間違っているのか、そもそも水平線を描くためにhrは使わない方が良いのでしょうか。
2019-09-28-23:48 ゆーゆら
[ 返信 * 編集 ]
aki

Re: ゆーゆら 様へ

HTML4.01での<hr>タグは、「水平線が描画される」という定義の要素でしたが、HTML5の<hr>タグは、テーマの変更、話題の区切りなどを表す要素となり、水平線を描画するという定義では無くなりました。
ただ、現在も一般的なブラウザではHTML5文書で<hr>要素を利用しても水平線が描画されます。
しかし、HTML4.01のalign属性、noshade属性、size属性、width属性は非推奨でしたがHTML5からは廃止されいるので、<hr>要素のスタイル設定はCSSを使用します。

>hr要素のwidthで幅を狭くすると規定では中央寄せになるらしいのですが、~~
…スタイルシート上部に有る resetcss で margin:0; になっているので左寄せになります。
これを解消し中央寄せにするには margin:auto; にすれば良いのですが、時々しか使わない、その部位にのみ、という場合は直接スタイルを記述する方法も有ります。
<hr style="margin:auto; width:300px;">

同じスタイルを何度も使う場合はスタイルシート枠の一番下にでも
hr{
margin:auto;
width:○○px;
}
と追記して更新して下さい。

<hr>を使わないで水平線を引く方法は幾つか有るのですが、テンプレートが変わると反映しなくなる場合が有ります。(独自に設けるclass名等を使いますので、テンプレートを変更する度にCSSへの転載が必要になります。)
2019-09-29-23:56 aki
[ 返信 * 編集 ]

Re: aki 様へ

何度もお手数をかけていただき、ありがとうございます。

きっぱり線が入っていないと自分が区切りを認識しにくくなるので、
hrが非推奨と知ってからpにborderを設定していましたが、
hrの水平線が保証されないのならborderを使ってゆく方がよさそうですね。

本来ブログは「個人が簡単に作れる」はずで、見た目を手軽に変えられるのが当然だと思うのですが、
HTMLの解説を見るとブログですら構造がどうたらと書かれていて、なかなか理解が追いつきません。

2019-10-02-21:48 ゆーゆら
[ 返信 * 編集 ]
aki

Re: ゆーゆら 様へ

そうですね。好きなように(簡単に)書ければ一番良いですし、読まれる方もそこまでの意図を考えているかと言ったら…見る分に<hr>はただの線、ですよね。^^;
発信者の訴えたい重要な箇所や表示させたい部位を、クロールする機械に理解(というか識別)させるためなのだと、無い頭で理解してますが…(^^;
普通の人である私は、気にせず記事を書きたい、というのが本心です。

それじゃいけないのでしょうけど。(;^_^A
2019-10-03-03:56 aki
[ 返信 * 編集 ]

こんにちわ。

テンプレートをお借りしています。
少し教えていただけますか?
最近スマホでも見る事があるのですが
テーブルタグを使った枠などが
スマホ画面でははみ出して見えます。
どうしたらいいのでしょうか?
テンプレートの設定で変更できるでしょうか?
記事は
こんな感じです。↓Read More も見ていただけますかm(__)m

http://mikan9238.blog.fc2.com/blog-entry-2533.html
2019-10-03-17:53 さっちゃん
[ 返信 ]
aki

Re: さっちゃん 様へ

さっちゃん様、こんばんは。
ご質問頂き有難うございます。m(__)m

レスポンシブテンプレートでは、テーブルの幅を固定してはいけません。でないと、そのテーブル幅未満の閲覧媒体(スマホとか)ではみ出てしまいます。
なので、幅を表記する時は100%、として下さい。
例えば『綺麗な枠』ですが、このテーブル内に使っている固定幅 width:500px と、文字下に有る調整幅 width:570px をどちらも width:100% にすると伸縮されて表示します。
ReadMore以下のテーブルの枠が欠けてしまうのは、テーブル枠は固定幅になっていないのに枠が padding:40px になっているからです。
paddingとは内余白です。ここを固定してしまうと、幅が大きい時は良いのですが、狭まると枠内の文字部分が収縮されて限界値で固定になっているpadding部分がはみ出てしまいます。
はみ出しを回避するには、こちらも%表示を使って下さい。
padding:40px になっているのを padding:7% 位にすると丁度良いのでは?と思います。

試してみても直らないようでしたら再度コメント下さいませ。m(__)m
2019-10-03-23:32 aki
[ 返信 * 編集 ]

Re: aki 様へ

まだまだタグも慣れないのですが、頑張ります!!
ありがとうございました。
2019-10-04-18:18 さっちゃん
[ 返信 ]
aki

Re: さっちゃん 様へ

ブログ、拝見させて頂きました。
素敵な枠が楽しいですね♪何より(Flashの変換等)そのチャレンジが良いです。(^-^)
当方のブログは、見せる努力が全く足りない…かな。^^;

また何かご不明な点が有りましたら、どうぞ気兼ね無くお声掛け下さいませ。
2019-10-05-06:32 aki
[ 返信 * 編集 ]

No Subject

初めまして!素敵なテンプレートだったので使用させていただいてます。
今まで気づかなかったのですが、
1記事表示にすると左のメニューが全部コメント欄の下に表示されてしまうのは
私が何かおかしいことをしているのでしょうか?
同じテンプレートでも他の方はそうなっていないようで><。
2020-01-01-21:56 45歳
[ 返信 ]
aki

Re: 45歳 様へ

お返事が遅くなり申し訳ございません。
明けましておめでとうございます。そして、テンプレートのDL及びご利用、誠に有難うございます。

先程拝見させて頂きましたが、必要なタグが削除されてしまっているため、記事カラムが終了できずにメニューカラムまで繋がってしまっているようです。
修正するには、HTML編集枠内の下記部分を修正して下さい。

先ず、ページ送り部分です。
HTML編集枠内2/5程スクロールした所に有った『カテゴリー別表示部分』を削除されているかと思います。その部分を下記のように</div>を追加して下さい。(下記コピペ可)

<!--permanent_area-->
<!--ページ移動・更新順-->
<div class="page_navi">
<div style="font-size:12px;"><a href="<%url>" title="TOPページへ">更新日順</a></div>
<ul class="entry-navi">
<li class="entry-prev"><!--preventry--><a href="<%preventry_url>" title="New"><%preventry_title></a><!--/preventry--></li>
<li class="entry-next"><!--nextentry--><a href="<%nextentry_url>" title="Old"><%nextentry_title></a><!--/nextentry--></li>
</ul>

</div>
<!--/ページ移動・更新順-->
<!--/permanent_area-->


もう一ヵ所、HTML編集枠内3/4程の所に有る下記のような部分に、</nav>というタグを移動していませんか?
下記のオレンジ文字のようになっていたら、本来の位置と違うので、オレンジの</nav>というタグの場所を変更して下さい。

<nav>
<div id="btn2">
<div id="nav_close"><span class="css-cancel"></span></div>
<!--btn2--></div>

<div class="adm">
<!--管理ページリンク-->
<ul class="admin">
<li><a href="<%server_url>control.php" title="管理ページトップ">Admin</a> * </li>
<li><a href="<%url>archives.html" title="全記事一覧">Title list</a> * </li>
<li><a href="<%url>?xml" title="RSS">RSS</a></li>
</ul>
<!--/管理ページリンク-->
</div>

</nav>

オレンジの</nav>を削除し、HTML編集枠内5/6程の所に有る下記の部分に</nav>を追加。(下記のように)

<!-- ========= ▲左メニュー ここまで ========= -->
</div>

</nav>

多分、1カラム時のメニュー部分下段に表示される管理メニューの表示ソースを削除した際に上部へ移動したのだと思いますが、この<nav></nav>という対のタグは管理メニューの表示用では無く、メニューカラムに掲載されるメニューのためのものですので、以後は移動しないようお願い致します。m(__)m

以上ですが、上記を修正しても直らない場合は再度ご連絡頂けますか?
お手数ですが宜しくお願い致します。m(__)m

p.s. 当方の確認作業のため、アクセス解析に沢山連ねてしまって申し訳ございません。(^^ゞ
2020-01-02-22:44 aki
[ 返信 * 編集 ]

No Subject

ありがとうございます!!!
1つ目の</div>で直りました!!
ちゃんと理由があったのですね><
このテンプレから変えたくなかったのですごく嬉しいです。

もう1つの方(nav)は表示が変だ…と動かしてみてたので元の場所に戻しました。

本当にありがとうございます。
akiさん凄いですね。ひたすら感動しています。
また何かありましたらよろしくお願いします。
2020-01-03-09:00 45歳
[ 返信 ]
aki

Re: 45歳 様へ

只今表示が直っている事を確認致しました。(^-^)

HTMLをご覧頂いて、ご自身が運営するにあたって不要なものは削除したりre-designして頂くのは問題無いですし、カスタマイズを楽しんで頂く事を推奨しておりますが、付けたり外したりする事で意図しない結果が起こることも有ります。
是非、カスタマイズする前にテンプレートの『複製』を作ってから作業する事をお勧め致します。
また、改変が心配な場合は遠慮なくご相談下さいませ。(^^)

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

p.s. 当方は近年、かなり昔『銀』で治療したインレーやクラウンを外してハイブリッドやセラミクスのような審美治療を4本受けました。…お高かったデス。^^;
2020-01-03-14:08 aki
[ 返信 * 編集 ]

お礼

「serene_resp2c-r」を使用させていただいております。
お陰様で、googleConsoleから注意をされることもなくなり、こころ穏やかでいられます。

昨年9月から使用させていただいておりますが、今回背景画像の変更にチャレンジしてみました。
 テンプレートは無知ですが、カスタマイズ方法の説明を拝見して、変更することが出来ました。

お礼旁ご報告させていただきます。

拙ブログは下記になります。
何か問題がありましたら、ご指導お願いします。

「菜花亭日乗」
https://nabanatei.com/
2020-02-22-21:00 菜花亭笑山
[ 返信 ]
aki

Re: 菜花亭笑山 様へ

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

ブログ、拝見させて頂きました。
菜の花がとても綺麗で、何となく清しい気持ちになるお写真です♪
画像の変更で、これから季節毎・イベント毎にイメージを変える事が出来ますね。(^-^)
ご利用頂いて ご不明な点や不具合等を見付けられましたら、どうぞご遠慮無くお声掛け下さいませ。

この度は素敵な出会いを頂き有難うございます。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2020-02-22-23:14 aki
[ 返信 * 編集 ]

ブログ説明文の文字色変更について

こんばんは。
また、教えていただきたくコメントしました。
テンプレートの知識がありませんので、申し訳ありませんがよろしくおねがいします。

背景画像の変更についてはありがとうございました。
今回はブログ説明文の文字色変更について教えていただきたいと思います。

背景画像が暗い場合、ブログタイトルとブログ説明が背景画像の暗さに溶け込んで見えなくなります、その場合文字の色を明るくして背景画像から浮き上がるようにしたいのです。

ブログタイトルの文字色については、スタイルシートにコメントが有り、変更ができました。
ブログ説明については、どの箇所で文字色が決められているのか、知識がないのでわかりません。
初歩的な質問で申し訳ありませんが、編集する箇所と方法を具体的に教えていただけるとありがたいです。

よろしくおねがいします。
2020-03-12-20:53 菜花亭笑山
[ 返信 ]
aki

Re: 菜花亭笑山 様へ

いつもご愛顧頂き有難うございます。
ブログ説明文の文字色ですが、全体の基本文字色と一緒(黒)なので、特別に指定しておりません。
なので、色コードを追加して頂けば変更する事が出来ます。

スタイルシート編集枠を少しずつ下にスクロールしていくと、
/* ブログ説明部分 */
.introduction{
padding:0 40px;
}

という部分が有ります。
ここに文字色のスタイルを追加します。
/* ブログ説明部分 */
.introduction{
padding:0 40px;

color:#ffffff; /* 文字色 */
}
基本文字色は記述していませんが元々#000000;の黒色で、上記では#ffffff;の白色を追加しています。
他の色にする場合は、この色コード部分を変更して下さい。
ご参考までに、下記URLは当方サイトのカラーコード・カラーネーム表ですのでご覧下さいませ。
https://e-ssence-main.jp/tips-page/t-websafe.html (カラーコード表)
https://e-ssence-main.jp/tips-page/t-colorname.html (カラーネーム表)

後はテンプレートの更新ボタンを押して完了です。
お試し下さいね。(^-^)
2020-03-12-23:09 aki
[ 返信 * 編集 ]

Re: aki 様へ

2020/03/13 お礼

おはようございます。
早速、ご教示いただきありがとうございます。

スタイルシートの変更部分を具体的に教えていただきましたので、その通り変更しますとめでたくブログ説明文が背景画像から浮かび上がりました。

今回使用したい背景画像は白木蓮ですので、例示していただきました白色が丁度良く、収まりが良いのでそのまま使わせていただきました。

最新のテンプレートを使わせていただき、無知な使用者に労を惜しむことなくご援助もいただき感謝の他はありません。

これで、季節の花や行事、自然、イラスト、テクスチャーを背景画像に変更しても、ブログタイトル、説明文を調整することができます。
 念願の一つが叶いました。

ありがとうございます。

2020-03-13-08:37 菜花亭笑山
[ 返信 ]
aki

Re: 菜花亭笑山 様へ

こんばんは。
ブログ、拝見致しました。素敵な白木蓮ですね♪
ただ、ブログ説明部分の位置が気になったので、スタイルシートを拝見させて頂きました。
そうしましたら、2ヵ所修正が必要な所がございましたので、直して頂けます様お願い致します。

先ず、スタイルシートを上から少しずつ下に見ていきますと、下記のような部分がございます。
body{
background-color:#fcfff2; /* 背景色 */
font-size:1.0em;
 color:#000; /* 基本文字色 */
line-height: 1.8;
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Verdana,sans-serif;
word-wrap: break-word;
overflow-wrap: break-word;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
-webkit-overflow-scrolling:touch !important;
animation:fadeIn 0.5s ease 0s 1 normal;
}

■■color:#000; /* 基本文字色 */
↑青い四角の部分に全角の空白が2文字分有ります。これを削除して下さい。スペースで並びを整える場合は半角にして下さい。
もう1ヵ所、この度改変した部分の一行上にあるpaddingにも全角の空白が有ります。

/* ブログ説明部分 */
.introduction{
□□padding:0 40px;
color:#ffffff; /* 文字色 */
}
青い部分を削除して下さい。(□は半角としてみて下さい。)

スタイルシートの並びを整えるために全角を使うとエラーの原因になるので使ってはいけません。全角文字はコメントアウトしている部分(/* このように挟んでいる部分 */)にのみ使うようにして、それ以外は半角を使って下さいね。
上記を直すと白い文字の位置が右に40px移動します。
修正できましたらまたお声掛け下さい。確認に伺いますので。(^-^)
2020-03-14-02:04 aki
[ 返信 * 編集 ]

Re: aki 様へ

ご指摘ありがとうございました。
具体的に書いていただきましたので、無知の私めにもわかりました。

ご相談する前に自分でコードをいじっていた時に、コメント部分を記入するとき漢字変換モードにして、その儘コードのところも入力してしまったようです。

しかし、目に見えない全角と半角の間違いが見える、ari様の眼はすごいですね。
 今問題のコロナウイルスも見えるのではないかと思ってしまいました。

確かに、説明文が以前より左に寄ったと思いましたが、その理由が私にわかることはありませんでした。

わざわざ、チェックしていただき、アドバイスも頂き、重ね重ねありがとうございます。

また、何か思いつきましたら、アドバイスをお願いするかもしれません、その節はよろしくおねがいします。

2020-03-14-23:04 菜花亭笑山
[ 返信 ]
aki

Re: 菜花亭笑山 様へ

こんばんは♪
只今スタイルシートが直っている事を確認致しました。大丈夫なようですね。(^^)
それと、記事を拝見させて頂きました。
流石に目に見えないものは分かりません。ましてや観音様では無いですよ。^^;
あれ?ちょっと文字の体裁が崩れているかな?と思っただけで、言われないと分からない事も沢山有ります。
まだまだ未熟者なので、不具合も多々ございます。
なので、ご利用頂いて「おかしいな?」と思われましたら、どうぞ遠慮無くお声掛け下さいね。(^-^)

とても有難い記事を書いて頂き、有難うございます。
今後とも末永くお付き合い頂けます様、宜しくお願い致します。m(__)m
2020-03-14-23:39 aki
[ 返信 * 編集 ]

ありがとうございました

カスタマイズに関するアドバイスのコメントありがとうございました!
めちゃくちゃ親切&丁寧な内容に、びっくり&感動しております。

akiさんのコメント通りにCSSに追記をして、カラム落ちを修正することができました★

これからもakiさんのテンプレート、末永く大事に使わせていただきます。
どうぞよろしくお願いいたします(^^)♪
2020-03-20-12:08 情報倉庫β
[ 返信 ]
aki

Re: 情報倉庫β 様へ

ご訪問・コメント頂き有難うございます。(^-^)
本当はご利用になっていらっしゃる方の全てを訪問したい気満々なのです。
が、履歴などでURLが辿れる方だけなので、出来るだけ不具合が目に見えて判る場合は解消して差し上げたいなと思っております。
運営者の方にしてみれば、突然来て声掛けられて迷惑でしょうけども。^^;大変失礼致しました。
ご利用頂いて何か気が付いた点等がございましたら、いつでもお越し下さいね。

この度は素敵な出会いを有難うございます。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2020-03-20-18:50 aki
[ 返信 * 編集 ]

スマホでのブログ説明について

こんにちは。素敵なテンプレートありがとうございます。serene_resp2c-rを使用させていただいております。
ブログの説明文がiPhoneでは表示されないのですが、原因があれば教えていただきたいです。どうぞよろしくお願いいたします。
2020-07-26-04:00 ノア
[ 返信 ]
aki

Re: ノア 様へ

初めまして。テンプレートのご利用、誠に有難うございます。(^-^)

ご質問の件ですが、スタイルシートで意図的に(説明文を)非表示にしています。
iPhoneに限らずAndroidも。…というか、閲覧端末の幅で表示・非表示を制御しております。
管理画面左メニュー「環境設定」の「ユーザー情報の設定」で、ブログの説明部分に入力した文字が300文字までintroductionとして表示されます。
利用される方によっては表示数300文字フルに入力される方もいらっしゃり、その場合、その文字数の多さによってテンプレートのヘッダー部分がいっぱいになり、表示が崩れてしまいます。
PCやタブレットのように、ヘッダー幅が大きく表示される場合は文字数が多くても問題有りませんが、スマホのように表示幅が狭く限られた部位に表示させるのは崩れの原因になります。
それらを排除するため、閲覧幅が600px以下になると(説明文が)非表示になるよう設定しております。
テンプレートをご利用になる方の全てが「同じスマホサイズ」で「説明文の文字数が少ない」とは限りません。
不具合ではございませんので、何卒ご了承下さいませ。m(__)m

表示させたい場合は、スタイルシート編集枠内3/4程に有る下記の部分
.introduction{
display:none; /* 600pxまで非表示 */
}
の青文字部分をオレンジ文字のように変更して下さい。
.introduction{
display:block; /* 600pxまで非表示 */
}
(場所が分からない場合は、利用テンプレートの編集を開いた状態で「Ctrl+Fキー」を押し、開いた窓に .introduction と入れて探して下さい。)

お手数をお掛け致しますが、宜しくお願い致します。m(__)m
2020-07-26-13:00 aki
[ 返信 * 編集 ]

Re: aki 様へ

ご丁寧にありがとうございます!おかげさまで変更できました。短い文なので問題ないと思います。ただ、位置を変更したいのでまた調べてみますね。
またお世話になると思いますが、引き続きよろしくお願いいたします!
2020-07-26-13:54 ノア
[ 返信 ]
aki

Re: ノア 様へ

こんばんは。お返事有難うございます。

無事に表示出来たようで何よりです。
ただ、表示する位置について<header>というタグ内でブログタイトルと説明分はセットになっているため、あまり難しい位置への移動だとスマホ以外の表示でおかしくなってしまう場合が有ります。
著しく異なる位置への変更はお勧め致しませんので、何卒ご了承下さいませ。m(__)m
(出来るかどうかは、先ずご相談下さい。)
2020-07-26-21:40 aki
[ 返信 * 編集 ]

Re: aki 様へ

おっしゃるとおり、うまく変更できなかったので元に戻しました。ありがとうございましたm(__)m
また別の質問をさせていただきたいのですが、未来の日付にして記事をトップに固定させています。タイトルのNEW!を外すことは可能でしょうか?(初心者のため初歩的な質問ですみません^_^;)
もし無理ならすべての記事からNEW!を削除する方法を教えていただけますと幸いです。
2020-07-31-01:26 ノア
[ 返信 ]
aki

Re: ノア 様へ

こんにちは。お返事有難うございます。(^-^)

先ず、FC2ブログに『トップページ先頭に記事を固定表示する』機能が付きましたので、未来日付けにする必要は無くなりました。
https://fc2information.blog.fc2.com/blog-entry-2086.html

未来の日付けにしているのでずっと「New」が出てしまいます。
過ぎた日にちに修正して『固定表示』とすれば表示されなくなるかと。

別の方法としては、テンプレートに予め入っているプラグイン3を使う方法も有ります。
プラグインのフリーエリアを新たに作成し、それをプラグイン3に設定すれば常にエントリーページのトップに表示される[スペース]が出来るので、日付を気にせずお知らせ等を載せる事が出来ます。
プラグイン3を使う方法について詳しく知りたい場合は、再度コメント下さいませ。m(__)m
2020-07-31-12:19 aki
[ 返信 * 編集 ]

Re: aki 様へ

こんにちは。ご丁寧にありがとうございます。固定記事にする設定があるのを全然知りませんでした💦さっそく設定したいと思います。
ただ、固定記事を2つ作りたい時がありますので、プラグイン3の方法も教えていただけるとありがたいです。よろしくお願いいたします。
2020-07-31-19:55 ノア
[ 返信 ]
aki

Re: ノア 様へ

お返事頂き有難うございます。
プラグイン3は初めからテンプレート内に用意されていて、エントリーページではトップに、個別記事ページでは記事下(コメントが有ればその下)に表示されるようになっています。
FC2ブログ管理画面左に有るメニューから『プラグインの設定』を表示すると、表の列に[カテゴリ ▽]というのが有ります。ここをクリックするとプルダウンで1.2.3と出ますので、3を選ぶとプラグインカテゴリー3としてエントリー記事の上に表示されるようになります。

お知らせのようなものを表示したい場合は『公式プラグイン追加(PC用)』を押してページを移動し、拡張プラグインの『フリーエリア』を追加します。
表示された『フリーエリアの編集』の[タイトル]を入れ[プラグインカテゴリ]を3にし、[フリーエリア内容の変更]の枠内に、表示したい文章や画像タグ等を入れて【追加】ボタンを押せば完成です。
複数作ればプラグイン3の数だけ表示させる事が出来ますし、トップのみに表示させて2ページ目以降は表示させない事も出来ます。
参考記事:https://sorauta1.blog.fc2.com/blog-entry-325.html
1) プラグイン3をお知らせ用にインデックスページのみに表示。

以上、参考にしてみて下さい。m(__)m
2020-07-31-22:39 aki
[ 返信 * 編集 ]

Re: aki 様へ

ありがとうございます。
やってみたのですが、レイアウトが崩れてしまいました💦
右カラムが左下のほうに移動してしまいました。もし原因がわかれば教えてください。よろしくお願いします。
2020-08-01-19:34 ノア
[ 返信 ]
aki

Re: ノア 様へ

こんばんは。
原因で考えられるのは…幅より大きなものを入れたため、ではないでしょうか。
画像とか固定幅の表とか。
それ以外の原因は思い当たりません。

鍵コメで構いませんので、URLをお教え頂ければ調査いたします。
(若しくはメールでお教え下さい。)他言は一切致しません。m(__)m
2020-08-01-19:46 aki
[ 返信 * 編集 ]

Re: aki 様へ

本当は調査していただきたいところなのですが、今日明日はアクセスが多くなるため、とりあえず整えておかないといけなくて元に戻しました💦
ひとつ心当たりがあるのですが、プラグイン3に文章を入れたのですが、文字飾りをつけたくてHTMLでの本文コピペをいたしました。それが原因ですかね?
(初心者ですみません)
2020-08-01-19:57 ノア
[ 返信 ]
aki

Re: ノア 様へ

HTMLソースに何が入っているかにもよります。
改行不可なものが有るのかもしれないですし…何ともお返事出来ません。
土日明けでも結構ですし、若しくはそのプラグイン3に入れたい文言(HTMLでも可)をメールフォームで送って頂いても良いですが、如何でしょう?
2020-08-01-20:21 aki
[ 返信 * 編集 ]

Re: aki 様へ

お手数をおかけします💦
メルアド記入しましたのでよろしくお願いします。
2020-08-01-20:37 (^_^)
[ 返信 ]

記事のフォントサイズについて

こんにちは。
一度コメント欄にてお世話になりました。引き続き使わせていただいております。ありがとうございます。
記事のフォントサイズを少し大きくしたいと思っているのですが、可能でしょうか?font-sizeで検索しましたが、どこを変更すればいいのか分からずじまいで…
お時間ある時に教えていただけますと幸いです。どうぞよろしくお願いいたします。
2021-07-04-20:42 ノア
[ 返信 ]
aki

Re: ノア 様へ

こんばんは。コメント頂き有難うございます。

テンプレートの文字サイズは全体で見ているので『記事部分』としての設定をしておりません。
なので、スタイルを追加して下さい。

テンプレートの編集画面を表示して、キーボードのCtrlキー+Fキーを押し検索窓を表示します。
その中に『 .con_body 』と入れて調べると、ノア様のCSSの場合は4カ所見付かると思います。
その中の1/4番目に有る

.con_body{
margin:15px 25px 0;
}

を下記のように文字サイズのプロパティを追加して下さい。

.con_body{
margin:15px 25px 0;
font-size:1.1em;
}

オレンジ文字部分が追加です。1.1emという数値を変更すると文字サイズが変わりますので、ご自身で丁度良いように調整して下さい。(記事の文字サイズです。メニューカラムやタイトル部は変更されません。)
ご不明な点が有りましたら、再度ご連絡下さいませ。(^-^)
2021-07-04-22:06 aki
[ 返信 * 編集 ]

Re: aki 様へ

さっそくご丁寧にありがとうございます。
うまくいきました!
バランス的に、記事タイトルも大きくしたいのですが、そのやり方も教えていただいてもよろしいでしょうか?
何度も申し訳ありません。
2021-07-04-23:12 ノア
[ 返信 ]
aki

Re: ノア 様へ

記事のタイトル部分は、サイドのメニュータイトルと共有しているので別にして再設定します。
スタイルシート編集枠の一番下に下記を追加して下さい。

.entry_title h2, .menu3 h2 {
font-size:1.2em;
}


1.2emが文字サイズですので調整して下さい。
先のお返事で一緒に書けば良かったですね。気が利かなくて申し訳無いです。^^;
2021-07-05-00:20 aki
[ 返信 * 編集 ]

Re: aki 様へ

とんでもございません!
いつもご丁寧にありがとうございます。
タイトルもうまくできました。
引き続き使わせていただきますねm(__)m
2021-07-05-19:59 ノア
[ 返信 ]
aki

Re: ノア 様へ

こんばんは。無事にカスタマイズ出来たようで何よりです。
また何かございましたらコメント下さいませ。

今後とも宜しくお願い致します。(^-^)
2021-07-05-21:37 aki
[ 返信 * 編集 ]

記事のリンクについて

こんばんは。
メニュー画面のリンクが効かなくなりました💦
詳しくご説明したいので、メールをいただけますとありがたいです。大変お手数ですが、お時間がある時によろしくお願いいたします。
2021-07-06-22:35 ノア
[ 返信 ]
aki

Re: ノア 様へ

こんばんは。
恐れ入りますが、当方ブログの右側メニューに有るメールフォームをご利用下さいませ。
若しくはコメント欄を利用し、鍵付きでご相談下さい。
宜しくお願い致します。m(__)m
2021-07-06-23:00 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-07-06-23:21 -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-07-06-23:29 -
[ 返信 ]
aki

Re: - 様へ

確認致しました。お疲れ様でした。(^^)
2021-07-07-21:36 aki
[ 返信 * 編集 ]

Read more 表記が…

初めまして、serene_resp2c-rを使わせて頂いております。記事を投稿したところ…TOP画面で記事をそのまま見ると…囲ってある[Read more]表記が(Read more article)と出ていますが、記事の題名をクリックして見ると、[Read more]と正しく表示されます。

自分で分からないままテンプレートを少しいじったので…表記がおかしくなったのかも知れません。原因が分かるようでしたら教えて頂ければ幸いです。m(_ _)m
2022-12-07-10:08 まったり
[ 返信 ]

解決しました(汗

多分、TOP画面なので…Read more articleなんですね。私も含め、ブログに来て頂いている方々も年寄りが多いので…日本語表示に変えました。お騒がせしてすみません。m(_ _)m
2022-12-07-12:50 まったり
[ 返信 ]
aki

Re: まったり 様へ

こんばんは。ご質問頂き有難うございます。m(__)m
問題は解決されましたか。良かったです。^^;

> 多分、TOP画面なので…Read more articleなんですね。

…お察しの通りです。初めに表示されるページは記事本文のページでは有りません。なので続きが有る時にだけ「Read more article」が表示され、記事本文のページへ移動します。(…で、記事本文のページに移動した後は「Read more」になります。)

無事に文言を変えられたという事は、HTMLをご覧頂いて改変されたという事ですね。
HTMLを見て頂くと分かるのですが、(追記を含めた)記事本文のページを「Read More(続きを読む)」で開閉せず開いたままにする場合は、下記のようにして頂く事で叶います。

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

↑こうなっている部分を

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

↑このように変更して更新ボタンを押して完了です。
いちいち記事ページで展開させるのがご面倒な場合にカスタマイズしてみて下さい。(複製を作ってからの作業なら安心してカスタマイズできます。)

----------
まったり様のブログ記事を少し拝見させて頂きました。
最近母が自転車で(単独)転んだ記事を書きましたので一言だけ。
自転車保険等に入っていなくても、自動車保険に自転車の特約が付いている場合は(賠償責任以外の)保険金が請求できます。
但し、保証されるのは「死亡・後遺障害・入院」なので通院には出ませんが。
この特約は本人と家族も使えるので、付いているか確認しておくと良いですよ。(^-^)

----------
遅れ馳せながら…この度はテンプレートのご利用、誠に有難うございます。
また何かございましたら、いつでもお声掛け下さいませ。
今後とも末永くお付き合い下さいます様 宜しくお願い致します。m(__)m
2022-12-07-21:29 aki
[ 返信 * 編集 ]

Thank you very much.

お忙しい中、早速の返答ありがとうございます。一人で勘違いして…すみません。ご教授の通り…<%topentry_more>にしました。この方がお年寄りには判り易いかと…(苦笑

また、拙い記事をご覧頂き恐縮です。妻の自転車での怪我は大した事なかったので不幸中の幸いでしたが…残念ながら自転車特約の保険には入っていなかったので早急に付帯する予定です。

妻の母(県外実家:義母92歳も、数年前、自宅で股関節を骨折、また別の場所を2度骨折、数ヶ月毎に手術が3回続きました。現在も、県外実家で何とか一人暮らししています。(要介護3:ヘルパー・デイサービス利用)
自転車で転倒(事後の経過は、akiさんと非常によく似ています。これから手術や、介護の事などで色々と大変でしょうが…体に気を付けて親孝行してあげてください。(≧∇≦)b

--------
以前のテンプレートは、気に入って12年程使わせて頂いていましたが…流石に古く…替えようと決断…探していたところ…この素敵なテンプレートに巡り逢えました。
また、訳の分からない事を聞くかも知れませんが…認知機能が低下していると思って許してやってください。こちらこそ末永く宜しくお願い致します。m(_ _)m
2022-12-08-18:14 まったり
[ 返信 * 編集 ]
aki

Re: まったり 様へ

こんばんは。お返事頂き有難うございます。(^-^)
追記部分、展開にされましたね。そちらの記事で確認致しました。
ただ、記事ページに移動した後 何処の文章からが続きなのか分かり難いかな?とも感じました。^^;
もし読み出し部分が分かり難いとお感じであれば下記のように先のカスタマイズ部分を直してみて下さい。(コピペ可)

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

こうすると、追記で表示される部分の上に罫線が表示されるようになりますのでお試し下さいませ。m(__)m

----------
保険の件ですが、自動車保険の特約は各社微妙に違いが有るようですので、どんな保証が付けられるのか確認してみて下さいね。
私もそんなに詳しく無いので…^^;
(私の自動車保険では、同居の親族で無かったため特約が付いていても使えませんでした。)

----------
お義母様のお怪我の件、立て続けに手術3回は大変でしたね。どこのお宅も同じように色々有るのだなぁと感じました。
今回私も色々学びましたが、右往左往しながらも進んでいくものなのですね。そして、何事もお役所に申請しないと損をするというのも知りましたし。
これからが親孝行の時間だと思うので、大事に過ごしていこうと思います。

----------
この度お使い頂いているテンプレートは、スマートフォンで閲覧した場合は各記事が要約表示になる仕様です。
その他、閲覧デバイスの幅によって表示が変わるように作ってあります。このようなテンプレートを「レスポンシブデザイン」と言います。
お持ちのスマホ等で是非確認してみて下さい。

改めまして、今後とも宜しくお願い致します。m(__)m (返信はお気になさらず。)
2022-12-09-02:01 aki
[ 返信 * 編集 ]

Re: 2022-12-09-02:01 aki 様へ

>この度お使い頂いているテンプレートは、スマートフォンで閲覧した場合は各記事が要約表示になる仕様です。

について質問です。
その機能は「serene_resp2c-r」だけなのでしょうか?
「serene_resp3c」でもそのようなのでしょうか?
さらには、「serene_resp」系以外にも有るのでしょうか?

たいへん美味しそうです.笑
2022-12-09-17:59 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

こんばんは。コメント有難うございます。

>>この度お使い頂いているテンプレートは、スマートフォンで閲覧した場合は各記事が要約表示になる仕様です。

…こちらについてです。
当方制作の全てのテンプレートがスマホ表示で要約表示になります。
故に「serene_resp2c-r」も「serene_resp2c-l」も「serene_resp3c」もです。
上記のように書いたのは「PCで全文表示になっていても SPでは要約表示になります」という意味です。
初めから要約表示のテンプレートでは勿論要約表示です。

呑兵衛あな様のテンプレートはご要望によりPCもSPも全文表示になるようにカスタマイズしています。
私の書き方が悪くて、分からない表現でしたらすみません。m(__)m
2022-12-09-21:58 aki
[ 返信 * 編集 ]

Re: aki 様へ

>呑兵衛あな様のテンプレートはご要望によりPCもSPも全文表示になるようにカスタマイズしています。

なるほど、わかりました。
ありがとうございました
2022-12-10-08:41 呑兵衛あな
[ 返信 ]

Re:2022-12-09-21:58 aki 様へ

念のためお尋ねします。
私が利用させていただいているテンプレートを、PCは全文表示のままで、SPだけ要約表示に変更するとしたなら、カスタマイズは大変でしょうか?
簡単ならば工事したいと思いますので、教えてください。
大変ならば、わすれてください。
2022-12-10-15:20 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

> 簡単ならば工事したいと思いますので、教えてください。

テンプレートをお渡しした後に色々更新して頂いたため そのままでは使えませんので、スタイルシート編集枠の最後に下記を追加して下さい。

.mask{
position:absolute;
top:0;
left:0;
z-index:2;
width:100%;
height:100%;
background:rgba(255,255,255,.5);
-webkit-transition:.3s;
transition:.3s;
opacity:0;
}
.mask .caption{
color:#222;
font-size:120%;
font-weight:normal;
position:absolute;
top:50%;
left:50%;
width:100%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.left:hover .mask{
opacity:1;
}
@media only screen and (max-width:480px) {
.kiji1{
display:block; /* SP時要約表示 */
margin:0;
}
.kiji2{
display:none !important; /* 要約表示時記事非表示 */
}
.con_body p{
margin:0;
}
}


後は更新ボタンを押して頂ければ完了です。
先に申し上げておきますが、FC2ブログのサーバーに上がっている画像以外は、要約表示にした際のサムネイルとして表示されませんのでご了承を。(故に、要約された記事文頭が3行表示されるだけになります。)
作業の際は、不具合が有った時のために複製を作って頂くと安心です。m(__)m
2022-12-10-22:00 aki
[ 返信 * 編集 ]

Re: aki 様へ

ありがとございました。
お手数をお掛けしました
2022-12-11-08:25 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

こんばんは。スマホで表示を確認致しましたが問題無いみたいですね。
しかし、記事ページを拝見して別の問題を見付けました。
そちらでコメントしておりますので、お手数ですがお時間の有る時に追記して頂けます様 宜しくお願い致します。m(__)m
(このコメントへの返信は不要です。)
2022-12-11-21:26 aki
[ 返信 * 編集 ]

No Subject

テンプレート作成者の御意見をお聞かせいただければ幸いです。

利用させていただいている[ct_responsive3c]には以下の記述がありますが、これを除去しようと思うのですが、如何でしょうか?
<meta http-equiv="X-UA-Compatible" content="IE=edge">

この記述は、「IE」の互換モードを指定するための御呪い理解していました。
よって、来月02/15のWindows定期更新で「IE」が消滅するなら、不要と考えた次第です。
特に『IE対策の「X-UA-Compatible:IE=edge」は必要か? | バグ取りの日々(20/12/06)』によれば、以下のことです。
>※IE11で「IE=edge」を指定するとIE11で表示します。
> 重要なのは、「IEの最新で表示する」です。
> Windows10のEdgeがインストール済みの環境でも、IE11で表示されます
とのことです。また、『あくまでIEでの互換モードであるため、Edgeでは機能しない』とのことです。
私はこれまで『記載があっても問題はないのでわざわざ削除する必要はない』と考えていたのですが、02/15のにIE11が提供されなくなったら、「IE」の互換モードを指定する事には問題が発生するのではないかと考えた次第です。

重ねて質問しますが、以下の記述を除去することで『互換モードを指定』する事以外に何かの不都合が発生するでしょうか?
<meta http-equiv="X-UA-Compatible" content="IE=edge">

PS
本件に関する私の記事です。
https://nono634.blog.fc2.com/blog-entry-7745.html
2023-01-09-20:57 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

ご存知の通り <meta http-equiv="X-UA-Compatible" content="IE=edge">は、IE の下位互換モードを IE=edge と書く事で最新の状態で表示させる設定です。

私自身は、現行 記述自体が有っても問題は無いと考えておりますが、サポートが終了し今後は互換性を考慮する必要が無くなるので、テンプレートの方もいずれ削除すると思います。
気になるようなら先に削除して頂いて構いません。

>> Windows10のEdgeがインストール済みの環境でも、IE11で表示されます。

…これについて、私のPC(Win10)に Edge と IE11 の両方入っていますが、Edge は Edge が表示されますし IE11 も然りで Edge で IE は表示されません。
期日(02/15)が来たら何か変わるのかは、その時に見てみようと思います。

Web上に多大な数のサイトが有って、その多くに上記が記述がされています。
またその中にも記述されていないサイトも増えてきています。
なので、この一文がある事で何か不具合を起こす事は無いと思います。ブラウザ側が無視すると言うか。せいぜい有るとしたら validator でエラー扱いの文句くらいかなと。

あくまでも私個人の見解ですが。^^;
2023-01-10-02:37 aki
[ 返信 * 編集 ]

Re: aki 様へ

ありがとうございました。
>期日(02/15)が来たら何か変わるのかは、その時に見てみようと思います。

ですね。
2023-01-10-08:12 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

恐れ入りますが、今後はこの記事では無い所へのコメントをお願い致します。
一応このページの記事は「serene_resp テンプレート共有化しました。」というものです。
新しいページを作りましたので、該当する記事が無い・分からない場合はそちらへのコメントをお願い致します。
(ブログの右メニューに有る「Categories」→「該当記事が無い・分からない場合のコメント投稿はこちら」をクリック。)
2023-01-15-00:55 aki
[ 返信 * 編集 ]





非公開コメント