*Essence

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

Top Page › Template › カスタマイズ › serene_resp 2c,3c のカスタマイズ(エントリー要約表示)
2019-06-12 (Wed)  00:01

serene_resp 2c,3c のカスタマイズ(エントリー要約表示)

レスポンシブテンプレート、serene-resp2c(2カラム), serene-resp3c(3カラム)の記事表示の変更方法です。
共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の全文表示になっています。
これを要約表示に変更する方法です。

serene-全文画面

↑これを↓こんな風に(見本は3カラム。クリックでちょっと大きく表示します。)

serene-要約画面


◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[serene_resp2c(3c)]のHTML編集枠を開いて、枠内の上から1/4程スクロールした所に有る <!-- 全文表示用HTMLの貼り換え ここから--> という所から <!-- 全文表示用HTMLの貼り換え ここまで--> という所までを、下記↓Read More に掲載しているHTMLに変更して下さい(コピー&ペースト)。
不具合が有った時のために『複製』を作成して作業する事をお勧め致します。m(__)m

2019/07/25 の更新加筆により、下記部分の順を一行変えています。

<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->



<div class="blog">
<!-- 要約表示用HTMLの貼り換え ここから-->
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2">
<span class="tape t-right"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
<!-- 投稿時間不要の場合は ここから-->
<!--permanent_area--> <%topentry_hour>:<%topentry_minute><!--/permanent_area-->
<!-- 投稿時間不要の場合はここまでを削除 -->
<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">&#9998;</span></a>
</span>
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<!--div class="kiji1"--><!--kiji1-->
<div class="con_body">
<div class="left">
<a href="<%topentry_link>" title="<%topentry_title>"><img src="https://blog-imgs-124.fc2.com/s/o/r/sorauta1/10pxtp.png" data-src="<%topentry_image_url>" alt="<%topentry_title>" onerror="this.src='https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif';"></a>
</div>
<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
</div>
</div>
<p class="right-txt"><a href="<%topentry_link>">… 続きを読む</a></p>
<!--/div--><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->
<div class="con_body<!--permanent_area--> pd-plus<!--/permanent_area--><!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area--> kiji1 kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->">
<!--permanent_area-->
<%topentry_body>
<!--more_link-->
<p><a href="<%topentry_link>#readmore">Read More</a></p>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">​</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--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>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
<!--/permanent_area-->
</div>
<!-- 要約表示用HTMLの貼り換え ここまで-->



最終更新日 : 2019-07-25

Re: どなるど 様へ * by aki
無事に改変できたようで何よりです。(^-^)
高さが不確定なものは100%で可変するんじゃないか?と思ったけど、駄目でしたね。(やってみた。^^;)
簡単なのは、表示してみて高さ分を余分に見ながら数値を入力するのが一番手っ取り早いかな~と思います。

