WordPress個別サポート

投稿や固定ページに追加する画像に枠線を付ける方法を紹介します。CSSを入力しますが最終的には「画像枠線」ボタンをクリックして画像に枠線を付加するように仕上げます。

現在は次のように画像の枠線は付いていません。

画像に枠線を付けたい

画像に枠線を付けたい

画像に枠線を付けるCSSの例は次のようになります。

border:solid 1px black;

このCSSを指定すれば次のような枠線が画像に付きます。

画像に枠線が付く

画像に枠線が付く

ここではborderのプロパティに「solid 1px black」を指定しました。これは「黒い1pxの実線」ですが他にもさまざまな枠線を付けることができます。

次のようなCSS辞典などを参考に、いろいろと試行錯誤してみてください。

CSS3リファレンス

スタイルシートリファレンス > border

以下、CSSを指定するパターンを紹介します。

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

imgタグのstyle属性に指定する

画像のimgタグに次のstyle属性を追加します。

style="border:solid 1px black;"

テキストエディタのイメージは次のようになります。imgタグの中であればstyle属性の追加場所は自由です。

imgタグにstyle属性を追加

imgタグにstyle属性を追加

これで画像に枠線が付きます。

画像に枠線が付く

画像に枠線が付く

あらかじめ定義したスタイルをエディタで呼び出す

上記の方法でも画像に枠線を付けることはできますが、タグ属性の編集は面倒かもしれません。

あらかじめstyle.css(親テーマまたは子テーマ)に定義したスタイルをテキストエディタやビジュアルエディタで呼び出す方が便利です。

まずは、次のようなCSSを子テーマ(親テーマでも大丈夫です)のstyle.cssに入力します。

/* 画像に枠線を付ける */
.image-waku img {
    border:solid 1px black;
}

「image-waku」という名前は別の名前に変更しても大丈夫ですが、「img」はそのまま使ってください。「.image-waku img」というCSSセレクタによって、「image-waku」というclass名の付いたブロックの中にある画像(imgタグ)に対して枠線が付加されます。

このスタイル(image-waku)をテキストエディタで呼び出します。具体的にはテキストエディタに記述されている画像のimgタグを「image-waku」のdivタグで囲みます。

<div class="image-waku">
<img …略… src=" … course0.png" …略… />
</div>

テキストエディタのイメージは次のようになります。

imgタグをdivタグで囲む

imgタグをdivタグで囲む

style属性を使ったときと同じように、この方法でも画像に枠線が付きます。

定義したスタイルが適用される

定義したスタイルが適用される

エディタで使える「画像枠線」ボタンを作成する

divタグを毎回入力するのも面倒でしょうから、エディタでボタンにしておくと便利です。それにはAddQuicktagプラグインが役立ちます。

AddQuicktagプラグインをインストールして、「設定」‐「AddQuicktag」メニューを開きます。

AddQuicktagの設定メニュー

AddQuicktagの設定メニュー

エディタに表示するボタンのラベル名(1)や開始タグ(2)、終了タグ(3)を入力して、このボタンを有効にするタイミング(エディタや投稿・固定ページなど)をチェック(4)します。有効にするタイミングがピンとこなければ右端のレ点をチェックしておきましょう。

それぞれの入力内容は次のとおりです。

  • ラベル名 --- 画像枠線
  • 開始タグ --- <div class="image-waku">
  • 終了タグ --- </div>

設定の完了後、「変更を保存」ボタン(5)をクリックします。

投稿や固定ページの編集画面を開くとテキストエディタのボタン群に「画像枠線」ボタンが追加されているはずです。

「画像枠線」ボタンが追加される

「画像枠線」ボタンが追加される

ボタンを削除するには「設定」‐「AddQuicktag」メニューで全ての項目を空にしてください。

テキストエディタで「画像枠線」ボタンを使う

「画像枠線」のスタイルを適用するには、テキストエディタで画像のimgタグ全体を選択して「画像枠線」ボタンをクリックします。

imgタグを選択して「画像枠線」ボタンをクリック

imgタグを選択して「画像枠線」ボタンをクリック

画像が「class="image-waku"」のdivタグで囲まれます。

「class="image-waku"」のdivタグで囲まれる

「class="image-waku"」のdivタグで囲まれる

これでstyle.cssに定義した「画像に枠線を付ける」のスタイルが適用されます。

style.cssに入力したスタイルが適用される

style.cssに入力したスタイルが適用される

あとは、style.cssに定義したCSSを自由に微調整してください。

ビジュアルエディタで「画像枠線」ボタンを使う

ビジュアルエディタでは、「画像枠線」ボタンがありません。その代わりに画像(1)をクリックして「Quicktags」メニューから「画像枠線」(2)を選択します。

ビジュアルエディタでは「Quicktags」メニューを使う

ビジュアルエディタでは「Quicktags」メニューを使う

メニューを選択してもビジュアルエディタの画像には枠線が付きませんが心配は不要です。

ビジュアルエディタには枠線が反映されない

ビジュアルエディタには枠線が反映されない

実際の画像にはスタイルが適用されているので、保存またはプレビューしてページを見ると画像に枠線が付いています。

実際のページにはスタイルが反映されている

実際のページにはスタイルが反映されている

まとめ

記述したCSSをエディタで使えるようにボタン化する発想は「画像枠線」ボタン以外にも使えます。いろいろと試行錯誤してみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート