Top Page › Template › テンプレート › serene_resp テンプレート共有化しました。

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

2019-06-11 (Tue) 17:23

本日、申請していたテンプレート [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


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

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

2) 検索バーはレスポンシブ未対応なので非表示にする。
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  (^_^)
[ 返信 ]






非公開コメント