Faint - FC2ブログテンプレート「配布終了 2019年2月6日」

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To フッターの件 内緒さん

ありがとうございます

>下の文字が変な表示〜

というのは、今お使い頂いているAnotherDay_zureテンプレの「フッターが上に上がってくる」
という意味でお間違いないでしょうか。

この原因なのですが、サイドバーにフラッシュで小鳥が飛ぶプラグインを入れてらっしゃいますよね。
こちらはたぶんですが、Internet Explorerの比較的古いバージョンを基準に作成されたものだと思います。
(absolute という配置の仕方を行っている点から推察)
で、これ恐らくHTML5のレスポンシブで作成されているテンプレートのほとんどでこういう表示になってしまうと思います。
(他製作者様のレスポンシブテンプレでご確認ください)

専門的になりますのでかいつまんでの説明になりますが、小鳥のフラッシュが
フッターを含めた全体コンテンツの下に割り込ませるタイプのJSが組んであるようです。
レスポンシブデザインでフッター位置を操作されてしまうとレスポンシブとしてはもう成り立たなくなってしまいます　(´・ω・｀)
ですので私のテンプレ側のみでの処置というのはほぼ不可能です。
そしてプラグインのソース内容を私が変更するわけにはまいりませんので、プラグイン製作者様にご相談頂くしか。
固定幅のテンプレートならば上手く表示されえるものもまだあるのではないかと思います(HTML構造によります)。
あるいはIEならばOKかもしれません(IEはabsoluteの誤認識があります)

2カラムデザインというのはメインコンテンツの縦幅とサイドコンテンツ(サイドバー)の縦幅が異なりますよね。
メインコンテンツがサイドよりも短い場合、フッターが上に上がってくることがあるんですね。
それを上がらないように処理されているテンプレはこちらのプラグインとほぼ衝突すると思います(私のテンプレも含みます)
お役に立てず申し訳ございません　(*_ _)

* 無作為に他製作者様の作品で検証しましたが、やはり概ねデザインが狂ってしまうようです。
(chrome, Ironで確認
同じchromiumベースブラウザですが chromeでの崩れとIronでの崩れ方が違うことも確認しました(笑))

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To 文章の件 内緒さん

そうですー！
内緒さんのパソコンがおかしいわけでも、私の文章力がキテレツなわけでもございません(笑)
文章にも著作権がありますので、侵害しないようダミーテキストを利用しています。
英文・日本語文ともに並べ替えしておりますので変な文章なんです　^^;

トップの画像

こんにちは。

Be Happyテンプレート　愛用させて頂いております。

ところでトップページのトップ記事のアイコン？画像ですが、
画像と比べて画質が落ちて表示されているように思います。

対策法はありますか？

