WordPressで投稿画像,記事画像だけに自動で枠線を設定する方法、HTML CSS編集方法紹介いたします

WordPressで投稿画像,記事画像だけに自動で枠線を設定する方法、HTML CSS編集方法紹介いたします

はじめに

今回は ブログの投稿記事を見やすくする方法の一つを紹介いたします!

ワードプレスで記事を書いている中で、みなさん必ず画像の利用をされていると思います。

そのまま画像をはりますと、背景が白い画像などは、画像以外の背景と境目がわからなくなり非常に見えづらくなります。

wordpress-blog-css-img-wakusen

上記画像は枠線をいれていない投稿の見え方のサンプルを載せました。

みていただくと、画像の背景と記事の背景がいっしょのためどこからどこまでが画像なのか、どこからがテキストなのかが非常にわかりづらいですよね・・・!

次に枠線を入れたものをみてみましょう。

wordpress-blog-css-img-wakusen2

今回は枠線を縁にいれましたので、画像がどこまでなのかがはっきりとわかるようになりましたね!

SEO観点でもユーザー利便性を上げていく必要がありますので、ぜひご自身のワードプレスでも設定をしてみましょう!

CSSを用いてブログの全て画像に枠線を入れる

CSSを用いて画像に枠線をいれる場合は

borderを使う必要があります。ただこちらは貼り付けるだけで使えるCSSデザインがネットに落ちていますので、好きなものを選びましょう。

デザインはこちから

ちなみにおまめろぐには下記コードを使っています。

CSSを挿入する場所

次に作成したCSSのタグをワードプレスのテーマのCSSに追記いたしましょう。

追加方法としては2種類あります。

1. style.cssを編集

※必ずバックアップをとっておきましょう。

外観→テーマエディターをクリック

wordpress-blog-css-img-wakusen3

stylesheetをクリック→記入

wordpress-blog-css-img-wakusen4

こちらに追記することで、完了となります。

2.追加CSSに記入する

2つ目の方法は、テーマの追加CSSの欄でCSSを追加する方法になります。

wordpress-blog-css-img-wakusen5

外観からCSS編集をおしていただくことで編集画面にいくことができます。

こちらのほうが直接stylesheetを編集するよりもおすすめになります。

2つのCSS編集画面の違いに関しては下記記事で紹介しております。

ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは?
ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは?
目次 1. はじめに2. ワードプレスのテーマエディターを利用してCSSを編集する方法3. Word […]

記事画像だけに枠線をつける方法!

最初の方法ですと、記事画像ではない画像にまで枠線がついてしまいます・・・

下の画像のようにアーカイブなどにも枠線がついてしまい、
デザインがいまいちになってしまいます・・

今回記事画像だけに枠線を付ける方法見つけましたのでご紹介します!

wordpressのブログで記事画像だけに枠線をつける方法

記事画像だけに枠線を付ける方法!

ひと工夫するだけできんです!

WordPressで記事に画像を挿入する場合、必ずclassにあるものが付属されます。

それは”wp-image”です!

つまり、上記がclassに含まれるimgタグの画像のみ枠線をつけるように指定すればよいので、

とするだけで大丈夫です!

意外と簡単ですが、この方法を見つけるに相当時間がかかりました・・・

ご参考になればと思います^^

最後に

いかがでしたでしょうか。少し手を加えるだけでブログのみやすさは変わります!いろいろ試していきましょう!

インスタでおまめいげんという投稿をしておりますので、名言を定期的に知りたいという方はぜひフォローしていただければと思います!

インスタアカウントにはインスタのボタンからたどれます!

またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください!

TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
目次 1. はじめに 2. TechAcademyとは? 2.1. 運営会社 2.2. TechAc […]

 

人生が変わるかも?本気でプログラミング教室に関して解説しております。


お豆ログを購読!
ブログ更新通知と今日のおまめいげんをお送りいたします
おまめろぐを少しでも応援してくれる方は
フォローしていただけると嬉しいです^^

Twitterフォローはこちらから!

WordPressカテゴリの最新記事