7月23日の内容『CocoonのCSSカスタマイズ』

7月23日のブログ勉強会は、画像についての復習と、Cocoonテーマのカスタマイズをしました。

WordPressの画像について

WordPressの記事内の画像というのは、ワープロソフトのWordなどと違って、記事の中に埋め込まれているわけではありません。

<img src=”〇○○”>

というタグの『○○〇』という部分に画像のアドレスを指定して、そこから読み込んでいます。

WordPressのメディアライブラリ

Wordressは画像の置き場所として『メディアライブラリ』があります。

この中にある画像を記事内に呼び出して表示させています。

ですので、この中の画像を削除しないようにしましょう、画像が記事で表示されなくなってしまいます。

※ただし、記事に使わないいらなくなった画像は消してもOKです。

Cocoonテーマのアピールエリアの四角を消す

WordPressの無料テーマ『Cocoon(コクーン)』には『アピールエリア』というものがあります。

通常、これは特に目立たせたい文章やリンク先のボタンを表示させる(アピールする)場所です。

アピールエリア

ですが、このアピール部分の白い四角を消して背景の写真だけにしたいというご要望がありました。

アピールエリアの四角を消す方法

管理画面の『カスタマイズ』を選択します。

追加CSSをクリック

追加CSSの下のほうの記入欄に

以下のコードを記入します。

.appeal-content{
	display:none;
}

すると、四角の部分が消えます。

※スマホ表示にすると、アピールエリアの高さがなくなります。これはまた別途設定しなければなりませんので次回以降やります。

どこをどう直すかを調べる『デベロッパーツール』

『Ctrl+Shift+i』を同時に押すと、『デベロッパーツール』というのが立ち上がります。

こちらを操作して、どこをどう直すかをシミュレーションするのですが、ここについては難しくてまだ詳しく覚える必要はないので、勉強会でちょくちょく触って慣れていきましょう。

CSSのカスタマイズ

CSSはWordpressだけでなく、他のブログサービスでもカスタマイズすることが可能です。

今回の授業では冒頭にFC2の画像の大きさをカスタマイズしたのをご覧に入れました。

CSSは一つ間違えるとデザインを大幅に崩してしまうので、きちんとした知識が必要です。CSSのカスタマイズをしたい場合は、私までご相談くださいね。

まとめ

CSSのカスタマイズは、プログラミングのようで難しく感じると思いますが、わかるようになると自分好みのデザインにカスタマイズができるようになります。

全てを理解しようと思うと大変ですが、必要なところだけ、接しているうちに少しずつ慣れていきます。

まずは『写経』だと思って見よう見まねでやってみましょう。

タイトルとURLをコピーしました