現在
.inner-image-wrapper:before {
padding-top: 70%;

を

.inner-image-wrapper:before {
padding-top: 60%;

としていますが、７０％でも画像の画質がおちて表示されています。

１０月１７日のトップページ元画像

http://blog-imgs-83.fc2.com/s/g/o/sgourmet/P1210422.jpg

で

<img src="http://blog-imgs-83.fc2.com/s/g/o/sgourmet/P1210422.jpg" alt="おかず１" style="width: 0; height: auto;"　/>

を最初に挿入しています。

大変お忙しいとは存じますが何卒ご教授の程よろしくお願いいたします m(_ _)m

To takさん

こんにちは。
いつもありがとうございます

> サムネイルの画質が落ちる件

こちらまた長々と鬱陶しい説明になりますが、お付き合いください(笑)
理解して頂かないとまた同じ内容で頭を悩ませることになりますので、よろしくお願いします。

① 画像形式について

一般的にデジカメやスマホなどで写真を撮影した際の画像形式( = 拡張子) はJPGです。
JPG拡張子の画像の特徴 = 拡大しても縮小しても画質が劣化する
(拡・縮に強い、というか解像度が変わらない画像は「ベクター画像」といいまして、変換するには特殊なソフトを利用する必要があります。
そしてイラストには最適ですが　風景や人物などの「写真」には向きません。
また、ベクターでなくJPGと同じラスタ画像に分類されるPNG拡張子がありますが、
こちらは縮小には若干強いもののやはり拡大には弱いです。
そして画像容量が大変大きいので、表示負荷がかかります。)

② 縦横比について

.inner-image-wrapper:before {
padding-top: 60%;

このパーセンテージ指定は画像の縮小率とはなんの関係もありません。
これは画像が収まるボックスの縦横比を固定するために設けています。
横を100%とし、縦はその60%
という指定がこれです。
ですからここの数値を変更されますと、画像が収まるボックスの縦横比が変わるだけです
padding-top: 100% で完全な正方形になります。
あくまでも「形」「比率」であって、「表示サイズ」とは無関係です。

③ 長辺と短辺

画像には縦横比があります。
ボックスの縦横比を固定しましたが、画像の縦横比が狂ってはいけませんよね。
まずtakさんの画像の縦横比を計算してください。
比率はデジカメの種類、スマホの種類によって左右しますので、自身がお持ちの画像の比をまずご確認ください。
正方形以外の写真は必ず「長辺」と「短辺」が存在しますよね。
②の説明で、画像用のボックスの縦横比が固定されます、と書きました。
仮にそれが10:6(5:3)だとします。
そこへ収まる画像のサイズが1000px×500pxだとしますよね。
すると10:5ですから、縦が少し足りませんね。
その際にはJavascriptが画像の短辺を基準にして見切れが起こらないように拡大をします。
すると今度は横がボックスよりも大きくなります(= はみ出します)。
はみ出した部分は「表示させない」
この流れを全てJSが担っています。
これを行わないと
・全ての画像サイズ(バラバラだと仮定します)を揃える
・縦横比を狂わせない
この二点で問題が出てきます。

-------------

一旦投稿しますね。

To takさん

以下の質問に YES/ No　でご自分の環境をご確認ください。

1.画像の横サイズをいつも揃えている (YES or NO?)
2.画像の縦サイズもいつも揃えている(つまり縦横全く同じで揃えている) (YES or NO?)

2がYESの場合は縦横比がどの画像も全く同じです。
ここまで大丈夫でしょうか。物理的法則のお話しです。
続けます。
仮にtakさんが1.2共にYESであった場合。
JS不要になりますよね。
ボックスのサイズを画像の縦横比と全く同じに揃えるだけで済みます。
すると長辺・短辺の都合での拡大は起こりませんので、劣化も起こりません。
ボックスと、ボックス内に収まる画像の縦横比に開きがあればあるほど、この「拡大率」が大きくなります。

JSを削除する場合には、さらに言えばボックス自体も不要です。
単なるimgとして掲載すれば良いです。
ただし1pxでも異なる画像だとトップページのサムネイルは揃わなくなります。

HTML構造、そしてCSSにも大幅な変更を加えることになりますので、その節には自己責任でのカスタマイズをお願いいたします。

takさんへのおすすめ　↓

ご自分の画像の縦横比を確認し、ボックスの縦横比をそれとほぼ同等になるように指定する。

To takさん

takさんの場合は画像の「画質」「サイズ」に強いこだわりをお持ちですので、やはりレスポンシブではなくソリッド(固定幅)のテンプレートが向いているように思います。
メリット・デメリットは以前お伝えした通りです。
私は多少画像が劣化するとしても、誰もが画像の全体像を一目で捉えられる方が良い、と思います。
これはあくまでも私の感覚です。
デバイスの画面サイズによっては見切れが起こって全体像が見られないけれども、高画質である方が好ましい。
とお考えになる方ももちろんいらっしゃいます。
これは好みの問題ですので、ご自身で方向性をお決めになられると良いのかな　と。

長い説明になりました。よろしくご査収くださいませ。

ありがとうございます。

Akiraさま

詳細なご説明を頂き、大変勉強になりました。
画像に関しても知らなかった事ばかりです。（PNGとJPEG,ベクターの違い）
お恥ずかしい限りです。

私の画像ですが、最近３：２のアスペクト比にしております。
以前は４：３のマイクロフォーサーズセンサーをフルにつかったものだったのですが、
新しく購入予定のカメラのセンサーがAPS-Cのため、３：２に変更しております。
実際は横１０００ｐｘ、縦６６７ｐｘです。
また横が１０００ｐｘにするとマイクロフォーサーズの場合は縦が７５０ｐｘとなり
ちょっと大き過ぎるという判断によるものでした。

>ボックスの縦横比をそれとほぼ同等になるように指定する。

はい、ご指導の通りにしてみます。

つまり２÷３＝６６．６６６・・・→６７％にすれば劣化はある程度防げるということですね。

早速変更してみます。

いつもいつも貴重なご指導を賜り感謝しております。m(_ _)m

これで安心して新兵器（カメラ）を導入できます！(｀・ω・´)ゞ

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To takさん

はい。一度お試しください。
新しいカメラ、楽しみですね

To 内緒さん

いえいえ。どうぞお気になさらず。
お気軽にどうぞ

お久しぶりです。graceを使わさせて頂いてる者です。
このfaintも気になっていますが再申請の方もリジェクトでしょうか？

To 長谷川さん

ご無沙汰しております

今確認しましたところ、リジェクトの旨の通知は届いておりません(笑)
①ある程度申請件数が積もってから処理するつもり
②業務の重要度としては最後方
③私のことが嫌い

このいずれかではないかと

To Akiraさん

今見に行ったら承認されていました。
早速ダウンロードしました、ありがとうございました！
ですが・・Akiraさんのものはどれも使いたくなってしまうのが悩みです（笑）

To 長谷川さん

ほんまやぁー　(´・ω・｀)
えー　（￣∀￣；）
リジェクトされるのを前提、って言うとおかしいけど、そのつもりで出したところもあるんですよね。
えー　（￣∀￣；）
タブレットはどうでもいいってことなんでしょうかね(独り言です)
いずれにしてもありがとうございます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Faint 左サイドメニューの件etc. 内緒さん

ありがとうございます
嬉しいお言葉まで頂きました

> 左サイドメニュー(ヘッダー代用 以下ヘッダーと称す)に画像

Ctrl+Fキー検索(CSSソース内にあります)

#banner {
width: 250px;
height: 100%;
overflow-y: auto;
padding: 70px 35px 0; /* 注)ブログタイトルの上辺位置合わせは 70px の数値を変更 大きくすると下へ下がります */
/* 注)左サイドナビ背景画像不要の方ここから削除 */
background-image: url(http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/201509231033319e8.png),
url(http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/20150923103852b7f.png);
background-position: left top,
right bottom;
background-repeat: no-repeat;
/* 注)左サイドナビ背景画像不要の方ここまで削除 */
background-color: rgb(237,242,249); /* サイドナビ背景色 */
position: fixed;
left: 0;
top: 0;
z-index: 50;
}

赤字部分を削除及び太字部分追加修正して以下の通り。

#banner {
width: 250px;
height: 100%;
overflow-y: auto;
padding: 70px 35px 0; /* 注)ブログタイトルの上辺位置合わせは 70px の数値を変更 大きくすると下へ下がります */
background-image: url(画像アドレス);
background-size: cover;
position: fixed;
left: 0;
top: 0;
z-index: 50;
}

背景修正作業は終了です。
ブラウザの上下左右幅を大きくしたり小さくしたり、よくよく確認してください。
一旦投稿します。

*内容を書き直しました。
まずこちらを試して頂こうと思いまして(笑)
別のやり方を書きましたがこれが一番簡単。
ただ、こちらのテンプレートは左ヘッダーの横幅が大変狭いので、もしかしたら思い通りの位置に表示できないかもしれません。
その場合には別のやり方を改めて記しますので、まずは一度こちらで確認してみてください。
特にタブレットをお持ちでしたらそちらでも目視確認をお願いします。
もちろんスマホも (´・ω・｀)

思い通りの位置ではない、と思われましたら、ご利用になりたい画像のURLを教えて頂くか、
その画像の「どこに」表示したいメイン部分があるのかを把握しておいてください。
画像内の右下なのか、ど真ん中なのか、左上なのか、といった具合。
上記の記述で上手く行ったのであればこの件は不要ですー。

To Faint 左サイドメニューの件etc. 内緒さん②

> 左ヘッダーとメインコンテンツを離したい件

Ctrl+Fキー検索。

#main {
margin: 0 auto;
width: 100%;
padding-left: 250px;
}

赤字部分の数字を増やして頂くと離れます。
あまり数字を大きくしすぎると記事の幅が細くなってしまいますので、見た目を確認しながらどうぞ。

ご不明点・わかりにくい点がございましたらお気軽にどうぞ　(●'ω')ﾉ

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To Faint→Romantiqueの件 内緒さん

了解しましたー。
こちらは一旦締め、という形でよろしいでしょうか。
別途ご質問の方拝見しますね。