さて、今回修正しなきゃいけないのが共有申請して有るレスポンシブテンプレート『全て』なので(*´Д`)、記事に上げるのに少し時間が掛かります。
更新のついでに、コメントの返信ボタンを追加するつもりです。(押すと、Re:名前様へ と入力されます。それだけなんですが。)
カスタマイズに後日掲載しますので、宜しければ見てやって下さいませ。m(__)m

ありがとう御座います。 * by どなるど
akiさん、こんにちは(^_^)

いろいろワガママな質問にも対応していただき、
ありがとう御座いますm(_ _)m

(1) iframeの件
私、htmlとかcssなどチンプンカンプンでよくわかってないのですが…
akiさんが詳しく説明してくれるので勉強になります。
タグの【height= 】を変更したら下の線が見えるようになりました♪
あと、YouTuberも教えてくださったように変更してみました(*^^*)
ほぉ〜なるほど〜こうなるのか!と納得しました。
これからは活用させていただきます。

(2)カラム切り替わりの件
770を探したら、html編集に1か所とcss編集に2か所ありました。
この3か所でよろしかったでしょうか?(間違ってたらスミマセン)
769は1か所だったので、言われた通りに変更してみました。
以上を変更してみたら、主人のiPadも2カラムで見れるようになりました。
本当にありがとう御座いますm(_ _)m

p.s. fc2の移動する広告は確かに気になりますよね(^^;)
いろいろ大変な作業だと思います。
夜更かしはあまりせずに…ご自愛ください。

どなるど 様へ (2) * by aki
カラムの切り替わり、ですが
10.5インチ→1,112 x 834(px)
9.7インチ→1,024 x 768(px) なので、770pxで1カラムに切り替わる数値を760px位にすれば良いと思います。
テンプレートのスタイルシート編集枠内で『770』という文字列を探して下さい。
キーボードで『Ctrl』+『Fキー』を押して検索窓を出して探すと3か所有ります。
その3か所の770を760に直して下さい。そして、検索窓に『769』という文字列を入れ、見付けた(1か所)769を759に変更し更新して下さい。(そうすると、760pxまでは2カラム表示になります。)
是非、お試しあれ。m(__)m

どなるど 様へ (1) * by aki
いつもご愛顧有難うございます。m(__)m
iframeの横幅は、reset css内に max-width:100%; になっているので画面の横幅が狭くなっても収まるのですが、高さについてはタグ内の height="657" までしか表示しません。
なので、レスポンシブで横が狭まった際に折り返して下がった文字列で高さが変わってしまうと、それを超えた分はタグ内に有るスタイル overflow:hidden で非表示になります。
故に、iframe内ではみ出た文字によって下段の線が見えなくなってしまう訳です。
中身の縦横比が固定で無いiframeを可変させるには、何かしらのscriptを使うなどの手段が必要になると思いますので、そこまで必要かな?と。
一番簡単なのは、文字などの折り返しで増えた高さで線が非表示になるのですから、高さをその分初めから増やしておけば良いのでは?と思います。
タグ内の数値を height="657" から height="700" にする位で丁度良さそうですよ。

また、iframeと言えば、YouTubeの動画を簡単にレスポンシブ掲載するcssがテンプレートに初めから入ってますので、是非ご活用下さいね。(YouTubeはアスペクト比16:9に統一されたようなので。昔は違ったらしい。)
https://sorauta1.blog.fc2.com/blog-entry-276.html#example3
お試し下さいませ。m(__)m

p.s. 当方制作ブログを1カラム表示にした際に(ブラウザのモバイル表示時)FC2の上部に移動する広告がそのまま固定してしまう不具合が有ります。…というか、FC2ブログの広告に上がるバージョンが復活!というのが問題。。
https://vanillaice000.blog.fc2.com/blog-entry-921.html
(Akira氏の記事で教えてもらいました。^^;)
只今鋭意修正作業中ですので、近日記事掲載時にお読み下さいませ。
お手数をお掛け致します。m(__)m

2カラムと1カラム * by どなるど
またまた、こんばんはm(_ _)m
何度もすみません。。

とってもワガママな質問で申し訳ないのですが…
こちらのテンプレート【serene-resp】で、
2カラムから1カラムに切り替わる画面サイズを変更したいのですが、
そういう事は出来ますでしょうか?

いつもiPadでブログを更新したり見たりしています。
私が使ってるiPadは2カラムで表示されるのですが、
主人のiPadはひとまわり小さいサイズなので1カラムで表示されます。
(※縦画面で見た時です)
どちらも2カラムで見れるようにしたいのです(^^;)

ちなみに私のiPadは10.5インチで主人のは9.7インチです。

簡単に出来そうならで結構ですので宜しくお願いします。

iframeタグの投稿で * by どなるど
akiさん、こんばんはm(_ _)m

こちらのテンプレート(2カラム)で、
今回はiframeタグを使った投稿をしたのですが、
少々気になる所があったので質問です。

本日、Facebookの埋め込みタグをコピペしてシェアしました。
画像を確認していただければ、わかりやすいと思います(^^;)

小さい画面(スマホなど)で見る、1カラムでは問題ないのですが…
https://blog-imgs-128.fc2.com/l/e/c/lechat5/201907031629486f4.jpeg

大きめの画面で(iPadやパソコンなど)で見る、2カラムだと下の線が消えてしまいます。
https://blog-imgs-128.fc2.com/l/e/c/lechat5/20190703162759e01.jpeg

2カラムで見ても下の線が消えないようにする事はできますでしょうか。。
あれば教えて頂きたいですm(_ _)m

追記…
環境によって違うみたいです(^^;)
iPadを縦画面で見てると下の線が消えるのですが、
横画面で見ると下の線が消えませんでした。
どちらも2カラム表示です。

どなるど 様へ * by aki
いえいえ、こちらこそいつもご指摘頂いて感謝しております。
画像も無事に表示出来たようで何よりです。
素人なもので…^^;先ずキチンと形にする事が最優先で、ご利用頂いている方の目線がやっぱり足りないみたいです。
どうぞこれからも、気になった点等を見付けられましたら何なりとお教え下さいませ。(^-^)

今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

バッチリでした。 * by どなるど
akiさん、今晩は(^-^*)

先ほど更新されたスタイルシートをコピペして確認したところ
バッチリでした(^^)v

トップ画像を左右余白なしにして作成し、それに貼り替えてもオッケーでしたので問題解決です。
本当に度々対応していただきまして、ありがとうございましたm(_ _)m

p.s.
実家のご家族と連絡がとれてよかったです。

どなるど 様へ * by aki
先程画像を見ながら確認致しました。
当方が持っているのは画面の小さいiPhoneSEなのですが、どなるど様の上手い加工によって不具合が有る事が分かりませんでした。(^^;
確かに画像を見比べると左右が欠けてしまうようですね。
どうやら、スマホで見た場合の記事やプラグイン3の左右余白に合わせるためにトップ画像の左右に margin(外余白)を付けているので、その分が縮小されるのではなく非表示になってしまうのが原因のようです。
故に考え方を変えて、画像や記事・プラグイン3に付けている margin・padding を外し、それを覆うdivのcssである #content に padding(内余白)を付けて左右を合わせる様に変更致します。
大変ご面倒なのですが、スタイルシートの上から順番に探って変更・削除をお願い致します。m(__)m

(編集枠上からスクロール1/8程)
/* トップ画像 */
.topimg {
height: auto;
position: relative;
overflow: hidden;
/* margin-top: 10px; 削除*/
padding-top: 46.67%;
background: url(https://blog-imgs-128.fc2.com/s/o/r/sorauta1/cf-img2.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

(編集枠上からスクロール1/3程)
/* 2カラム+ベース部分 */
#content {
width:870px;
float:left;
padding:10px 10px 0 20px; /*数値左10px追加*/
}

(編集枠上からスクロール2/3程)
/* 1カラム */
@media only screen and (max-width: 769px) 以下の
#content {
width: 100%;
float: none;
margin: 0;
padding: 0 15px; /*10pxを15pxに変更*/
}
.topimg {
/* margin:0 15px; 削除*/
}
.pan_box {
/* margin:0 15px; 削除*/
}
.blog {
/* padding:0 15px; 削除*/
}
.archive, .menu3 {
/* padding:0 15px; 削除*/
}


(編集枠上からスクロール5/6程)
@media only screen and (max-width:600px) 以下の
#content {
/*padding: 0; 削除*/
}

@media only screen and (max-width:420px) 以下の
#content {
padding: 0 10px; /*#contentを追加*/
}

.topimg {
/* margin: 0 10px; 削除*/
}
.archive, .menu3 {
/* padding: 0 10px; 削除*/
}
.blog {
/* padding: 0 10px; 削除*/
}


以上です。赤い文字列は追加若しくは変更、青い文字列は削除して下さい。
共有テンプレートと、テンプレート修正記事のスタイルシートテキストも更新致しましたので、そちらを適用して頂く事も出来ます。
https://sorauta1.blog.fc2.com/blog-entry-322.html
改変後、ご確認頂いてまた状況を教えて頂ければ幸いです。
宜しくお願い致します。m(__)m

p.s. 地震の件、ご心配頂き有難うございます。
当方の実家が有る新潟市内は震度4位だったようです。
すぐ電話した際に掛かり難く、連絡が付くまで当方も心配しましたが、皆無事との事で安堵致しました。(;^_^A
2004年の新潟県中越地震や2007年新潟県中越沖地震から10年超、実家は海岸から近いので未だに心配が絶えません。。

早々に対応ありがとう御座います。 * by どなるど
akiさん、こんばんは。
コメント通りにしたら【・】も削除出来ました。
本当にありがとうございますm(_ _)m

トップ画像の件ですが…
確認したスマホは『iphone7plus』と『htc u11』です。
ブラウザはsafariとChromeです。
画像を確認していただければわかりやすいと思うのですが、

【アップしたトップ画像】
https://blog-imgs-128.fc2.com/l/e/c/lechat5/201906181924013a2.jpeg
【持ってるスマホで見たとき】
https://blog-imgs-128.fc2.com/l/e/c/lechat5/20190619014905c11.jpeg

コルクの部分の余白はブログタイトルが見えやすいようにと上と、あと左右にあります。
この左右の余白はスマホで見たときだけ切れてしまうので余分につけました。
例えて言えば、左右に余白を2cmつけてるけどスマホで見ると1cmになる感じです(説明が下手ですみません。。)

ちなみに…
『表示画像の高さ(400) ÷ 表示画像の幅(800) × 100』で
50.00%にしてます。

p.s.
akiさんのご実家は新潟県だと思いましたが…地震がありましたが大丈夫ですか?皆さんがご無事でありますように。。

どなるど 様へ * by aki
ご連絡有難うございます。
そして、お気付き頂き有難うございます。
CSSの該当箇所を当方でも削除してみた所、list-style-type:none;が無くなった事でデフォルトのリストマークが表示されてしまいました。
これは、スタイルシートの頭に有るリセットCSSで記述していなかったのが原因です。
先程テンプレートと、修正用CSSテキストに追記して更新致しました。

どなるど様がカスタマイズして下さる度に、自身では確認できなかった事が色々分かります。
とても助かっており、感謝してもしきれません。
本当に、いつも有難うございます。m(__)m

肝心の修正箇所ですが、スタイルシートを開いて頂き、一番上の
/* -----reset css------ */ の中、色々書いて有りますが下から4行目に
box-sizing:border-box;} と有りますので、その部分に追記して
box-sizing:border-box;list-style-type:none;} として更新して下さい。これで消えると思います。

それと、当方のスマホでは確認できないのですが…貴ブログの横が切れる、というのは画像のどの部分の事でしょうか?
お手数ですが、宜しければお教え頂けますか?

リストマークの削除について * by どなるど
何度も何度も大変申し訳ありません(^^;)

このテンプレートのプラグインのリストマークについて質問です。
リストマーク【○】を消したいなと思ったので、
スタイルシートの編集で『リストマーク不要の場合はここからここまで削除』を削除してみたのですが、
【○】から【・】に変わりました。この【・】を削除する方法はありますか?

ありがとう御座います。 * by どなるど
akiさん、こんにちは(^-^)
テンプレートの更新お疲れ様です。

トップ画像の変更方法などなど詳しく書いていただき、
本当にありがとうございましたm(_ _)m

なんとか思った感じになりました(*^。^*)
(スマホで見る時だけちょっと横が切れるかな⁈という感じです)

どなるど 様へ * by aki
そうですね、ct_responsiveシリーズだとトップの画像は background-size:contain; を使って全て収まって可変という形にしておりました。
この度のserene-respシリーズは background-size:cover; を使って高さを調整できるようにしてあります。
https://sorauta1.blog.fc2.com/blog-entry-274.html(background-size の参考記事)
padding-top: の数値を大きくすれば、縦横比はそのままに拡大してはみ出た部分は非表示になり、逆に小さくすれば同じく縦横比はそのままに画像の高さが低くなります。
テンプレートのスタイルシートを contain のように調整すると、画像下に無駄な余白ができてしまうようなので、他の部分も色々修正し、本日テンプレートの更新を致しました。
スタイルシートのみなので、更新記事に修正済みのものを掲載致します。m(__)m

修正箇所が画像部分以外にも有り、個別で記すのも大変なので、宜しければ下記テキストリンクを開いて中身を全てスタイルシート枠内にコピペして頂けると、本日更新した内容になりますので是非ご利用下さい。

2カラム左メニュー
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/serene_resp2c-l.txt
2カラム右メニュー
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/serene_resp2c-r.txt
3カラム
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/serene_resp3c.txt
(キーボードの Ctrl + A で全て選択し、Ctrl + C でコピー出来ます。)

トップの画像部分の表示計算式は『表示画像の高さ ÷ 表示画像の幅 × 100』+%、です。
この式で求めた数値より小さければ画像の上下が非表示になり、大きければ画像は拡大され左右が非表示になります。式通りの数値であれば ct_responsiveシリーズと同様の可変になります。
また、background-position:center center; /* 表示する位置 中央寄せ */ というように、画像の表示位置を中央にしております。画像下を基準にする場合は center bottom; 左上を基準にする場合は left top; のように変更すれば、表示される部分(非表示になる部分)が変えられます。(background-position:横方向 縦方向;)

お手数ですが宜しくお願い致します。m(__)m

トップ画像について * by どなるど
akiさん、またまた今晩は(^-^)

こちらのテンプレート【serene-resp】のトップ画像のことで質問です。

下記のゆきゆず様への返信を拝見した時に思ったのですが、
トップ画像は、はみ出た部分は非表示されると書いてありましたが、切れないように表示させることはできないでしょうか?

今、使っているテンプレート【ct_responsive】だと
表示画像の高さ ÷ 表示画像の幅 × 100 で計算して%を書き換えれば、どんな大きさの画像でもオッケーだったので、ちょっと悩んでおります(T^T)
(見る側の環境によって切れ方が違うのでトップ画像デザインの難易度が高くて。。。)

出来るようであれば、教えていただきたいです。
度々すみませんm(_ _)m

どなるど 様へ * by aki
当方のテンプレート管理画面は、滅茶苦茶沢山の複製が有ります。^^;
ああでもない・こうでもない、でも忘れると困るから、いやいつかのために、等々…そのうち整理しないといけないなぁ~と思いつつ増えていってます。。

色々不備・不具合の更新も有って、ユーザーの方々にはご迷惑をお掛けしております。
皆様のお気付きが有ってのテンプレートと言いますか、当方もテンプレートも一緒に成長させてもらっております。(^-^;

本当に、いつも有難うございます。m(__)m

ありがとう御座います。 * by どなるど
akiさん、こんばんは(^-^)

詳しくいろいろ教えてくださり、ありがとう御座います。
コピペなら私でも出来そうなので、
複製いっぱい作って頑張ってみます(^^)v

カスタマイズ記事にしていただけるのは嬉しいです♪
テンプレートがバージョンアップして更新された時に、
過去のカスタマイズの仕方を教えていただいたコメントを
毎回、探しながら貼り替え作業してたので助かります(≧∇≦*)

管理人のみ閲覧できます * by -

どなるど 様へ * by aki
テンプレート内に既に記述して有るscript(コメントOpen用)を使って、トップページでの追記開閉が出来ます。
昔作った(更新2014年の)テンプレートには付いているのですが、それだと個別ページに誰も来てくれないからという事で、レスポンシブ化に伴って個別記事での開閉に変更しておりました。
『個別記事への移動→クリックして開く』という追行為が面倒な場合も有りますので、後日カスタマイズとして記事にさせて頂きますね。
で、先にコメントとして掲載させて頂きます。(^-^)

HTML編集枠1/3程スクロールした所に
<!--more_link-->
という部分が有ります。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に<!--more_link-->を入れて検索すると一ヵ所だけ有ります。)
場所を見付けて頂いたら、その個所から
<!-- 全文表示用HTMLの貼り換え ここまで-->
を下記に貼り換えて下さい。

<!--more_link-->
<p><a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a></p>
<noscript>
<a href="<%topentry_link>#readmore">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<%topentry_more>
<p><a href="#more<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">​</p>
<%topentry_more>
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->

後は更新ボタンを押して頂ければ完了です。
それと、このテンプレートはスマホ等小さい画面で表示する際(420px以下)で要約表示に変化します。
https://sorauta1.blog.fc2.com/blog-entry-320.html
このページに小さい画面でも全記事表示方法が有りますので、必要であれば追加カスタマイズをお願い致します。(お手数おかけしますが、簡単です(^-^;)
不具合が有った時のために、複製を作ってから作業して頂くと安心です。m(__)m

Read Moreについて * by どなるど
akiさん、こんにちは(^-^)

今回のテンプレート【serene-resp】のRead Moreなのですが…個別ページに飛ぶことなく、トップページのまま開閉させる事はできないでしょうか?

全文表示のテンプレートなので、
出来ればそのままニョーンとさせたいのですが…
出来そうなら教えていただきたいですm(_ _)m

ゆきゆず 様へ * by aki
いつもご愛顧有難うございます。(^-^)
折角の可愛い猫にゃん達のトップ画像でしたのに…(ちょっと勿体無い気が。^^;)
では、またカスタマイズしてゆきゆず様用に彩って下さい♪
因みにトップに使っている画像サイズは750px×350pxになっていて、
padding-top:40%; /* トップ画像の高さ */
の数値で、縦横比を保ちつつはみ出た部分を非表示にして拡大縮小します。
このテンプレートは背景色のみで画像を設定しておりませんので、必要な場合はスタイルシートの body に
background: url(画像のURL) repeat fixed;
を追加して下さい。(記述が分からない場合は、カスタマイズされる時にお問い合わせ下さいね。)

今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

p.s. 別件で、貴ブログに鍵コメ入れましたのでご確認下さいませ。

No Subject * by ゆきゆず
ご無沙汰しています。
久しぶりにパソコンを開いたら
こんな素敵なテンプレートが!!
さっそく使わせて頂きます。
いつもありがとうございます♪
要約表示にしてみました~!!
バッチリです( *´艸`)

