12345678910111213141516171819202122232425262728
個別記事の管理2019-02-10 (Sun)
昨日はさすがに雪降る予報でジョギングに出掛けられなかったので、連休中日、いつもの栃木県中央公園へ。
日は照ってても寒波が来てるから寒い寒い…
芝生の上には融け残ってる雪と、芝と枯葉と泥にまみれた雪だるま。^^;
しかも小さい奴があちこちに。
…何となく、雪見ると作っちゃうんだよね~。
作った誰かさん、私もその気持ち、分かるよ。

20190210.jpg

公園中央に有る『昭和大池』の水が抜かれておりました。
で、よく見ると(画像の左端を外れて)向こう側に居るのは…

20190210-2.jpg

スマホの拡大で画像が荒いですが…公園の池によく来るアオサギ。え?2羽??
色の濃いのと薄いのと、2羽…グレーの薄い方も眼の上の方に黒いラインが入っていたからアオサギなんだと思うけど。

寒いけど、走りに来て良かったな。
彼らが2羽で、それもちょっと嬉しかった。(^-^)


オマケ↓
やっぱる日向が良いよね

やっぱり日向が暖かくって良いよね♪
スポンサーサイト
Theme : 日々のつれづれ * Genre : 日記 * Category : 我が家のペット
* Comment : (6) * Trackback : (0) * |

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

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

yomogimochi1012 様へ * by aki
yomogimochi1012様、いつも気に掛けて頂き有難うございます。m(__)m

過去のテンプレートは、追々と携帯端末でも見れるように修正していこうかな~と思っているのですが、手を付けるのは 新しいテンプレートの不備が解消されてから…と考えてます。
それまでは日常の、ホントに普通の話しか無いのですが、最低でも月一更新くらいはしようと思います。^^;

