shadow-attachmentクラスをお使いの方へ【メンテ終了済テンプレートの再調整】

shadow-attachmentクラスをお使いの方へ【メンテ終了済テンプレートの再調整】

テンプレ不具合・修正など
2018/01/18 0
vanillaice (Akira)
vanillaice (Akira)

既にメンテナンスを完了した旨お伝えしたテンプレートの一部、さらに調整を入れました。
度々申し訳ございません (*_ _)

内容は 画像などの要素にドロップシャドウを付ける方 のためのCSS調整です。
この場を借りて少しレイアウトの説明などもしようと思います。

テンプレート独自クラスの shadow-attachment を利用していない方は無関係です。

シャド…ぅ… は?ナニソレ (´・ω・`;)
と思われました方は使っていないということですからスルーしてください。すみません ^^;

対象テンプレート

GirlOnWire - FC2ブログテンプレート - テンプレート

GirlOnWireテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

Belong - FC2ブログテンプレート - テンプレート

Belongテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

Pianissimo - FC2ブログテンプレート - テンプレート

Pianissimoテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

Synchronisity - FC2ブログテンプレート - テンプレート

Synchronisityテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

Chronicle - FC2ブログテンプレート - テンプレート

Chronicleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

Generic - FC2ブログテンプレート - テンプレート

Genericテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

Vanilla-Sky - FC2ブログテンプレート - テンプレート

Vanilla-Skyテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

VeryMerry - FC2ブログテンプレート - テンプレート

VerryMerryテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

Fraise - FC2ブログテンプレート - テンプレート

Fraiseテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 スマートフォン版を非表示にしてご利用ください。...

上記テンプレート以外は関係していませんので対象外の場合は仕様説明だけ読んで下さい。
や、別に絶対読んでとは言わないが((((笑)

症状

ドロップシャドウはこういうのです ↓

<img src="画像アドレス" alt="" class="shadow-attachment">

このサンプル画像のように比較的掲載サイズが小さい場合は問題ありません。
(画像の実寸ではなく掲載寸です)
が、画像の横サイズが記事幅と同等(100%)の時に右側のシャドウが消えてしまう、といったもの。

正常なシャドウの例

記事の横幅は赤いラインと同等です。
画像がまだ横いっぱいに達していませんので女性の写真右側にシャドウを確認できます。

右のシャドウが見切れた例

こちらがシャドウが消えてしまったサンプルです。

対策(修正)

付けたくて付けたシャドウが消えて無くなる。
そんなの良いわけないじゃんね (´・ω・`)
直しました。すみません(汗)
公式配布ページの方は上書きしましたので再DLして頂くことで解消されます。

何度もDLするのは煩わしい、という方は、ごくごく簡単な修正というか追加のみですのでコピーで内容の差し替えをお願いします。

Windowsの方は
Ctrl + F
Macの方は
Command + F
で以下を目印に検索。

.shadow-attachment

CSSソース、下の方に1箇所あります。

.shadow-attachment {
  省略
}

内容はテンプレごとにまちまちなので省略しています。範囲だけ注意してください。
この内容を一旦削除し、以下の内容をコピペで差し替えてください。

Girlonwire, Belong

.shadow-attachment {
  max-width: calc(100% - 2px);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

それ以外

.shadow-attachment {
  max-width: calc(100% - 8px);
  box-shadow: 6px 6px 6px rgba(0,0,0,.2);
}

今回対象となるテンプレート以外をご利用の方、また、対象テンプレートでも当該クラスを利用しない方は修正の必要はありません。

シャドウが消える理由

今回のメンテナンスの目的のひとつは flatレイアウトからflexレイアウトへの変更 です。
flexボックスというのはtableの特性に近いものを持ってます。
それ故にtableの代替として利用できる場面が多くあります。
tableの至らない点を突き詰めるとflexに辿り着くというか (´・ω・`)

で、今この章のすぐ上で利用しましたけれども、htmlやCSSなどのソースコードを掲載(シンタックスハイライト)したりする方はですね、flexボックスの中で何も工夫せずやってしまうと記事幅からはみ出すのではなく 記事幅そのものが拡がってしまいます。
他にも記事内でhtmlをよく扱うという場合には同じ局面に遭遇することがあります。
それを避けるために記事のアウトラインに overflow: hidden というのを追加しました。

シャドウというのは要素の「外側」につきます。図解は以下の通り。 要素の外側にシャドウ

横100%指定の画像にシャドウが付く時は
画像横寸法 + シャドウ = 100% ではなく
画像横寸法 = 100% + シャドウ分 になります。
つまり100%を超過するわけですね。

この「要素の内側につくのか、外側につくのか」というルールはとても重要で、ここわかってないとwebレイアウトはできません。
paddingは内、marginは外、borderはdivは外tableは内、内外を操作するborder-boxとデフォルトのcontent-box とかね。ともかくまぁ色々あります。

overflow: hidden という指定は 100%を超えたら表示しない(はみ出させずカットする) という指定ですので、はみ出してるシャドウは非表示になる、という仕組みです。

overflow: hidden を追加した時点で私がこの独自クラスの方を修正するべきでしたが完全に失念しておりました。
気づいてくださったS様に改めてお礼申し上げます。

まとめ

みなさまには度々の修正でお手数おかけします。
ホントごめんなさい ( ̄∀ ̄;)

 0

There are no comments yet.

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

テンプレ不具合・修正など