Comment-close▲

Comment







管理者にだけ表示を許可

aki Re: どなるど 様へ

無事に改変できたようで何よりです。(^-^)
高さが不確定なものは100%で可変するんじゃないか?と思ったけど、駄目でしたね。(やってみた。^^;)
簡単なのは、表示してみて高さ分を余分に見ながら数値を入力するのが一番手っ取り早いかな~と思います。

さて、今回修正しなきゃいけないのが共有申請して有るレスポンシブテンプレート『全て』なので(*´Д`)、記事に上げるのに少し時間が掛かります。
更新のついでに、コメントの返信ボタンを追加するつもりです。(押すと、Re:名前様へ と入力されます。それだけなんですが。)
カスタマイズに後日掲載しますので、宜しければ見てやって下さいませ。m(__)m
2019-07-05-01:37 * aki [ 編集 * 投稿 ]

ありがとう御座います。

akiさん、こんにちは(^_^)

いろいろワガママな質問にも対応していただき、
ありがとう御座いますm(_ _)m

(1) iframeの件
私、htmlとかcssなどチンプンカンプンでよくわかってないのですが…
akiさんが詳しく説明してくれるので勉強になります。
タグの【height= 】を変更したら下の線が見えるようになりました♪
あと、YouTuberも教えてくださったように変更してみました(*^^*)
ほぉ〜なるほど〜こうなるのか!と納得しました。
これからは活用させていただきます。

(2)カラム切り替わりの件
770を探したら、html編集に1か所とcss編集に2か所ありました。
この3か所でよろしかったでしょうか?(間違ってたらスミマセン)
769は1か所だったので、言われた通りに変更してみました。
以上を変更してみたら、主人のiPadも2カラムで見れるようになりました。
本当にありがとう御座いますm(_ _)m

p.s. fc2の移動する広告は確かに気になりますよね(^^;)
いろいろ大変な作業だと思います。
夜更かしはあまりせずに…ご自愛ください。
2019-07-04-15:29 * どなるど [ 編集 * 投稿 ]

aki どなるど 様へ (2)

カラムの切り替わり、ですが
10.5インチ→1,112 x 834(px)
9.7インチ→1,024 x 768(px) なので、770pxで1カラムに切り替わる数値を760px位にすれば良いと思います。
テンプレートのスタイルシート編集枠内で『770』という文字列を探して下さい。
キーボードで『Ctrl』+『Fキー』を押して検索窓を出して探すと3か所有ります。
その3か所の770を760に直して下さい。そして、検索窓に『769』という文字列を入れ、見付けた(1か所)769を759に変更し更新して下さい。(そうすると、760pxまでは2カラム表示になります。)
是非、お試しあれ。m(__)m
2019-07-04-01:11 * aki [ 編集 * 投稿 ]

aki どなるど 様へ (1)

いつもご愛顧有難うございます。m(__)m
iframeの横幅は、reset css内に max-width:100%; になっているので画面の横幅が狭くなっても収まるのですが、高さについてはタグ内の height="657" までしか表示しません。
なので、レスポンシブで横が狭まった際に折り返して下がった文字列で高さが変わってしまうと、それを超えた分はタグ内に有るスタイル overflow:hidden で非表示になります。
故に、iframe内ではみ出た文字によって下段の線が見えなくなってしまう訳です。
中身の縦横比が固定で無いiframeを可変させるには、何かしらのscriptを使うなどの手段が必要になると思いますので、そこまで必要かな?と。
一番簡単なのは、文字などの折り返しで増えた高さで線が非表示になるのですから、高さをその分初めから増やしておけば良いのでは?と思います。
タグ内の数値を height="657" から height="700" にする位で丁度良さそうですよ。

また、iframeと言えば、YouTubeの動画を簡単にレスポンシブ掲載するcssがテンプレートに初めから入ってますので、是非ご活用下さいね。(YouTubeはアスペクト比16:9に統一されたようなので。昔は違ったらしい。)
https://sorauta1.blog.fc2.com/blog-entry-276.html#example3
お試し下さいませ。m(__)m

p.s. 当方制作ブログを1カラム表示にした際に(ブラウザのモバイル表示時)FC2の上部に移動する広告がそのまま固定してしまう不具合が有ります。…というか、FC2ブログの広告に上がるバージョンが復活!というのが問題。。
https://vanillaice000.blog.fc2.com/blog-entry-921.html
(Akira氏の記事で教えてもらいました。^^;)
只今鋭意修正作業中ですので、近日記事掲載時にお読み下さいませ。
お手数をお掛け致します。m(__)m
2019-07-04-00:45 * aki [ 編集 * 投稿 ]

2カラムと1カラム

またまた、こんばんはm(_ _)m
何度もすみません。。

とってもワガママな質問で申し訳ないのですが…
こちらのテンプレート【serene-resp】で、
2カラムから1カラムに切り替わる画面サイズを変更したいのですが、
そういう事は出来ますでしょうか?

いつもiPadでブログを更新したり見たりしています。
私が使ってるiPadは2カラムで表示されるのですが、
主人のiPadはひとまわり小さいサイズなので1カラムで表示されます。
(※縦画面で見た時です)
どちらも2カラムで見れるようにしたいのです(^^;)

ちなみに私のiPadは10.5インチで主人のは9.7インチです。

簡単に出来そうならで結構ですので宜しくお願いします。
2019-07-03-23:54 * どなるど [ 編集 * 投稿 ]

iframeタグの投稿で

akiさん、こんばんはm(_ _)m

こちらのテンプレート(2カラム)で、
今回はiframeタグを使った投稿をしたのですが、
少々気になる所があったので質問です。

本日、Facebookの埋め込みタグをコピペしてシェアしました。
画像を確認していただければ、わかりやすいと思います(^^;)

小さい画面(スマホなど)で見る、1カラムでは問題ないのですが…
https://blog-imgs-128.fc2.com/l/e/c/lechat5/201907031629486f4.jpeg

大きめの画面で(iPadやパソコンなど)で見る、2カラムだと下の線が消えてしまいます。
https://blog-imgs-128.fc2.com/l/e/c/lechat5/20190703162759e01.jpeg

2カラムで見ても下の線が消えないようにする事はできますでしょうか。。
あれば教えて頂きたいですm(_ _)m

追記…
環境によって違うみたいです(^^;)
iPadを縦画面で見てると下の線が消えるのですが、
横画面で見ると下の線が消えませんでした。
どちらも2カラム表示です。
2019-07-03-16:59 * どなるど [ 編集 * 投稿 ]

aki どなるど 様へ

いえいえ、こちらこそいつもご指摘頂いて感謝しております。
画像も無事に表示出来たようで何よりです。
素人なもので…^^;先ずキチンと形にする事が最優先で、ご利用頂いている方の目線がやっぱり足りないみたいです。
どうぞこれからも、気になった点等を見付けられましたら何なりとお教え下さいませ。(^-^)

今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m
2019-06-19-23:19 * aki [ 編集 * 投稿 ]

バッチリでした。

akiさん、今晩は(^-^*)

先ほど更新されたスタイルシートをコピペして確認したところ
バッチリでした(^^)v

トップ画像を左右余白なしにして作成し、それに貼り替えてもオッケーでしたので問題解決です。
本当に度々対応していただきまして、ありがとうございましたm(_ _)m

p.s.
実家のご家族と連絡がとれてよかったです。
2019-06-19-22:20 * どなるど [ 編集 * 投稿 ]

aki どなるど 様へ

先程画像を見ながら確認致しました。
当方が持っているのは画面の小さいiPhoneSEなのですが、どなるど様の上手い加工によって不具合が有る事が分かりませんでした。(^^;
確かに画像を見比べると左右が欠けてしまうようですね。
どうやら、スマホで見た場合の記事やプラグイン3の左右余白に合わせるためにトップ画像の左右に margin(外余白)を付けているので、その分が縮小されるのではなく非表示になってしまうのが原因のようです。
故に考え方を変えて、画像や記事・プラグイン3に付けている margin・padding を外し、それを覆うdivのcssである #content に padding(内余白)を付けて左右を合わせる様に変更致します。
大変ご面倒なのですが、スタイルシートの上から順番に探って変更・削除をお願い致します。m(__)m

(編集枠上からスクロール1/8程)
/* トップ画像 */
.topimg {
height: auto;
position: relative;
overflow: hidden;
/* margin-top: 10px; 削除*/
padding-top: 46.67%;
background: url(https://blog-imgs-128.fc2.com/s/o/r/sorauta1/cf-img2.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

(編集枠上からスクロール1/3程)
/* 2カラム+ベース部分 */
#content {
width:870px;
float:left;
padding:10px 10px 0 20px; /*数値左10px追加*/
}

(編集枠上からスクロール2/3程)
/* 1カラム */
@media only screen and (max-width: 769px) 以下の
#content {
width: 100%;
float: none;
margin: 0;
padding: 0 15px; /*10pxを15pxに変更*/
}
.topimg {
/* margin:0 15px; 削除*/
}
.pan_box {
/* margin:0 15px; 削除*/
}
.blog {
/* padding:0 15px; 削除*/
}
.archive, .menu3 {
/* padding:0 15px; 削除*/
}


(編集枠上からスクロール5/6程)
@media only screen and (max-width:600px) 以下の
#content {
/*padding: 0; 削除*/
}

@media only screen and (max-width:420px) 以下の
#content {
padding: 0 10px; /*#contentを追加*/
}

.topimg {
/* margin: 0 10px; 削除*/
}
.archive, .menu3 {
/* padding: 0 10px; 削除*/
}
.blog {
/* padding: 0 10px; 削除*/
}


以上です。赤い文字列は追加若しくは変更、青い文字列は削除して下さい。
共有テンプレートと、テンプレート修正記事のスタイルシートテキストも更新致しましたので、そちらを適用して頂く事も出来ます。
https://sorauta1.blog.fc2.com/blog-entry-322.html
改変後、ご確認頂いてまた状況を教えて頂ければ幸いです。
宜しくお願い致します。m(__)m

p.s. 地震の件、ご心配頂き有難うございます。
当方の実家が有る新潟市内は震度4位だったようです。
すぐ電話した際に掛かり難く、連絡が付くまで当方も心配しましたが、皆無事との事で安堵致しました。(;^_^A
2004年の新潟県中越地震や2007年新潟県中越沖地震から10年超、実家は海岸から近いので未だに心配が絶えません。。
2019-06-19-16:09 * aki [ 編集 * 投稿 ]

早々に対応ありがとう御座います。

akiさん、こんばんは。
コメント通りにしたら【・】も削除出来ました。
本当にありがとうございますm(_ _)m

トップ画像の件ですが…
確認したスマホは『iphone7plus』と『htc u11』です。
ブラウザはsafariとChromeです。
画像を確認していただければわかりやすいと思うのですが、

【アップしたトップ画像】
https://blog-imgs-128.fc2.com/l/e/c/lechat5/201906181924013a2.jpeg
【持ってるスマホで見たとき】
https://blog-imgs-128.fc2.com/l/e/c/lechat5/20190619014905c11.jpeg

コルクの部分の余白はブログタイトルが見えやすいようにと上と、あと左右にあります。
この左右の余白はスマホで見たときだけ切れてしまうので余分につけました。
例えて言えば、左右に余白を2cmつけてるけどスマホで見ると1cmになる感じです(説明が下手ですみません。。)

ちなみに…
『表示画像の高さ(400) ÷ 表示画像の幅(800) × 100』で
50.00%にしてます。

p.s.
akiさんのご実家は新潟県だと思いましたが…地震がありましたが大丈夫ですか?皆さんがご無事でありますように。。
2019-06-19-00:57 * どなるど [ 編集 * 投稿 ]

aki どなるど 様へ

ご連絡有難うございます。
そして、お気付き頂き有難うございます。
CSSの該当箇所を当方でも削除してみた所、list-style-type:none;が無くなった事でデフォルトのリストマークが表示されてしまいました。
これは、スタイルシートの頭に有るリセットCSSで記述していなかったのが原因です。
先程テンプレートと、修正用CSSテキストに追記して更新致しました。

どなるど様がカスタマイズして下さる度に、自身では確認できなかった事が色々分かります。
とても助かっており、感謝してもしきれません。
本当に、いつも有難うございます。m(__)m

肝心の修正箇所ですが、スタイルシートを開いて頂き、一番上の
/* -----reset css------ */ の中、色々書いて有りますが下から4行目に
box-sizing:border-box;} と有りますので、その部分に追記して
box-sizing:border-box;list-style-type:none;} として更新して下さい。これで消えると思います。

それと、当方のスマホでは確認できないのですが…貴ブログの横が切れる、というのは画像のどの部分の事でしょうか?
お手数ですが、宜しければお教え頂けますか?
2019-06-18-23:06 * aki [ 編集 * 投稿 ]

リストマークの削除について

何度も何度も大変申し訳ありません(^^;)

このテンプレートのプラグインのリストマークについて質問です。
リストマーク【○】を消したいなと思ったので、
スタイルシートの編集で『リストマーク不要の場合はここからここまで削除』を削除してみたのですが、
【○】から【・】に変わりました。この【・】を削除する方法はありますか?
2019-06-18-21:10 * どなるど [ 編集 * 投稿 ]

ありがとう御座います。

akiさん、こんにちは(^-^)
テンプレートの更新お疲れ様です。

トップ画像の変更方法などなど詳しく書いていただき、
本当にありがとうございましたm(_ _)m

なんとか思った感じになりました(*^。^*)
(スマホで見る時だけちょっと横が切れるかな⁈という感じです)
2019-06-18-14:47 * どなるど [ 編集 * 投稿 ]

aki どなるど 様へ

そうですね、ct_responsiveシリーズだとトップの画像は background-size:contain; を使って全て収まって可変という形にしておりました。
この度のserene-respシリーズは background-size:cover; を使って高さを調整できるようにしてあります。
https://sorauta1.blog.fc2.com/blog-entry-274.html(background-size の参考記事)
padding-top: の数値を大きくすれば、縦横比はそのままに拡大してはみ出た部分は非表示になり、逆に小さくすれば同じく縦横比はそのままに画像の高さが低くなります。
テンプレートのスタイルシートを contain のように調整すると、画像下に無駄な余白ができてしまうようなので、他の部分も色々修正し、本日テンプレートの更新を致しました。
スタイルシートのみなので、更新記事に修正済みのものを掲載致します。m(__)m

修正箇所が画像部分以外にも有り、個別で記すのも大変なので、宜しければ下記テキストリンクを開いて中身を全てスタイルシート枠内にコピペして頂けると、本日更新した内容になりますので是非ご利用下さい。

2カラム左メニュー
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/serene_resp2c-l.txt
2カラム右メニュー
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/serene_resp2c-r.txt
3カラム
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/serene_resp3c.txt
(キーボードの Ctrl + A で全て選択し、Ctrl + C でコピー出来ます。)

トップの画像部分の表示計算式は『表示画像の高さ ÷ 表示画像の幅 × 100』+%、です。
この式で求めた数値より小さければ画像の上下が非表示になり、大きければ画像は拡大され左右が非表示になります。式通りの数値であれば ct_responsiveシリーズと同様の可変になります。
また、background-position:center center; /* 表示する位置 中央寄せ */ というように、画像の表示位置を中央にしております。画像下を基準にする場合は center bottom; 左上を基準にする場合は left top; のように変更すれば、表示される部分(非表示になる部分)が変えられます。(background-position:横方向 縦方向;)

お手数ですが宜しくお願い致します。m(__)m
2019-06-17-23:46 * aki [ 編集 * 投稿 ]

トップ画像について

akiさん、またまた今晩は(^-^)

こちらのテンプレート【serene-resp】のトップ画像のことで質問です。

下記のゆきゆず様への返信を拝見した時に思ったのですが、
トップ画像は、はみ出た部分は非表示されると書いてありましたが、切れないように表示させることはできないでしょうか?

今、使っているテンプレート【ct_responsive】だと
表示画像の高さ ÷ 表示画像の幅 × 100 で計算して%を書き換えれば、どんな大きさの画像でもオッケーだったので、ちょっと悩んでおります(T^T)
(見る側の環境によって切れ方が違うのでトップ画像デザインの難易度が高くて。。。)

出来るようであれば、教えていただきたいです。
度々すみませんm(_ _)m
2019-06-16-22:28 * どなるど [ 編集 * 投稿 ]

aki どなるど 様へ

当方のテンプレート管理画面は、滅茶苦茶沢山の複製が有ります。^^;
ああでもない・こうでもない、でも忘れると困るから、いやいつかのために、等々…そのうち整理しないといけないなぁ~と思いつつ増えていってます。。

色々不備・不具合の更新も有って、ユーザーの方々にはご迷惑をお掛けしております。
皆様のお気付きが有ってのテンプレートと言いますか、当方もテンプレートも一緒に成長させてもらっております。(^-^;

本当に、いつも有難うございます。m(__)m
2019-06-16-02:01 * aki [ 編集 * 投稿 ]

ありがとう御座います。

akiさん、こんばんは(^-^)

詳しくいろいろ教えてくださり、ありがとう御座います。
コピペなら私でも出来そうなので、
複製いっぱい作って頑張ってみます(^^)v

カスタマイズ記事にしていただけるのは嬉しいです♪
テンプレートがバージョンアップして更新された時に、
過去のカスタマイズの仕方を教えていただいたコメントを
毎回、探しながら貼り替え作業してたので助かります(≧∇≦*)
2019-06-15-23:15 * どなるど [ 編集 * 投稿 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-06-15-22:43 * - [ 編集 * 投稿 ]

aki どなるど 様へ

テンプレート内に既に記述して有るscript(コメントOpen用)を使って、トップページでの追記開閉が出来ます。
昔作った(更新2014年の)テンプレートには付いているのですが、それだと個別ページに誰も来てくれないからという事で、レスポンシブ化に伴って個別記事での開閉に変更しておりました。
『個別記事への移動→クリックして開く』という追行為が面倒な場合も有りますので、後日カスタマイズとして記事にさせて頂きますね。
で、先にコメントとして掲載させて頂きます。(^-^)

HTML編集枠1/3程スクロールした所に
<!--more_link-->
という部分が有ります。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に<!--more_link-->を入れて検索すると一ヵ所だけ有ります。)
場所を見付けて頂いたら、その個所から
<!-- 全文表示用HTMLの貼り換え ここまで-->
を下記に貼り換えて下さい。

<!--more_link-->
<p><a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a></p>
<noscript>
<a href="<%topentry_link>#readmore">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<%topentry_more>
<p><a href="#more<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">​</p>
<%topentry_more>
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->

後は更新ボタンを押して頂ければ完了です。
それと、このテンプレートはスマホ等小さい画面で表示する際(420px以下)で要約表示に変化します。
https://sorauta1.blog.fc2.com/blog-entry-320.html
このページに小さい画面でも全記事表示方法が有りますので、必要であれば追加カスタマイズをお願い致します。(お手数おかけしますが、簡単です(^-^;)
不具合が有った時のために、複製を作ってから作業して頂くと安心です。m(__)m
2019-06-15-15:05 * aki [ 編集 * 投稿 ]

Read Moreについて

akiさん、こんにちは(^-^)

今回のテンプレート【serene-resp】のRead Moreなのですが…個別ページに飛ぶことなく、トップページのまま開閉させる事はできないでしょうか?

全文表示のテンプレートなので、
出来ればそのままニョーンとさせたいのですが…
出来そうなら教えていただきたいですm(_ _)m
2019-06-15-12:03 * どなるど [ 編集 * 投稿 ]

aki ゆきゆず 様へ

いつもご愛顧有難うございます。(^-^)
折角の可愛い猫にゃん達のトップ画像でしたのに…(ちょっと勿体無い気が。^^;)
では、またカスタマイズしてゆきゆず様用に彩って下さい♪
因みにトップに使っている画像サイズは750px×350pxになっていて、
padding-top:40%; /* トップ画像の高さ */
の数値で、縦横比を保ちつつはみ出た部分を非表示にして拡大縮小します。
このテンプレートは背景色のみで画像を設定しておりませんので、必要な場合はスタイルシートの body に
background: url(画像のURL) repeat fixed;
を追加して下さい。(記述が分からない場合は、カスタマイズされる時にお問い合わせ下さいね。)

今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

p.s. 別件で、貴ブログに鍵コメ入れましたのでご確認下さいませ。
2019-06-14-23:23 * aki [ 編集 * 投稿 ]

No Subject

ご無沙汰しています。
久しぶりにパソコンを開いたら
こんな素敵なテンプレートが!!
さっそく使わせて頂きます。
いつもありがとうございます♪
要約表示にしてみました~!!
バッチリです( *´艸`)
2019-06-14-21:39 * ゆきゆず [ 編集 * 投稿 ]