注目キーワード
  1. 体験談
  2. ブログ開設
  3. 仕事
アイキャッチ画像

<-WordPress->投稿写真におしゃれな枠を付けましょう!超簡単!

アイキャッチ画像

・この記事を読むと

ブログ記事内に貼った画像に、枠を装飾させることが出来ます。貼り付けた画像を見やすく、おしゃれに表示させてみましょう!【動画解説あり!】

プラグイン等は使いません。WordPressから設定出来る”超簡単な”方法を解説します。

この記事についてすべて実際に作業し、初心者の自分でも簡単に出来た内容を紹介しています!

 

手順の概要
手順1:CSSコードを記述
手順2:HTMLコードを記述
手順3:プレビューで確認

記事の画像をオシャレにしよう!

 

下の画像は何もせず貼り付けた場合です。

おしゃれ感ゼロパーセントですね(-_-;)

 

画像に枠(変更前)の画像

 

 

そこで、枠をつけてみると!

 

画像に枠(変更後)の画像

 

どうでしょう?

いい感じじゃないですか!

 

 

 

超簡単!設定の手順

 

 

CSSコードを記述

 

下記のCSSコードを記述を、「style.css」ファイルに記述します。

※子テーマを使用している方は、子テーマの「style.css」へ記述しましょう!

 


/*記事の写真に枠を付ける*/

.p-frame {
    padding: 6px;
    background-color: #f0f0f0;
    box-shadow: 0px 3px 20px -1px rgba(0, 0, 0, 0.8);
}

 

 

 

 

HTMLコードを記述

 

WordPress投稿画面のテキストモードで、下記HTMLコード(サンプル)を記述します。

 

<img src="images/sample.jpg" class="p-frame">

“img src~ の後ろに、class=”p-frame”を記述します。

 

プレビューで確認

 

・プレビュー画面で確認します。

 

こんなステキな枠になりました( *´艸`)

 

WordPress アイキャッチ画像-拡大

 

 

 

[nlink url=”https://tkc-office.net/wordpress-method-iconfont/”]

 

 

目次に戻る

アイキャッチ画像
最新情報をチェックしよう!