投稿日：
2018年2月28日
最終更新日：
【訪問者様は神】CSSで投稿記事内の画像を見やすくしよう
YouTubeも見てね♪
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
アップロードした画像の境界線が分かりにくい。。。
筆者はIT技術系のHowTo記事を多く挙げているため、よく作業時のキャプチャ画像等を記事に添付しています。
しかし、使用しているWordPressテーマによってはテキスト部分と画像の境界線が分かりにくく、結果として記事が読みにくく感じてしまう場合があります。
今回はCSSファイルを調整して、テキスト部分と画像部分の境界線が分かりやすくなるようなレイアウト調整を入れてみようと思います。
手順
CSSファイルの修正
ブログ全般の共通レイアウトの修正を行いたいので、CSSファイルに記述を追加する必要があります。
ダッシュボードから外観>テーマ編集>スタイルシート(style.css)を選択しましょう。
今回は記事エリア内のimg要素全てにCSSを適用したいので以下のコードを追加してください。
|
1
2
3
4
5
6
7
8
|
/* 記事内画像の枠 */
.post img{
border: solid 1px #808080;
box-shadow: 0px 0px 5px #808080;
}
/* 記事内画像の枠ここまで */
|
記事エリアを囲んでいるdiv要素に「post」クラスが自動で振られるので、その中のimg要素を対象に指定します。
上記のCSSルールは、img要素の周囲に枠線と影を追加する記述です。
追記したら、ファイルを更新ボタンをクリックします。
確認
では、実際に記事ページを開いて確認してみましょう。
画像の周囲に枠線と影が出ていますね。
あとは好きなようにもっとCSSファイルを設定すれば自分好みのデザインにすることが出来ます。
終わりに
CSSファイルにちょっと記述を追加するだけでブログデザインを変更することが出来ます。
CSSの指定には、他にももっといろいろな指定をすることでブログデザインの調整が可能なので、ぜひ独学で勉強してみてください♪