【WordPress】画像に枠をつける方法【シンプル&お洒落】

「画像が背景と同化しちゃってる…枠をつけたいなぁ」

そんな方のために、WordPressで貼り付けた画像に枠を付ける方法をご紹介します!

【初心者におすすめ】超簡単な画像枠の付け方

前回の記事では、上の画像のような超簡単な画像枠の付け方をご紹介しました。

今回の記事はこちらの応用編(デザイン重視の方向け)で少し手間がかかるので、

まずは前回の記事をご参照ください↓

お洒落な枠ってどんな枠?

下に2枚、枠付きの画像があります。

どちらの方がお洒落に見えますか?

当然、下の枠ですね?

今回の記事では、こちらの画像枠を付ける方法をご紹介します。

少し手間がかかるので、覚悟してください。

【デザイン重視派におすすめ】お洒落な画像枠の付け方

WordPressの管理メニューを開く

「外観」→「カスタマイズ」

追加CSSをクリック

CSSを入力し、公開ボタンをクリック

以下をそのままコピーし貼り付けてください。

/* 画像に枠線を付ける / .frame img { display: block; margin: 0 auto; padding: 1px; box-shadow: 0 0 6px rgba(32 33 36 / 28%); / 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
}

投稿記事の編集

画像を貼り付けて「設定」→「ブロック」→「設定」→下へスクロール

追加CSSクラスを入力

下にスクロールしていくと「高度な設定」があり、

ここに「frame」と入力をします。

プレビュー画面で確認、完成

※編集画面では枠線が見れないため、プレビュー画面で確認しましょう。

画像や記事によって枠を使い分けよう!

前回&今回の記事では簡単シンプルな枠と、6ステップのお洒落枠をご紹介しました。

どちらも、WordPress初心者の私でも設定することが出来たので、

ぜひ解説画像を見ながら挑戦してみてもらえたらなと思います。

タイトルとURLをコピーしました