【Simplicity2】画像を線で囲って境界をはっきりさせよう

スポンサーリンク

【Simplicity2】画像を線で囲って境界をはっきりさせよう

 

Simplicity2」デザインカスタマイズ、画像を線で囲う編です。

 

「Simplicity2」は、デフォルトのデザインが「」を基調としてデザインされていますので、余白などが白い画像を使用する場合などは、画像と背景の境界がわからななってしまいます。

そこで、画像の外枠を「」で囲って境界をはっきりとさせましょう。

 

今回のデザインカスタマイズは、「Simplicity2」以外のテーマでも利用することができます。

 

スポンサーリンク

今回のデザインカスタマイズ完成画像

今回のデザインカスタマイズ完成画像

 

では、どのようなデザインになるのかご紹介します。

 

編集前

編集前

 

真ん中の文が画像なのですが、どこからどこまでが画像の範囲なのかが全く分かりません。

そこで、画像に枠線をつけることで画像の範囲がわかるようにしていきます。

 

【編集後】

編集後

 

このように画像に枠線を付けることで、画像の範囲が一目でわかります。

 

画像に枠線をつける方法

画像に枠線をつける方法

 

では、画像に枠線をつける方法をご紹介します。

今回もCSSを利用していきますが、とても簡単な上にコピペだけでカスタマイズすることができます。

 

テーマのCSSを編集する

 

まずは、WordPressの「ダッシュボード」を開いてください。

 

テーマの編集

外観」→「テーマの編集」を選択してください。

 

スタイルシート(style.css)

画面右側にあるファイル一覧から「スタイルシート(style.css)」を選択してください。

 

画面が「style.css」を編集する画面に切り替わりますので、以下のコードをコピペして追加してください。

 

 

最後に「ファイルを更新」ボタンを選択すれば完了です。

 

枠線をつけたい画像にクラスをつける

 

今回は、CSSを編集しただけではデザインは変わりません。

というのも、前回まではもともと「Simplicity2」に設定されていたクラスを利用していましたが、今回は独自で作成したクラスを利用します。

 

クラスは、CSSを利用する際にどこの部分のデザインを変更したいかを判別するためにつけるものです。

(※詳しく知りたい人は調べるかコメントで聞いてください)

とにかく今回は、このクラスをつけることで、クラスをつけた画像に枠線をつけることができます。

 

 

まず、「投稿編集画面」を開き、エディタを「テキストモード(HTMLが編集できる画面)」に変更してください。

 

次に、枠線をつけたい画像のHTML(<img~>)を探し出してください。

 

<img class=”alignnone wp-image-15 size-full bd-1″ src=”http:// ~ />

このようなHTMLタグがあり、その中にclass=””という記述があります。

ここにクラスを追加していきます。

 

ここで、先ほどCSSにコピペしたコードをもう一度見てみましょう。

注目してほしいのは、一番初めの行の.bd-1の部分です。

この「.(ドット)」を抜いた「bd-1」がクラス名です。

.(ドット)」は、「これはクラスだよ」という識別子です。

 

この「bd-1」を先ほど調べた画像のHTMLタグのクラス部分に追記していきます。

追加する場合は、「半角スペース」で区切って追記すればOKです。

 

<img class=”alignnone wp-image-15 size-full bd-1src=”http:// ~ />

 

これで、カスタマイズ完了です。

あとは、直接投稿画面を開いて確認してみてください。

 

補足とか色とか太さとか

 

今回使用したクラスですが、あちらは任意で指定できます。

今回のものは、私が勝手に用意したものですので各自で変更してもらっても構いません。

 

また、今回は枠線の色は「ダークグレイ」、太さは「3px」、枠線のスタイルは「1本線を利用しましたが、様々な指定ができます。

CSS border」でググるといろいろ出てきますので調べてみてください。

 

他にも、「bd-1」は「グレーの1本線」、「bd-2」は「赤の2本線」のようにクラスごとにデザインを変えておくと便利です。

 

まとめ

 

Simplicity2」のデザインカスタマイズ「画像を線で囲う編」でした。

今回は、他のテーマでも利用できる内容になっていますので、ぜひ試してみてください。

 

コメント