simplicity2で画像に線や影をつけたり、画像を拡大したりするカスタマイズの方法。

simplicity2はカスタマイズ性に優れたワードプレスの無料テーマです。わざわざプラグインをインストールをしなくても使える機能があらかじめ搭載されていたりします。

今回は、ブログ中に挿入した画像について、もう少し見栄えよくなるようにカスタマイズしていきたいと思います。

子テーマがインストールされていることを前提としています。

子テーマの考え方やインストールの方法についてはこちらの記事をご覧ください。

スポンサーリンク

1.画像に線や影を入れる

挿入した画像の背景が白だと、画像に枠線がついていないと、境目がわかりづらくて見にくくなる場合があります。

挿入する前に、わざわざ線を入れる処理をするというのも面倒くさいですし、簡単にできる方法があると嬉しいですね。

Simplicity2には、簡単に画像に線を入れたり、影をつけたりすることができます。

まず、ワードプレスのダッシュボードから、[外観]-[カスタマイズ]をクリックします。

カスタマイズ

現在のテーマ、つまりカスタマイズするテーマが子テーマであることを確認して、[画像]をクリックします。

画像カスタマイズ

画像効果をみると、デフォルト(最初の設定)では枠線が「なし」となっています。

枠線をつけたいときは「ボーダー(枠線)」を選択し、影をつけたいときは、「シャドー(影)」を選択します。

選択した状態で、一番上の「公開」をクリックすると、すべての画像について設定が反映されます。

画像に枠線・影

確認してみましょう。

枠線  影

どちらがいいかは好みですね。ちなみに僕はシャドー(影)をつける設定にしています。

2.画像の拡大効果

スマホの場合、指の操作で画像を拡大させることが可能ですので、気にする必要はありません。

パソコンで見る場合は、拡大効果の設定をしていないと、クリックしても何の変化もありません。(拡大できません)

画像に細かい文字が入っている場合は、パソコンで見た場合は何が書いてあるか分からないことになります。

そこで、パソコンでも画像を拡大できる設定をしていきたいと思います。

「画像リンク拡大効果のタイプ」のところに、「Lightbox」、「Lity(軽い)」、「baguetteBox(スマホ対応)」がありますが、それぞれの説明については図中のリンク先をご覧ください。

今回は、「Lightbox」を利用して拡大効果をもたせたいと思います。

図のように、「Lightbox」にチェックを入れて、一番上の「公開」をクリックします。

画像拡大

ただし、これだけでは拡大効果は出ませんのでご注意ください。

画像の一つ一つに拡大させるかを設定していくことになります。

拡大しないでも十分見える画像についてまで拡大するのは、あまり意味がないと思いますので、本当に拡大させたい画像のみに設定を行っていきます。

設定といっても全く難しくないです。

実際の画像を例に見てみましょう。

見にくい画像

画像を拡大しないと細かい文字が見えないですね。

画像を編集します。

画像編集

画像リンク先

この「リンク先」に、下図のように「メディアファイル」を選択すると、その下に自動的にリンク先アドレスが入ります。

右下にある「更新」をクリックしてください。

リンク先メディアファイル

これでこの画像について拡大させる設定が完了しました。

実際、先ほどの画像をクリックして拡大させるとこうなります。↓

拡大画像

まとめ

画像のカスタマイズについては、この他にもアイキャッチ画像と記事中の最初の画像を連動させる設定などがありますが、今のところそれほど必要性を感じませんでしたので設定はしていません。

それぞれのブログに合った設定をしていけばいいのではないかと思います。

それでは。