下の図を見て頂くとわかるように、記事と記事の切れ目がわかりにくいので、
記事一覧が表示される箇所の背景色を変更します。
↓↓↓こんな感じにします↓↓↓
今回はCSS（スタイルシート）に直接変更を加えていきます。
というより、Wordpress管理画面から直接変更する方法がわかりませんでした。
前提
とりあえず見様見真似でできるかと思いますが、ある程度知識がないと何をしているか分からないかもしれません。
基本的には大丈夫ですが、やり方によってはサイトを破壊してしまう可能性はあるので、慎重にお願いします。
ファイルに変更を加える際は変更前のファイルは別で保存しておきましょう。
CSSファイルを手に入れる
まずは、サーバーからCSSファイルを落としてきましょう。
対象の「style.css」ファイルは下記の場所にあるかと思います。
/wordpress/wp-content/themes/cocoon-child-master/style.css
※わざわざ落とさずに直接変更でもOKです。
CSSファイルに変更を加える
おそらく、後述のコードを追記すれば問題ないはずなんですが、念のため下記手順を踏んでください。
１．まず自分のサイトを表示してください。
２．どこでも良いので右クリック→検証で「開発者ツール」を開く
３．下記画像の赤枠をクリック
４．下記画像の様に背景に変更を加えたい箇所にカーソルを合わせてクリック
クリックすると「開発者ツール」が下記画像の様に表示されるかと思います。
※訳が分からない人もいるかもしれませんが、こらえてください。大丈夫です！
赤枠の「Stylesタブ」に緑枠「.a-wrap」があることを確認してください。
cocoonのテーマ使っていれば同じかと思います。
５．style.cssに下記を追記する
カラーコードはこちらを参考にすると良いと思います。
因みに、カラーコードは「#add8e6」のような形式です。
.a-wrap{
background-color: カラーコード;
}あとは変更を加えたファイルをサーバーにアップロードします。
※直接変更加えた方は保存します。
私はカラーコード#add8e6で下記の様に装飾できました。
コメント