猫やウサギの写真も、いつも寝てるのばっかりでスミマセン。寝てる時に撮るのが一番楽なので。
猫のはなちゃんはうちの子になって1年が経ちました。
ウサギのいなばさんも来月半ばで満11歳になります。
彼らにとって平穏で安らげる環境…というのが一番ですね。
見てるこちらも、幸せになれますもの。。(´∀`)

愛すべき写真 * by yomogimochi1012
aki様の主力であるテンプレートの記事には、
理解が及ばず、(実際、私が今、使わせていただいているテンプレートは
大のお気に入りのため、変更することがないので、
必要に迫られないこともあります)
愛すべき動物たちの記事をいつも心待ちにしているために、
この時とばかりにコメントを差し上げます。(笑)

今日など、UPされて早々に記事を拝見することになるのは、
なんと幸運かと思っているのですよ。

それにしても、2匹の動物たちの安住の場所が、
確保され、安心しきって日向ぼっこや
安眠出来るのを見られるのは、幸せなものですね。(^^♪

いつも、和ませていただき、有難うございます。

ゆきゆず 様へ * by aki
コメント有難うございます♪
猫の陽だまりゴロゴロは見てるだけで癒されますよね~。
でも、毛の質ではやっぱりウサギの方が触り心地は良いんですよ。やっぱりラビットファーですから。
…ただ、うちの子は抱っこ嫌いなウサギなので『お腹もふもふ』をなかなかさせてくれないんです。( ;∀;)
猫も、膝に乗ってくれないし抱っこも苦手みたいだし…(元野良ってそうなのかな?)
(怪しげな書き方ですが)顔を埋めてみたい願望、満々です!

寒かったですね * by ゆきゆず
寒さの中、ほっこり写真ありがとうございます☆彡
異種2ショット~💗
猫2ショットより癒されるのはなんでかな~。
うささんのお腹にもふもふモフモフしてみたい💗

個別記事の管理2019-02-08 (Fri)
テンプレート『al_responsive』をご利用頂き、誠に有難うございます。m(__)m
先日、要約表示時のアイキャッチ画像表示方法を修正・更新した『ct_responsive』と同様の更新を、『al_responsive』にも2月6日に行いました。

ct_responsive の修正・更新致しました。(for IE)
ct_responsive の修正・更新致しました。(3)

また、2,3カラム時のメニュータイトルを折り畳む事ができてしまう不具合を、ユーザー様である 【Super源さんの雑学事典】管理人のSuper源さん様にご指摘及び修正用 Javascript をご教示頂きました。
この不具合については、'19.01.23の記事 『al_responsive のカスタマイズ(エントリー全文表示②)』 のコメントのやり取りをご参照頂くと分かり易いと思います。^^;
(修正した箇所、修正済み Javascript も掲示されております。)

度重なる修正及び更新、ご利用の皆様には大変ご迷惑をお掛けしております。
申し訳ございません。
使い勝手が良く、不具合の(出来れば極力)無いテンプレートを目指しておりますので、
何卒 末永くお付き合い頂けます様 宜しくお願い致します。m(__)m

この度、色々とお教え頂きましたSuper源さん様が発信されている【Super源さんの雑学事典】は、面白くて為になる雑学と、使い勝手の良い『オンライン便利ツール』や『ブログパーツ』等々、とても有益で楽しいBlogです。是非♪訪れてみて下さいませ。(^-^)
Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等
* Comment : (6) * Trackback : (0) * |

Super源さん 様へ * by aki
修正方法が見つかると良いのですが…
やっぱり JavaScript は難しくて分かりません。^^;
では、メールで。m(__)m(res不要です)

akiさん、こんにちは!(^^)/ * by Super源さん
ありがとうございます。
メール、届きました。(^O^)/

早速、読ませていただきますね。m(__)m

Super源さん 様へ * by aki
こんばんは。
先程、GoogleChromeでの表示についてメールをさせて頂きました。(^-^)
色々考えるのはボケ防止にもなりますし、何より私がこういう事好きなので、申し訳無いですが勝手にやってました。^^;

宜しければご参考に。m(__)m

akiさん、こんばんは!(^^)/ * by Super源さん
そうですか? それを聞いてホッとしました。(^。^;) ホッ!
私の場合、書き込むと長くなりがちで、また、けっこう細かいリクエストもしたので、そろそろ鬱陶しがられてるのではないかと…。(^o^;

分かりました。
それでは、これからも、何か気づいた点があれば、遠慮なく書かせていただきますね。(^^)v

また、リンクの件、ありがとうございました。
上の方の、目につきやすい位置に掲載していただき、感謝感激雨あられです。(T^T) ウルウル←ウレシナキ デス

こちらこそ、今後とも末永くおつき合い下さいますよう、よろしくお願いいたします。m(__)m

Super源さん 様へ * by aki
とんでもないです!色々助けて頂きまして、本当に有難うございました♪m(__)m
なりを潜めるなんて言わずに、ドンドンと今後も気付いた所や改善方法等etc.…お教え頂けると助かります。(^-^)

事後報告ではございますが、サイドメニューにリンクを貼らせて頂きました。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

akiさん、こんばんは!(^^)/ * by Super源さん
テンプレートの修正と更新、お疲れさまでした。m(__)m
これでal_responsive が、さらに使いやすく、より良いものになりましたね。(*^^)v

実際には、ここに書かれてない細かい変更もいろいろ行なわれてるので、さぞや大変な作業だったのではないかと推測いたします。

また。私の修正スクリプトがこの版から正式採用となったようで、スゴくうれしいです。\(^o^)/ ヤッタァ!

いえいえ、ご教示だなんて、とんでもありません。【><】
私はただ、外野で「ワアワア!」と騒いでただけで、akiさんにはほとんど何も貢献できてないと思ってるんですよ。【><】

それなのに、私の雑学ブログの紹介までして下さり、逆に申し訳なく思ってるくらいです。(#^.^#)

キョロ キョロ。(~゜゜)~ アナハ ナイカ。アナ ハ。

なので、これからはあまり騒がず、極力鳴りを潜めるようにしますので、(^o^; 今度とも、どうぞよろしくお願いいたします。m(__)mペコリン。

個別記事の管理2019-01-31 (Thu)
テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
1月28日の記事、トップページ要約表示方法を変更した修正・更新について、この修正をした際、IE(InternetExplorer)及び古いブラウザ(Firefox35, Opera12.15, Safari5.1.7)で、トップページ要約表示時の記事画像が無い場合に空のスペースが出来てしまう不具合を見付けました。
原因は「枠内に画像を綺麗に収めるための css "object-fit"プロパティ」が効かないIEやEdgeに 対応させるために入れた『object-fit-images』ライブラリ。

ofi-ie1
↑クリックで大きく表示

この『object-fit-images』は、記事内の画像や指定したアイキャッチ画像などを"object-fit"プロパティが使えないIEやEdgeで表示するために、そのままimgとしてではなく実質style属性のbackground関連プロパティで表示させるよう書き換えているようです。
そのため、ダミー画像をsrcで指定する先般の方法では非表示にならず、『object-fit-images』によってダミー画像が背景として表示されてしまう事になります。
なので、背景になった特定画像を非表示にするスタイルを追記しました。

28日に修正・更新したCSS
.left img{
width:100%;
height:auto;
max-height:140px;
object-fit:cover;
font-family:'object-fit:cover;'; /*IE対策*/
border:1px solid #ddd;
}
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}


30日に修正・更新したCSS
.left img{
width:100%;
height:auto;
max-height:140px;

-o-object-fit: cover; /* 古いopera用ベンダー */
font-family:'object-fit:cover;'; /* IE対策 */
object-fit:cover;
border:1px solid #ddd;
vertical-align:middle;
}
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]
,
.left img[style*="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]
{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}


赤い文字部分を追記する事により、IEでも意図した表示にする事ができました。
(.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"], の末尾に有るカンマ( , )を忘れずに。)

ofi-ie2

確認ブラウザ
PC表示
Firefox35, Opera12.15, Safari5.1.7, IE11, MS EdgeHTML17, GoogleChrome72.0
SP表示
android8.0 Chrome, iOS12.1.3 Safari Chrome

新しいブラウザでは問題無いようですが、IE、Edge、古いブラウザをご利用で表示に不具合が有りましたら、1月28日の記事と併せて上記の箇所を追記下さいませ。
例え減ったとは言え まだまだ利用者がいる IE(InternetExplorer)、出来るだけ新しいバージョンには対応しておきたいと思いますので、お手数ですが宜しくお願い致します。m(__)m
Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等
* Comment : (0) * Trackback : (0) * |
個別記事の管理2019-01-28 (Mon)
テンプレート『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m
細かい修正で、何処を修正したのか見た目は全く分かりません。が、トップページ要約表示をされていて、記事内にサムネイル表示する画像が無い・設定していない場合の表示方法を少し変更しました。

『ct_responsive』の場合は、
<a href="<%topentry_link>"><img src="<%topentry_image_url>" alt="<%topentry_title>" onError="this.style.display='none'"></a>
のように、表示する画像URLが無い場合は onError="this.style.display='none'" で「エラーが有ったら表示しない」javascriptを入れておりました。
これでも問題無く非表示になり、要約文字のみ表示されます。
ただ、HTMLのソースを表示してみると、<img src="" alt="説明" onError="this.style.display='none'">のようにsrc内は空になっているので、Validator.nu (X)HTML5 Validator で 『Error: Bad value for attribute src on element img: Must be non-empty.』 というエラーをもらってしまいます。要するに、src属性が空になっているのはいけません、って事です。(^^;
このテンプレートを作った時から、ずっと考えていたんですよね。方法を。
(因みに、『al_responsive』の場合はサムネイル表示にFC2独自タグを使って表示しているので上記のようなエラーは有りません。が、画像に必須の alt タグが付けられない・画像比に満たない部分の背景が黒、という問題もありまして。。FC2に要望中ですが難しそうです。)
…今迄も色んな表示方法を試してみたのですが、この度 下記のような方法でエラーを出さない表示を考えてみました。

[HTML編集枠1/3程の所にある]
<a href="<%topentry_link>"><img src="<%topentry_image_url><!--body_img_none-->https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif<!--/body_img_none-->" alt="<%topentry_title>"></a>

img src="" が空の時に取り敢えず容量の小さいダミー画像を空の部分に入れ、その画像を

[スタイルシート編集枠2/5程の所にある]
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}


cssで非表示にする、という方法です。
画像有り・無しで表示に問題無く、validatorでもエラーは無くなりましたので、この形で共有掲載しようと思います。
非表示の方法としてはあまりキレイでは有りませんが、例えばスタイルシート部分の記述をせず、HTMLの画像URLだけ入れておけば掲載画像が無い場合の『no image』表示として利用できます。
Read More に参考画像URLを掲載しましたので、気に入ったものがございましたらお使い下さい。

上記修正の件、もし何処か不具合などを見付けられましたら、何なりとお申し出下さいませ。
宜しくお願い致します。m(__)m

2019/01/31 『ct_responsive の修正・更新致しました。(for IE)
上記の記事にて、本記事のスタイルシートを少し修正、及びテンプレートを更新致しました。
併せて記事をご覧下さい。


no-img4
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img4.jpg

no-img3
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img3.jpg

no-img2
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img2.jpg

no-img1
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/no-img1.jpg

【 使い方 】
下記HTMLタグのオレンジ色の部分に、上記の画像URLを入れるだけで、no-image画像が表示されます。(トップページ要約表示のみ)勿論、ご自身で記事作成時に入れたアイキャッチ画像が優先表示されます。

<a href="<%topentry_link>"><img src="<%topentry_image_url><!--body_img_none-->https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif<!--/body_img_none-->" alt="<%topentry_title>"></a>

Return

Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等
* Comment : (0) * Trackback : (0) * |
個別記事の管理2019-01-23 (Wed)
1月15日の更新で、レスポンシブテンプレート、al_responsive 3c(3カラム), 2cr(2カラム右), 2cl (2カラム左)の個別記事追記表示を折り畳みに変更致しましたので、トップページ全文表示用の変更HTMLも修正致します。('19.01.15 以前にDLした al_responsive のトップページを全文表示にするカスタマイズは、『al_responsive のカスタマイズ(エントリー全文表示)』をご参照下さい。)
難しい変更箇所はございませんので、要約表示から全文表示にしたい方は、是非カスタマイズしてみて下さい。

◎ テンプレートの設定画面を開いてHTMLを編集する。
管理画面左の『テンプレートの設定』 →[al_responsive〇c]のHTML編集枠を開いて「トップページここから」という所までスクロールし、下画像のように変更して更新。

上画像の赤い部分を削除して下画像のように変更・更新します。
(クリックで大きく表示)

全文表示5

下のように変更後更新ボタンを押す。

hyouji6.png
↑画像は完了状態。HTMLソースをこの形にします。

下段の Read More を開いてHTMLをコピー&ペーストする場合は、テンプレートの設定→HTML編集枠をスクロールし、

<!-- トップページ ここから--> ~ <div class="entry_state">

までを貼り換えて下さい。
ここまでで2、3カラム時に全文表示になり、1カラムでは要約表示になります。
1カラムも全文表示にしたい場合は、スタイルシート編集枠3/4程スクロールした所に有る

/* レスポンシブ1000px以下で適用 */
@media only screen and (max-width:1000px){ という部分の
/* 要約表示時記事非表示 */
.kiji2{
display:none;
}
を display:block; に変更、その下に
.kiji1{
display:none;
}

を追加して下さい。

不具合が有った時のために複製を作成して作業すると安心です。


al_responsive 2c(2カラム右・左)

<!-- トップページ ここから-->
<!--topentry-->
<div class="con1">
<section>
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="left">
<a href="<%topentry_link>"><%topentry_image_w300></a>
</div>
<div class="right">

<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
<p class="right-txt clearLeft"><a href="<%topentry_link>">... 続きを読む</a></p>

</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con1_body <!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->"><%topentry_body>
<!--more_link-->
<div class="readmore">
<a href="<%topentry_link>#more">Read More</a>
</div>
<!--/more_link-->
<!--more-->
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr>
<p style="margin:15px 0;"><%topentry_more></p>
<a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
</div>
<div class="entry_state">



al_responsive 3c(3カラム)

<!-- トップページ ここから-->
<!--topentry-->
<div class="con2">
<section>
<h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
</div>
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->
<div class="kiji1"><!--kiji1-->
<div class="left">
<a href="<%topentry_link>"><%topentry_image_w300></a>
</div>
<div class="right">

<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
<p class="right-txt clearLeft"><a href="<%topentry_link>">... 続きを読む</a></p>

</div>
</div><!--/kiji1-->
<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<div class="con2_body <!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_permanent_area-->kiji2<!--/not_permanent_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->"><%topentry_body>
<!--more_link-->
<div class="readmore">
<a href="<%topentry_link>">Read More</a>
</div>
<!--/more_link-->
<!--more-->
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr>
<p style="margin:15px 0;"><%topentry_more></p>
<a href="#entry<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->
<!--/more-->
</div>
<div class="entry_state">


Return

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ
* Comment : (14) * Trackback : (0) * |

Super源さん 様へ * by aki
こんばんは。
この度の修正・更新の件、先程記事にさせて頂きました。
有難うございました。
そして、今後とも宜しくお願い致します。m(__)m

akiさん、こんにちは!(^^)/ * by Super源さん
超横長画像の対策も、検討してくださったようで、感謝です。m(__)m

了解しました。(^^)v
私の方でも、微力ながら何か方法がないか、探るよう心掛けますね。_(..)βメモメモ

今思いつくのは、もともとの画像表示が、時には黒背景など入れて、強引に同じ大きさにしていたようなので、今回も、画像枠の大きさを決めてしまい、はみでた部分は表示しないようにする、ということくらいですね。
が、これだと、リスポンシブでは問題ありそうですね。(^o^;

何と言うか、リスポンシブでは、できることの自由度が制限され、その「対策」も難しくなる感じですね。(@_@)ウーン

でも、浦島太郎にならないよう、「新技術」に一生懸命ついていかなければ…。(^o^;←モウ ナッテル トイウ ハナシ モ。

また、レイアウト崩れのご指摘、ありがとうございます。m(__)m

このショットは、ブラウザの縮小機能を使ってとられたものですよね?

それで、チェックしてみたところ、ご指摘のものは、見本画像ではなく「ブログパーツ」そのものですね。

なので、どうしたら良いのか…。(@_@)ウーン

ちょっとググッってみます。(爆) 3 ピュ~

Super源さん 様へ * by aki
>良く見ると、画像が思いっきり横長の時、高さが若干詰まるようですが、(^^;
…流石に画像の縦横比はユーザー様の掲載サイズ次第なので、最大値(max-height)で合わせてます。
例えば記事タイトルが2行になる場合やカスタマイズで文字サイズを大きくしている場合も有るので、要約表示枠のサイズを一定にするのは私のスキルでは難しいかなぁ~と。。
これも思案材料として今後も考えて参りますが、もし良い方法を思い付かれましたら、是非!お教え下さいませ。m(__)m

>そうだ。そろそろ新記事も書かななければ。(爆)
…あと、きっと追々修正…なのだと思いますが、『オンライン便利ツール』『ブログパーツ』カテゴリーの記事内見本が、枠外まで崩れて表示されております。IE、Edge、Opera、Firefox は大丈夫のようですが、GoogleChromeで崩れます。
https://blog-imgs-124.fc2.com/s/o/r/sorauta1/blogmihon.png
(容量を減らすのに画質を落としたのでちょっと見辛いかも…^^;)
お時間の有る時にでもご確認下さい。

akiさん、こんばんは!(^^)/ * by Super源さん
早速試してみました。(^^)v
スゴーく、いい感じですね。(^-')

良く見ると、画像が思いっきり横長の時、高さが若干詰まるようですが、(^^;

https://www.zatsugaku-jiten.net/blog-category-6.html

私の場合、これだけ横長の画像を使うのは、おそらくこのカテゴリーだけだと思うので、これで問題ないと思います。(^^)

何より、これ以上細かいことを言うと、バチが当たりそうです。(^o^;

akiさん、改めまして、ありがとうございました。m(__)m
とても満足してます。(^^)

そうだ。そろそろ新記事も書かななければ。(爆)

Super源さん 様へ * by aki
こんばんは。画像の高さ、ですね。(^^;
通常時 W3:H2の比率で数値を変更します。

CSS部分(編集枠2/3程下へスクロール)
.left{ の部分
width:35.3%; /* 35を35.3に変更 */
max-height:155px; /* 275を155に変更 */

.left img{ の部分
max-height:155px; /* 275を155に変更 */

/* レスポンシブ1001px以上で適用 */(編集枠5/6程下へスクロール)
.left{ の部分
width:35.3%; /* 35を35.3に変更 */
max-height:155px; /* 200を155に変更 */
}

それとあともう一点、CSS編集枠下段に有る
@media only screen and (max-width:400px) という部分の
.left img{
margin-bottom:15px;
}
を削除し、代わりに
.right {
padding-top:10px;
}
を入れて下さい。
画面リサイズで横幅は可変ですが高さは同じに保たれると思います。
これで試してみて頂けますか?

akiさん、こんにちは!(^^)/ * by Super源さん
おぉ~っ!。w(゚゜)w そうなってましたか。
いわば「FC2マjジック」ですね。それでは、いくらやってもダメなはずですね。【><】

紹介リンク、参照いたしました。(^^)
あっ!(゚o゚)ホントだ。ここに、背景が黒くなる、と書かれてましたね。
先日、どちらも一通り拝読したのですが、見落としてたようです。

ということで、早速ご教示いただいたとおりにHTMLとCSSの変更を行なってみると、、、、。
おお(゚o゚)
黒バック、見事に消えてます!
akiさん、ありがとうございました。m(__)m

ただ、、、今までは、要約表示時に、記事と(次の)記事の間の間隔が「固定」でしたが、今度は画像の高さに応じて可変になったため、ページを上から下ヘとスクロールしていくと、ちょっと違和感がありますね。【><】


https://www.zatsugaku-jiten.net/blog-date-201612.html

※たとえばこのページで、虫と時計の写真のところで、記事間がグッと広くなっているのがお分かりいただけるでしょうか?
(探せば、もっと分かりやすいページがありそうですが…【><】)


なので、ここを固定幅にしていただくと、さらにうれしいのですが、いかがでしょ?(^^)

以上、まずは取り急ぎお礼まで。m(__)m

Super源さん 様へ * by aki
FC2のサムネイル画像は、自動で用途別に作成されます。
al_responsive で使用しているのは、変数<%topentry_image_w300>というW300×H200で自動作成されるサムネイル画像です。

【テンプレート用変数一覧】https://help.fc2.com/blog/manual/Home/template/templatevariable.html

アイキャッチ機能で指定した画像を優先に、本文の一番初めに掲載した画像で作成されます。
で、残念な事にこの画像…画像必須のalt属性が付けられない・高さが足りない場合は黒背景で補填(透過GIF,PNGも黒背景)という、使い方に困る代物なのです。(画像サイズが同じでは無いので、JSやCSS等どうあがいても黒背景が消せないらしい。)
テンプレートのデザイン上、左右ボックスで画像が無い場合はfloat解除して文字のみ…という形にしたい(no-imageで左側を空けたくない)ので、色々悩んだ結果この形にしておりました。
ただ、未だに「まだもっと良い方法が有るのではないか?」と思案しているというか…要するに『暗中模索』状態です。(^^;

先日、ct_responsive のトップページ画像についての修正記事を掲載致しました。
【ct_responsive の修正・更新致しました。(3)】
https://sorauta1.blog.fc2.com/blog-entry-300.html
【ct_responsive の修正・更新致しました。(for IE)】
https://sorauta1.blog.fc2.com/blog-entry-301.html
他に良い方法が見つかるまで、現状この形で行こうかなと思っています。
同様に、先程 al_responsive テンプレートも更新致しました。(一緒に貴殿ご指摘の『メニュータイトル開閉の件』も javascript を修正しております。更新した旨の記事は明日にでも。)
この度更新した箇所を下記に掲載致しますので、お時間の有る時に変更して下さいませ。
お手数をお掛けしてスミマセン。m(__)m

HTML部分(編集枠1/4程下へスクロール)
<!-- トップページ ここから-->以下
<div class="left">
<a href="<%topentry_link>"><%topentry_image_w300></a>
</div>
という部分を

<a href="<%topentry_link>"><img src="<%topentry_image_url><!--body_img_none-->https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif<!--/body_img_none-->" alt="<%topentry_title>"></a>
に変更

編集枠下段のjavascript群の最後に
<!--object-fit(IE対策)-->
<script src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/ofi_min.js"></script>
<script>objectFitImages();</script>
を追加

CSS部分(編集枠2/3程下へスクロール)
.left{
float:left;
width:35%; /* サムネイル画像の幅 */
height:auto;
max-height:275px;
margin:0 10px;
text-align:center;
position:relative;
overflow:hidden;
}
.left img{
width:100%;
height:auto;
max-height:275px;
-o-object-fit: cover; /* 古いopera用ベンダー */
font-family:'object-fit:cover;'; /* IE対策 */
object-fit:cover;
border:1px solid #dcdcdc;
vertical-align:middle;
}
.left img[src="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"],
.left img[style*="https://blog-imgs-123.fc2.com/s/o/r/sorauta1/1-1.gif"]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}
上記のように変更・追加

al_responsive シリーズ、1001px以上でメニュータイトルのカーソルをデフォルトにするCSSも、JS併せてテンプレに追加しましたので、下記も追加して下さい。
(スタイルシート編集枠5/6程下へスクロール)
/* レスポンシブ1001px以上で適用 */以下で下記の部分
.menu_title{
padding:3px 15px;
cursor:default; /* 追加 */
}

FC2で自動作成されるサムネイルを使わずに記事内の画像を縮小表示してるので、大きい画像の縮小だと読み込み等が遅くなる場合も有ります。
まだまだ改善できる点を見落としていそうで悩みは尽きそうに有りません。。でもその試行錯誤が楽しかったりもします。(^^;…ユーザー様は大迷惑、ですが。

akiさん、こんばんは!(^^)/ * by Super源さん
今日は、質問があってやって参りました。m(__)m

エントリーの簡易表示ページで、サムネイルが横長の場合、上下に黒い余白が入ってしまいます。

https://www.zatsugaku-jiten.net/blog-category-6.html

このような場合、画像の比率を変え、ぴったり表示する設定にすれば、余白はなくなるかと思うのですが、できる限り変えたくありません。

その場合、どのようにすれば良いでしょうか?

CSSで、以下のようにやってみましたが、うまく行きませんでした。

/* 簡易表示トップページエントリー */
.kiji1{
margin:10px;
overflow: hidden;
}
.left{
float:left;
width:35%;
height:auto;
max-height:275px;
margin:0 10px;
text-align:center;
position: relative;
overflow:hidden;
}
.left img{
vertical-align:middle;
border:1px solid #dcdcdc;
background-color:#ffffff;
}

一番下のbackground-colorが、追加した部分です。
(backgroundもやってみましたが、ダメでした)

なお、黒い部分が出てない記事もありますが、そこは画像の幅を調整してあります。

以上、よろしくお願いいたします。m(__)m

IY 様へ * by aki
IY 様、初めまして。
テンプレートのご利用、誠に有難うございます。
テンプレートのスマホ版レスポンシブ使用設定をしてある前提でお話致します。

申し訳ございませんが、FC2の広告は選べません。ユーザー様だけで無く勿論制作者も。
どんなものが表示されるか・どのサイズが表示されるか(3,4種有るらしい)、広告の種類等選定…、ランダム表示でFC2次第なので分かりません。
これは無料会員であれば必須表示のものなので、表示したくなければ有料会員になるしか無いです。

また「他のテンプレートでは表示されない」というのは、スマホ(iPhone含む)で表示した際に表示される画面がFC2ブログのスマホ版画面だからではないでしょうか。
そちらの方が(広告が)気にならないようなら、レスポンシブデザインに拘らず環境設定の『スマホ版の設定有効』で使って頂いて良いと思います。

FC2のスマホ広告は、実はあちこちに大量に貼られています。
注目記事リスト、人気記事ランキング、ヘッダー下や記事下のバナー・テキスト広告、等々…自分で入れずとも既に沢山の広告箇所が有り、どんな広告が入るかも勿論選べません。
自分の記事の下に他のブログのランキングとか、広告やPR、『さらに記事を読み込む』で、どこまでが自分の記事なのか分からない…それをさりげなぁ~く表示しているのがスマホ版のFC2広告です。

レスポンシブテンプレートを選ぶメリットは、PC版とスマホ版の見た目・操作性が統一されている、広告量が最小限、という事です。
広告の必須箇所は'19年2月本日で『フッター下の広告(スクロールで上部に移動する広告も有り)』と『一か月以上更新しないと表示される広告』のみです。
それ以外の広告は任意・非表示可能で、例えば、ページ上部の検索バーや記事真下の画像高速表示用広告。
これは管理画面→環境設定→ブログの設定で『利用しない』にすれば外す事ができます。

表示必須広告は外したり非表示にすると規約違反になりますので、制作者も利用者も削除不可です。
スマホで表示する際に、個人の手を煩わせる事になりますが、『パソコン版を表示』にすると大きな広告が見えなくなります。(PC画面の必須広告は、最下段までスクロールしたフッター部分の文字広告のみなので。)

参考に、当方のブログをスマホ(iPhone SE)で『パソコン版を表示』してみました。(クリックで画像表示。)

GoogleChromeで表示
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/se-chrome.jpg
safariで表示
https://blog-imgs-123.fc2.com/s/o/r/sorauta1/se-safari.jpg

広告が邪魔・卑猥等で不快な場合はPC版の画面を表示する…というのはあくまでも『代案』なので解決にはなりませんが、無料である限り広告は必須・及び選べませんので何卒ご容赦を。m(__)m
p.s. お返事が的外れであればお教え下さいませ。。

No Subject * by IY
はじめまして、テンプレート利用させていただいております。

素敵なテンプレートでとても気に入っているのですが、
このテンプレートを採用しているとiphoneのsafariからの閲覧時には
やたらと豊胸系の広告が表示されてしまいます
(cookie削除の有無問わず。尚、他のテンプレートに変えると出ません)。

一見するとアダルト広告バナーと大差無いので正直あまり気分の良い物ではありません。

女性向けの広告が出やすくなるような記述が
もしテンプレート内に有るようでしたら教えて頂けませんか?