ブログの画像に枠をつける ～ CSSのimgタグとWordPress

今回は、ブログ記事の画像に枠をつける、という設定をしました。

1. 画像の文字がリズムを壊している

このブログ記事で使う説明画像は、説明資料や講義でも使うので文字が入っています。

しかし、これまで本文と画像内の文の見分けがつきにくく、記事を読むときに文章が繰り返されたりして、リズムが悪いように感じていました。

なんか自分でも違和感があったんですよね

そこで、違和感の原因を考えたところ「読む順番がわかりにくいから」と思い至りました。例えば、漫画でも上から下へ自然な順番で読むことができるように、文字の配置は工夫されていますよね。これが不自然な配置だと、それだけで読みにくいことがあります。ブログ記事でも同様です。

そこで、「ここからここまでは説明画像！」というのがわかりやすくできないか、と考えました。

2. 追加CSS

このページはWordPressなので、スタイルは「追加CSS」に記述します。

「外観」→「カスタマイズ」→「追加CSS」の順番で選択します。

そこに、以下のように記述しました。

.wp-block-image img {
    border: 3px solid #f0c020;
}

3. CSSの中身をちょっと解説

まずは、基本はこのように書きます

img {
    border: 3px solid #f0c020;
}

意味は、「すべての画像（img）に、オレンジ色（#f0c020）の3 ピクセルの枠（border）をつける」

しかし、これだと、ブログ記事以外の画像も枠がついてしまいます。

そこで、「ブログ記事内だけ」にする必要があります。

.wp-block-image img {

このように書くと、class「wp-block-image」の「img」タグにだけスタイルが適用されます。

このクラスは、HTMLソースコードを見ることで調べることができます。

ブラウザGoogle Chromeの場合は、画像の上で右クリックすると「検証」できますので、近くのコードから「class=」と書いてある場所を参考にしてください。

このclassを探すのは慣れがありますよね

4. こちらもどうぞ

[WordPress] ブログの一部をウェブフォントに変更する 【Google Fontsを追加する】

ホームページを見ながら、デザインのメリハリをつけたいと思いました。そこで、今回はウェブフォントの変更をした話を書きます。コンテンツ管理システムとテーマこのホームページはWordPressのCocoonを利用して管理しています。環境コンテンツ管理システム：WordpressWordpressのテーマ：Cocoon利用したウェブフォント：Google Fonts利用しているシステム・テーマによって、CSSの読み込み・記述をどこにするか変わってきますよーGoogle Fontsでフ...

chiilabo.com

ブログでJavaScriptプログラムを動かしてみよう【カスタムHTMLとscriptタグ】

ブログの中でJavaScriptを動かして遊ぶ方法をご紹介します。WordPressサイトに直接HTMLコードを入力するために「カスタムHTML」というブロックを挿入します。JavaScriptのコードは最初と最後をのタグで囲んだ中に入力します。

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。