アイキャッチ画像

【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:【細線の枠】

 

 

最後に

 

 

 

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

 

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

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

    などなど。

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

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

 

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

 

 

 

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

  大切なブログをしっかりバックアップしたい。 どうしたらいいの? 設定とか難しい? 本当にバックアップできるの?     そのお悩みを解決します。   &nb[…]

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

2台のパソコンから「同じファイル」にアクセスしたいなぁ。 あと、離れた家族やお友達と「プライベートな動画や画像」をシェアしたいんだけど。 簡単にできるのかな? その疑問にお答えします。  この記事[…]

c-eyecat_server-0806-002
アイキャッチ画像
最新情報をチェックしよう!
>大切なデータが突然消えた...( ̄O ̄;)

大切なデータが突然消えた...( ̄O ̄;)

えっ...
二週間かけて作ったデータが消えた...
何が起こったのか理解出来ず、しばし呆然。
私の時間を返してくれ!
【時を巻き戻す術はなし】

そういう経験をした方は少なくないはず。

さぁ、ownCloudでデータを二重化しときましょう!
実際に0円で導入し、運用しています。
→ 無料お問い合わせはコチラから

TKCオフィス仙台は「ホームページ制作、運営」その他をサポートします。
→ Webサイト・ブログ開設の無料相談はコチラから

CTR IMG