*Essence

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

Top Page › Template › テンプレート › serene_resp テンプレート共有化しました。
2019-06-11 (Tue)  17:23

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


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

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

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

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


Comment




ご質問,不具合は確認用にURLをお願いします。




管理者にだけ表示を許可

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 様へ

<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
検証してみましたら、弊テンプレートが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 様へ

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

aki Re: ゆーゆら 様へ

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

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

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

Re: aki 様へ

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

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

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

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

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 様へ

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

使ってみて

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

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

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

aki Re: ゆーゆら 様へ

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

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

Re: aki 様へ

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

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

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 様へ

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

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

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

aki Re: ひまわり 様へ

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

アルバム設置について

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

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 [ 返信 * 編集 ]

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: ゆーゆら 様へ

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

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

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

複数画像の表示

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

aki m3hm( okki ) 様へ

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

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

ありがとうございます

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

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

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

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

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

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

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

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