素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

副業

【訪問者様は神】CSSで投稿記事内の画像を見やすくしよう

投稿日: 2018年2月28日
最終更新日:

スポンサーリンク

336×280




アップロードした画像の境界線が分かりにくい。。。

筆者はIT技術系のHowTo記事を多く挙げているため、よく作業時のキャプチャ画像等を記事に添付しています。

しかし、使用しているWordPressテーマによってはテキスト部分と画像の境界線が分かりにくく、結果として記事が読みにくく感じてしまう場合があります。

今回はCSSファイルを調整して、テキスト部分と画像部分の境界線が分かりやすくなるようなレイアウト調整を入れてみようと思います。

手順

CSSファイルの修正

ブログ全般の共通レイアウトの修正を行いたいので、CSSファイルに記述を追加する必要があります。
ダッシュボードから外観>テーマ編集>スタイルシート(style.css)を選択しましょう。

今回は記事エリア内img要素全てにCSSを適用したいので以下のコードを追加してください。

記事エリアを囲んでいるdiv要素に「post」クラスが自動で振られるので、その中のimg要素を対象に指定します。
上記のCSSルールは、img要素の周囲に枠線を追加する記述です。

追記したら、ファイルを更新ボタンをクリックします。

確認

では、実際に記事ページを開いて確認してみましょう。

画像の周囲に枠線が出ていますね。

あとは好きなようにもっとCSSファイルを設定すれば自分好みのデザインにすることが出来ます。

オススメの参考書

終わりに

CSSファイルにちょっと記述を追加するだけでブログデザインを変更することが出来ます。

CSSの指定には、他にももっといろいろな指定をすることでブログデザインの調整が可能なので、ぜひ独学で勉強してみてください♪

336×280




336×280




CATEGORIES & TAGS

副業, , , , , , ,

blogenist

Author: blogenist