はじめに
今回は ブログの投稿記事を見やすくする方法の一つを紹介いたします！
ワードプレスで記事を書いている中で、みなさん必ず画像の利用をされていると思います。
そのまま画像をはりますと、背景が白い画像などは、画像以外の背景と境目がわからなくなり非常に見えづらくなります。
上記画像は枠線をいれていない投稿の見え方のサンプルを載せました。
みていただくと、画像の背景と記事の背景がいっしょのためどこからどこまでが画像なのか、どこからがテキストなのかが非常にわかりづらいですよね・・・！
次に枠線を入れたものをみてみましょう。
今回は枠線を縁にいれましたので、画像がどこまでなのかがはっきりとわかるようになりましたね！
SEO観点でもユーザー利便性を上げていく必要がありますので、ぜひご自身のワードプレスでも設定をしてみましょう！
CSSを用いてブログの全て画像に枠線を入れる
CSSを用いて画像に枠線をいれる場合は
borderを使う必要があります。ただこちらは貼り付けるだけで使えるCSSデザインがネットに落ちていますので、好きなものを選びましょう。
ちなみにおまめろぐには下記コードを使っています。
|
1 2 3 4 5 |
/*画像の枠線を追加 */ img { border:solid 3px #c0c0c0; box-shadow:0px 0px 5px #808080 } |
CSSを挿入する場所
次に作成したCSSのタグをワードプレスのテーマのCSSに追記いたしましょう。
追加方法としては2種類あります。
1. style.cssを編集
※必ずバックアップをとっておきましょう。
外観→テーマエディターをクリック
stylesheetをクリック→記入
こちらに追記することで、完了となります。
2.追加CSSに記入する
2つ目の方法は、テーマの追加CSSの欄でCSSを追加する方法になります。
外観からCSS編集をおしていただくことで編集画面にいくことができます。
こちらのほうが直接stylesheetを編集するよりもおすすめになります。
2つのCSS編集画面の違いに関しては下記記事で紹介しております。
記事画像だけに枠線をつける方法！
最初の方法ですと、記事画像ではない画像にまで枠線がついてしまいます・・・
下の画像のようにアーカイブなどにも枠線がついてしまい、
デザインがいまいちになってしまいます・・
今回記事画像だけに枠線を付ける方法見つけましたのでご紹介します！
記事画像だけに枠線を付ける方法！
ひと工夫するだけできんです！
WordPressで記事に画像を挿入する場合、必ずclassにあるものが付属されます。
それは”wp-image”です！
つまり、上記がclassに含まれるimgタグの画像のみ枠線をつけるように指定すればよいので、
|
1 2 3 |
img[class*="wp-image-"] { border: 3px solid #dcdcdc; } |
とするだけで大丈夫です！
意外と簡単ですが、この方法を見つけるに相当時間がかかりました・・・
ご参考になればと思います^^
モバイルバッテリーでパソコンが充電できるのご存知でしょうか？
USB PD（45W）ポートがあるAnkerの下記
モバイルバッテリーですとパソコンの充電も可能の
超超超高性能になります！
さらにPC充電用のコードもついているため
こちらを購入するだけまる1日外でパソコン、スマホ生活ができてしまいます！
最後に
いかがでしたでしょうか。少し手を加えるだけでブログのみやすさは変わります！いろいろ試していきましょう！
インスタでおまめいげんという投稿をしておりますので、名言を定期的に知りたいという方はぜひフォローしていただければと思います！
インスタアカウントにはインスタのボタンからたどれます！
またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください！
人生が変わるかも？本気でプログラミング教室に関して解説しております。
知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ！
