こんにちは！今回は、ブログ記事をもっと魅力的に見せる方法をお伝えします。
WordPressを活用して記事を執筆している方は、画像の使用経験があることでしょう。
はじめに
画像を用いる際、画像の背景が白い場合など、画像と他の要素の境界がわかりづらく、読みにくくなることがあります。下記画像は、枠線がない時と枠線がある時のパターン比較です。
枠線なし
枠線を使用せずに投稿した場合の例です。お分かりいただけるかと思いますが、画像の背景と記事の背景が同じで、どこが画像でどこがテキストなのかが判別しにくいですよね。
枠線あり
そこで、次に枠線を導入した例を見てみましょう。
枠線を追加することで、画像の範囲が明確になりました。これにより、読者の利便性が向上し、さらにSEOの観点からもメリットがあります。あなたのWordPressサイトでも、この設定を試してみることをおすすめします。
CSSを用いてブログ内の全画像に枠線を入れる方法
画像に枠線を追加するためには、CSSを利用することができます。border プロパティを使用して、簡単に画像に枠線を装飾することができます。また、インターネット上にはこのデザインを手軽に導入できるCSSスタイルが多く存在します。あなたの好みに合ったスタイルを選び、ブログ記事をより魅力的に彩りましょう。
サンプルデザインはこちらから
作成したCSSタグをWordPressのテーマのCSSに追記しましょう。
ブログをもっと読み手に優しいものにするために、ぜひ画像のデザインに工夫を加えてみてください！
ちなみに本サイトでは、下記コードを使っています。
/*画像の枠線を追加 */
img {
border:solid 3px #c0c0c0;
box-shadow:0px 0px 5px #808080
}CSSタグを挿入する2種類の方法
追加方法は2パターンあります。
1. 追加CSSに追記する方法ーオススメ！
外観 → カスタマイズ → 追加CSS
追加CSSの欄でCSSを追記する方法です。
2つの方法である直接stylesheetを編集するよりもビジュアル的に検証ができます。
追加CSS → CSSタグを追記 → 公開をクリック
CSSタグを追記後、プレビュー上の画像に枠線が入っていたら、公開をクリックして保存します。
・追加前
・追加後
2. style.cssを編集する方法
※編集する前に、必ずバックアップは取っておきましょう。
外観 → テーマファイルエディター
右側のテーマファイル → style.css
style.css内に、作成したCSSタグを追記後、画面下にある「ファイルを更新」で保存します。
保存後、ブログページの画像に枠線が入っていたら完了です。
記事画像だけに枠線を入れる方法
上記方法だと、記事画像でない画像にも枠線が入ってしまいます。
例えば、下記アーカイブ内の画像にも枠線が入ってます。
追加CSSに追記する方法
WordPressで記事内に画像を挿入する場合、classに″wp-image“が付属されます。
つまり、wp-imageがclassに含まれるimgタグのみに枠線を付与する指定を行います！
下記CSSタグを追加CSSに追記することで、記事内の画像のみに枠線が入ります。
img[class*="wp-image-"] {
border: 3px solid #dcdcdc;
}・追記後（ホーム画面）
アイキャッチ画像およびアーカイブ画像から枠線が消えます。
・追記後（記事内）
記事内の画像のみに枠線が入っています。
まとめ
ブログ初心者でも、HTML, CSS, JavaScriptを触れるとカスタマイズに応用が利きます。
また、無暗にカスタマイズするとレイアウトが崩れたり、エラーの原因になりますので、編集前後でバックアップを取っておくと、いつでも安心です！！
余談
私自身が実際に利用しているサーバーとして、ConoHa WING(コノハウィング)を紹介します。
◆独自ドメインが<最大2個>永久無料になる「WINGパック」
・国内最安値水準の月額880円からご利用できる長期利用割引プラン登場！
・「WINGパック」の契約中は「.com」や「.net」などの独自ドメインが最大2個永久無料で利用可能！
・お申し込み後のプラン変更も自由自在！
圧倒的な速さと安定性を実現
セキュリティ対策も万全
選べる料金タイプ
超お得な特典：独自ドメインが取得可能
▶︎比較した指標
- コストパフォーマンス： SSD容量300GB以上。通信の高速化により業界トップを実現。
- 初期費用と月額費用： 初期費用無料。月額1000円でハイスペックサーバーを実現。
- 機能の有無： WordPressに対応。独自SSLによりセキュリティ強化。
