2021.02.09WordPressのブロックエディタで挿入した画像に影を付けたり消したりする方法をご紹介します。ご利用のWordPressのバージョンやテーマによってやり方が異なることがありますのでご参考程度にご覧ください。バージョン2.8.7.1になります。画像に影を付けるWordPressで投稿した全ての画像に影を付ける方法と、特定の画像のみに影を付ける方法をそれぞれ説明します。全ての画像に影を付けるWordPressの管理画面から「外観」→「テーマエディター」をクリックします。スタイルシート(style.css)に以下の内容を記述します。#000000;}box-shadowに指定した値は左から順に、水平方向の影の距離、垂直方向の影の距離、ぼかしの強さ、影の色となります。値を任意で変更し、調整してください。wp-block-imageはブロックエディタで画像を挿入した場合に自動的に設定されるクラス名になります。「ファイルを更新」をクリックしてスタイルシートを保存し、画像に影が付いているか確認してください。特定の画像に影を付ける全ての画像に影を付けるのではなく、特定の画像に影を付けたい場合は以下のようにします。WordPressの管理画面から「外観」→「テーマエディター」をクリックします。スタイルシート(style.css)に以下の内容を記述し、shadowというクラスを定義します。クラス名は任意で変更して構いません。#000000;}figureはブロックエディタで画像を挿入した場合に自動的に設定されるブロック要素です。「ファイルを更新」をクリックしてスタイルシートを保存してください。次に記事の編集画面で影を付けたい画像を選択し、「高度な設定」→「追加CSSクラス」にshadowと入力します。記事を更新して指定した画像に影が付いているか確認してください。画像の影を消すWordPressのテーマによっては、ブロックエディタで挿入した画像に初めから影が設定されている場合がありますのでその影を全て消す方法、また特定の画像の影のみを消す方法をそれぞれ説明します。全ての画像の影を消すWordPressの管理画面から「外観」→「テーマエディター」をクリックします。スタイルシート(style.css)に以下の内容を記述します。none;}box-shadowに指定した値noneは要素に影を付けない設定になります。wp-block-imageはブロックエディタで画像を挿入した場合に自動的に設定されるクラス名です。「ファイルを更新」をクリックしてスタイルシートを保存し、全ての画像の影が消えていることを確認してください。特定の画像の影を消す全ての画像に影が付いている状態で、特定の画像の影のみを消したい場合は以下のようにします。WordPressの管理画面から「外観」→「テーマエディター」をクリックします。スタイルシート(style.css)に以下の内容を記述し、noshadowというクラスを定義します。クラス名は任意で変更して構いません。none;}figureはブロックエディタで画像を挿入した場合に自動的に設定されるブロック要素です。「ファイルを更新」をクリックしてスタイルシートを保存してください。次に記事の編集画面で影を消したい画像を選択し、「高度な設定」→「追加CSSクラス」にnoshadowと入力します。記事を更新して指定した画像の影が消えているか確認してください。画像を記事に一括挿入するWordPressに複数の画像をまとめて一括挿入する方法を解説しています。通常の画像ブロックでは一つ一つの画像しか追加できないので手間がかかりますがこの方法なら作業を簡略化できます。CSSでレイアウトする初心者向けのCSS講座です。CSSでレイアウトする方法を説明しています。CSS・HTMLCSSで段落の間隔を調整するCSS(スタイルシート)で段落の間隔を調整する方法です。スタイルシートにpタグのmarginを指定することによって簡単に段落の間隔を調整することができます。スパムコメントの対策をしてみたWordPressのブログで悩まされていたスパムコメント対策をしました。Captchaというプラグインを利用しました。Plus)でCSSを除外した場合に目次を中央寄せにする方法をご紹介しています。TOC+のCSSを読み込まず独自に目次をカスタマイズし、かつ目次を中央に寄せたい場合に役立つ方法です。WordPressphp7.xでデータベース接続確立エラーの対処【WordPress】WordPressのサイトでPHPのバージョンを上げると「データベース接続確立エラー」となってしまう場合の対処法をご紹介しています。PHP5.xからPHP7.xにバージョンアップした場合などによくある現象です。WordPressWordPressの画像を横並びに配置する方法WordPressで画像を横並びに表示する方法をご紹介します。通常の画像ブロックでは一つ一つの画像しか表示できませんが、この方法で好きな数の画像を横並びに表示させることができます。CSS・HTMLSimplicityでソースコードをハイライト表示・スタイルの適用【CSS】WordPressテーマ「Simplicity」でソースコードをハイライト表示(反転や色分け)する方法、ハイライト表示にスタイルを適用させて装飾する方法を説明しています。Simplicityはカスタマイズ機能で簡単にハイライト表示することが可能です。WordPressWordPressのドメインを簡単・確実に変更する方法WordPressでドメインを変更するのはデータベースを操作したり難しいイメージがありますが、この記事で紹介している方法なら誰でも簡単かつ確実にドメインを変更することが可能です。IDとクラス超初心者向けのCSS講座です。IDとクラスについて説明しています。コメントをキャンセルメールアドレスが公開されることはありません。1ミリノート.メニューHomeContactSitemapホーム検索トップサイドバータイトルとURLをコピーしました。