アイキャッチ画像

【HTML・CSS】ブログの投稿写真に枠をつける方法「簡単です!」

 

悩む人のイラスト
ブログの画像に枠をつけたいなぁ。
どうやるんだろう?

 

 

そのお悩みを解決します。

 

 

 

こんにちは!
たけちんです。

 

今回は、画像の「わく」です。

 

投稿画像に「枠」をつける方法です。

画像が見やすくなりますので、ぜひ試してみて下さいね!

 

 

 

この記事の信頼性

システムエンジニアが実際に試した(体験した)内容を記述し、重要な部分を含めて解説しています!
★プロフィール★

 

当サイトの運営環境

 

 

ブログの投稿写真に枠をつける方法

 

 

c-eyecat-tejyun-0809-001
【枠なし】

 

 

c-eyecat-tejyun-0809-001
サンプル1:【影付き枠】
c-eyecat-tejyun-0809-001
サンプル2:【細線の枠】

 

 

たけちん
サンプル2の場合、白っぽい画像を見やすくするのに最適です。

 

 

owncloud-link-del-folder_03
【枠なし】
owncloud-link-del-folder_03
サンプル2:【細線の枠】

 

 

 

 

たけちん
枠をつける方法は下記です。

 

  1. CSSコードの記述
  2. HTMLコードの記述
    または「メディアを追加」から設定

 

 

たけちん
順番にやっていきましょう!

 

手順1:CSSコードを記述

 

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

※:通常は、子テーマの「style.css」へ記述しましょう!

 

 

 サンプル1:【影付き枠】


/*記事の写真に枠を付ける(影付き)*/

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

 

 

 サンプル2:【細線の枠】


/*記事の写真に枠を付ける(細線)*/

.p-frame-solid {
padding: 1px;
border: solid 1px #191919;
}

 

 

 

たけちん
ザ・トール】を使っている方はコチラ!

 

【ワードプレステーマ:ザ・トール】をご利用の方

 

 

【カスタマイズ】→【追加CSS】の入力項目へ「コピペ」して下さい!

または、

❶【外観】→【テーマエディター】を選択。

❷【子テーマ】の「style-user.css」へ「コピペ」し、【ファイルを更新】をクリックして下さい。

 

圧倒的にSEOに強いWPテーマ【ザ・トール】

【ザ・トール】インストール手順はコチラ

 

 

手順2:HTMLコードを記述
または「メディアの追加」で設定

 

【HTMLコードを直接記述する場合】

 

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

 

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

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

 

 

 

たけちん
下記の方法が「間違えも少なく」簡単です。

 

【「メディアを追加」から設定する場合】

 

❶ 【メディアを追加】をクリックします。

ワードプレス-画像に枠をつける方法

 

 

❷ 画像を選択して、【投稿に挿入】をクリックします。

ワードプレス-画像に枠をつける方法

 

 

❸ 投稿した画像をクリックして、「編集ボタン」をクリックします。

ワードプレス-画像に枠をつける方法

 

 

❹ 「画像 CSS クラス」の入力項目に、下記のクラス名を入力し【更新】をクリックします。

ワードプレス-画像に枠をつける方法

 

 

 クラス名

  • p-frame
    サンプル1:【影付き枠】
  • p-frame-solid
    サンプル2:【細線の枠】

※:「手順1」で作成したCSSのクラス名

 

 

プレビューで確認

 

たけちん
プレビューで確認してみましょう!

 

このようになります。

 

c-eyecat-tejyun-0809-001
サンプル1:【影付き枠】
owncloud-link-del-folder_03
サンプル2:【細線の枠】

 

 

最後に

 

 

 

たけちん
★無料サポート引き受けます★

 

【★ブログを始める前も始めた後も、無料サポートします!★】

  • 分からないこと
  • 不安なこと
  • 心配なこと
  • 頼みたいこと

    などなど。

★まずは、お気軽にお問い合わせください!★

お問い合わせの詳細はコチラから!

 

【無料サポートを引き受ける理由はコチラ】

 

 

 

ワードプレスの簡単バックアップ方法

こんにちは! たけちんです。   今回は、重要な「ワードプレスのバックアップ」です。     大事なブログをしっかりバックアップしたいなぁ。 何をしたらいいの? 設定とか[…]

『BackWPup』インストール&設定手順
ロリポップの便利機能

  ・2台のパソコンから「同じファイル」にアクセスしたいなぁ。 ・大きなファイルを「安全」に受け渡ししたいなぁ。 ・離れた家族やお友達と「プライベートな動画や画像」をシェアしたいなぁ。 でも、簡単にでき[…]

c-eyecat_server-0806-002
アイキャッチ画像
最新情報をチェックしよう!
>最高のコスパ「ロリポップ!サーバー」

最高のコスパ「ロリポップ!サーバー」

当サイトで実際に導入し、運用中。
【安さ】【使い易さ】【信頼性】【知名度】を総合的に判断、不満なし。
迷ったらロリポップ!で失敗なし。
当サイトは「サイト・ブログの開設、運営」をサポートします。
→ お問い合わせはコチラから
→ サイト・ブログの開設手順はコチラから

CTR IMG