自宅内ネットワーク構成Geartics(ギアティクス)アマゾンほしい物リストSNSXInstagramYouTubeフォト蔵mixi問い合わせ問い合わせプライバシーポリシー(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。Pinterest2024.07.12この記事は約4分で読めます。Cocoonを使って構築しています。THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。3回目についてまとめてみました。記事中の画像枠これまで「記事中の画像枠」に関するカスタマイズは、2回実施しました。Cocoonでの「画像囲み効果のシャドー(影)」のカスタマイズについてまとめてみました。今回のカスタマイズでは画像右縦のシャドー(影)を廃止し下側のみのスッキリしたスタイルにしました。Cocoonの「画像の囲み効果」設定を使わずに、独自にエントリー記事の画像に対して【シャドー(影)】を設定するカスタマイズ(スタイルシート(style.css)に追記)について書いたエントリー記事です。masaa.net2018.10.19現在の「画像中の画像枠」のスタイルは、次のようになっています。今回、長らく使っていた記事中の画像に対する枠(シャドー)を見直したいと思います。3回目の内容は、下記の通りです。「スタイルシート(style.css)」を開き、下記のカスタマイズ内容をこれまでカスタマイズした「●エントリー記事内の画像に影を付ける」部分に上書きします。これまで「記事中の画像枠」のカスタマイズを行っていない場合には追記する形でOKです。次に、記事中の画像に対してimgタグのclassに「shadow1」を設定する必要があります。上記例のようにimgタグのclassに「shadow1」を追加することで、画像に枠が表示される仕組みです。自動でimgタグのclassにshadow1を追加する画像一つ一つに、手動でimgタグのclassに「shadow1」を追加するのは画像が多いほど面倒になってくるので、記事中の画像全てに対して自動で追加させたいと思います。子テーマの「functions.php」を開き、下記のソース内容を追記します。これにより自動で記事内の画像に対して「shadow1」が追記されるようになり、画像に枠が設定されます。今回のカスタマイズによって、「記事中の画像枠」のスタイルは次のようになりました。これまで下側にシャドーを付けていたのですが、それを無くしシンプルに画像の角4点に対してアール形状を施しました。別途「shadow2」も設定しました。こちらはスマートフォンなどスクリーンショットを撮って、記事に貼り付けた場合、画像の境が分からなくなるために枠を設定しました。borderタグを使って枠を設定すると、枠の幅分画像が縮小されて画像汚くなるので、あえてshadowタグを使って枠を設定してみました。デフォルトは「shadow1」なので、「shadow2」を使いたい場合には、手動で「shadow1」を「shadow2」に変更する必要があります。「shadow2」には、画像の角4点に対してのアール形状の設定はありません。THOR(ザ・トール)での「記事中の画像枠」と同スタイルとしました。自分の場合、商品レビューする関係上、スクリーンショットを貼り付けることが多いので、「shadow2」も採用してみました。Cocoonにも「画像の囲み効果」設定があります。設定」-「画像」-「画像の囲み効果」)は、【ボーダー(薄い枠線)】【ボーダー(薄い太線)】【シャドー(薄い影)】の3パターンから選択することが出来ます。Cocoon「画像の囲み効果」を設定すると、全ての記事内の画像に対して画像の囲み効果が有効になってしまうので、臨機応変に設定したい場合には今回のカスタマイズの方が良いかと思います。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(3)サイト運営者masaaブログ歴20年目の弱小ブロガー。PCはMZ-80Cから始まりMZ-80B,PC-8001/8801/88VA/9801/9821/N/NS等を経て現在自作PCに夢中。THORで3つのウェブサイトを運営中。blogたっけーブログもう50年生きちゃったよ。(3)MASAa.net内を検索サイト運営者masaaブログ歴20年目の弱小ブロガー。PCはMZ-80Cから始まりMZ-80B,PC-8001/8801/88VA/9801/9821/N/NS等を経て現在自作PCに夢中。THORで3つのウェブサイトを運営中。blogたっけーブログもう50年生きちゃったよ。defined.")}))})()。