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

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

テンプレートの制作時に、インデントを付けた方がカスタマイズも分かり易いかなぁ~?…と考えるのですが、自身の頭が古いもので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 ) [ 返信 * 編集 ]