【WordPress】記事内の特定の画像に枠などの装飾を付ける方法

記事を書く時に画像を載せることは、よくありますよね。

写真やイラストのように全体に色が付いた画像であれば、良い感じに表示出来ます。

昨日書いた記事より。超おすすめのアニメです(^q^)
【ご注文はうさぎですか？？】放送開始！1話の可愛さが尋常じゃない！ごちうさ2期【ロリコンホイホイ】

でもWebページのキャプチャ画像とかを載せる時とかだと、背景色が被って、画像がどこからどこまでなのか分からなくなることがあります。

ここから画像。

ここまで画像。

例に上げたような画像だと、一体化してしまって、画像なのかどうかさえ分からないですよね…。

今回はこういった画像に枠を付けたりして装飾する方法について説明します。

当サイトでは大体こんな感じにしてます。

スタイルシートを編集

まずは、どんな装飾を施すか決めます。

私の場合は、単に画像とテキストく区切りが分かればいいと思っていたので単純なボーダーの指定のみ「style.css」に追加しました。

.bd1gray {
    border: 1px solid #ddd
}

.bd1graydot {
    border: 1px dotted #ddd
}

.bd2gray {
    border: 2px solid #ddd
}

.bd2graydot {
    border: 2px dotted #ddd
}

こだわりたい人は、CSSのサンプルを公開してくれている人達がたくさんいるので、お好きなデザインを探しましょう。

影とか入れるとオシャレですね

CSS3のボックスシャドウを使って写真のフチの装飾をするサンプル作りました。【サンプルコード付き】 | HTML5でサイトをつくろう

スタイルは用意したので、次は画像に指定する方法です。

特定の画像にスタイルを適用する

記事を書く時に、エディタをテキストに切り替えたりして作業している人なら、スタイルを当てたい<img>タグにさっき用意したクラスを指定したらいいだけです。

<img src="hoge.jpg" class="bd2gray" />

でもエディタの編集モード切り替えると、色々問題が起こったり、指定したい画像のタグを探すのに時間がかかったりします。

なので、ビジュアルエディタの状態から専用のクラスを指定する方法を紹介します。

装飾したい画像を選択して、出てきたメニューから「編集」をクリックします。

画像詳細の上級者向け設定にある、「画像CSSクラス」に先ほど用意したスタイルのクラスを入力して「更新」します。

これで特定の画像にだけ専用のスタイルを当てられます。

終わりに

この方法を取るまでは、画像の方に枠を追加したり、背景色が変わる所まで多めにキャプチャしたりしていました。
今でもスタイルを当てる手間を省く為に、キャプチャの撮る範囲は調整していますが(；´∀｀)

今回の方法は個別指定なので、多少面倒です。とは言え、画像と本文の区切りが分からない状態は辛いものがあります。

投稿内の画像に対して一括指定してしまうという方法もありますが、外部の埋め込みコードにまで影響及ぼしたりしてしまいます。そういうものを使わないというのであれば一括でスタイルを当てるのもありだと思います。

私は、枠を付けないといけないような画像を使う機会が多くないので、この方法で満足しています。

でも画像をクリックした時に出てくるメニューに、よく使うクラスをボタン1つで追加出来たりすると便利ですよね。

それに似たことが出来るプラグインがあったような気がするので、今度調べてみます。なければ自分で作ろうと思います！

それでは。

 - CSS, Webサイト構築, WordPress