自宅内ネットワーク構成Geartics(ギアティクス)アマゾンほしい物リストSNSXInstagramYouTubeフォト蔵mixi問い合わせ問い合わせプライバシーポリシー(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。2019.01.05この記事は約4分で読めます。Cocoonの設定項目の「画像の囲み効果」を使わずに、記事内の画像に対してシャドーを設定するためのカスタマイズについてです。Cocoonで「画像の囲み効果」を設定することが出来ます。設定」-「画像」-「画像の囲み効果」)は、ボーダー(薄い枠線)ボーダー(薄い太線)シャドー(薄い影)の3パターンから選択することが出来ます。「シャドー(薄い影)」を選択することで、全ての記事内の画像に対してシャドー(薄い影)を設定することが出来ます。Cocoon「画像の囲み効果」設定の気になる点しかし、この「画像の囲み効果」の設定では、自分の使い方として幾つか気になる点が有ります。一つ目の気になる点は、記事で貼られた全ての画像に対して有効となること。そのため特定の画像だけ「画像の囲み効果」を付けたい設定は出来ません。二つ目の気になる点は、ボーダーとシャドーを併用して「画像の囲み効果」の設定することが出来ません。三つ目の気になる点は、シャドーのデザインが1種類に限定されてしまうこと。Cocoonの「画像の囲み効果」の設定を行うことで、この設定を行った以前の画像も含めて全ての画像に対して「画像の囲み効果」が設定される点です。手軽に「画像の囲み効果」を得られるのは素晴らしいと思います。Cocoonの「画像の囲み効果」設定を使わずに、個別の画像に対してシャドーを設定するカスタマイズを行います。その画像に対するシャドーの設定はデフォルトとします。逆にシャドーの表示が必要が無い場合は、シャドーの設定を取り消すカスタマイズも合わせて行います。個別の画像に対してシャドーを設定する個別の画像に対して「画像の囲み効果」の設定を行いたい場合は、「スタイルシート(style.css)」にカスタマイズを行う必要が有ります。#999;}を追記します。使い方は、シャドーを設定したい画像に対してimgタグのclassに「shadow1」を追記します。幾つかシャドーのパターンを用意しておきたい場合は、「shadow1」のラベル名を変更して、「shadow2」などの別のパターンを設定すればOKです。これでシャドーを設定したい画像に対して手動でimgタグのclassに「shadow1」を追記することで、任意にシャドーを設定することができます。逆にその追記を行わないとシャドーが表示されないため、過去のエントリー記事の画像ではシャドーが表示されないので注意が必要です。シャドーの設定をデフォルトにする自分の場合、画像に対してシャドーの設定をデフォルトにしたいので、自動でimgタグのclassに「shadow1」を追記させます。shadow1';});を追記します。これで手動でimgタグのclassに「shadow1」を追記しなくても、記事内の画像全てに対して自動で追記してくれます。その画像にシャドーを付けたくない場合には、classに追記された「shadow1」を逆に削除すればOKです。Cocoonの設定項目の「画像の囲み効果」を使わずに、記事内の画像に対してシャドーを設定することができました。必要に応じて画像のシャドーの設定が不要の場合は、classに追記された「shadow1」を削除することで、臨機応変にシャドーの有無を対応することが出来ます。次のエントリー記事では、記事内の画像に対してボーダー(枠線)を設定するカスタマイズについてです。コメントをキャンセルメールアドレスが公開されることはありません。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.")}))})()。