こんにちは、

【SE小規模社長簡単】の

山本です。

今回は、「WPで画像の装飾をする方法、

一度の設定で超簡単!」について、

私、【SE小規模社長簡単】の

山本がお届けいたします。

 

WPで画像の装飾をする方法、一度の設定で超簡単!

画像の装飾とは

画像の装飾とは、

画像自体を編集して装飾する

ということではなくて、

 

追加した画像に枠をつけたり、

枠の線を太くしたり、

色のついた枠にしたり、

少し回転させたり、

何も装飾していない
幅2pxの枠をつけてみる
幅2pxの枠と影を付けた

 

 

幅2pxの枠と影を付け、時計回りに15度回転させた

 

 

幅2pxの枠と影を付け、反時計回りに15度回転させた

直線を点線や破線にしたり、

影をつけて浮いたように見せる、

装飾のことです。

 

このほかにも、

角を丸めたり、

円形に画像を切り抜いたりもできます。

 

画像によっては、

テキストを表記した白抜きの

画像だったりしますが、

 

そのような画像では、

区切り線がないので、

 

メリハリをつけるために、

枠線をつけてより見やすく

しなくてはいけません。

 

 

装飾する手段・方法

私も、最初の内は、画像の装飾をするのに、

メディアの画像を追加したあとに、

編集モードをテキストモードにして、

 

いちいち、タグを使って、

CSSの書き込みをしていました。

 

 

もしかしたら、

もっと簡単な方法があるのではないかと、

 

調べてみたら、プラグインが見つかったので、

それを使ってみました。

しかしこれもうまくいきません。

1つのプラグインでは事が足りずに、

いくつか使ったりしないといけなかったり、

 

他のプラグインと干渉したり、

サイトの読み込みが遅くなったり

今一つ、しっくり行きませんでした。

 

結局は、テキストモードで

CSSのデザインを書き込むような、

手間のかかる方法で、

我慢していたわけです。

 

そうこうしているうちに、

時間は経ち、

諦めかけていた時のことです。

 

 

あるとき

いつものようにメディアの追加で、

画像を張り付けて、

 

上級者向け設定で、

メディアのサイズを変えたり、

リンクの表示方法を設定しているときに、

 

ふと、いつもは、何気なく見過ごしていた

「画像CSSクラス」という項目に

目が留まりました。

 

もしかしたら、これで、

画像の装飾ができるのではなかろうかと、

ひらめいたわけです。

 

早速調べてみたら、案の定

見つかりました。

テーマの編集で、

cssファイルに

画像を装飾するclassを書き込んで

 

その追加したcssクラスを

先ほどの、メディアの編集時に

気づいたといった、

 

「画像cssクラス」

に書き込んでやることで、

簡単にできることを知りました。

 

しかし、テーマを編集するのは

少し抵抗を感じます。

 

何故かと言えば、

テーマ自体の機能追加や

不具合修正で、

バージョンアップしたときに、

 

何らかの影響が出る可能性は、

全くないとは言い切れないからです。

 

できれば、テーマは触ることなく

cssの追加ができないものかと

考えてみたら、

 

簡単にクリアできる方法がありました。

 

それは、メニューの「カスタマイズ」

の中にある「追加css」で

cssクラスを追加すればいいだけの話です。

 

 

画像装飾の具体的な設定手順

前置きが長くなってしまいましたが、

これから、具体的な画像装飾の

設定手順を解説したいと思います。

 

上記で解説時に使用した装飾例をもとにします。

 

まず、以下のcssをカスタマイズメニューの中の

追加cssに書き込んでください。

 


/* 画像の装飾 */
/* 2pxの枠 */
.s2px {border:2px solid #888888;}
/* 枠の影 */
.shadow{ box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);}
/* 時計回りに15度回転 */
.rotate{
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
/* 反時計回りに15度回転 */
.rotate_r{
transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
}
/* 角を丸める */
.circle{
border-radius: 1em 1em 1em 1em;
}

それぞれの解説は、動画で細かくお話ししていますので、

ここでは、省略させていただきます。^^;

 

 

そして、これをWordPressダッシュボードの

カスタマイズメニューを開きます。

 

 

 

 

 

「追加css」をクリックします。

 

 

 

 

 

上記のcssをコピペして追加します。

 

 

 

 

 

ここまでで、設定は完了です。

 

実際に画像に装飾してみます。

 

下記の様にメディアを追加します。

 

 

追加したら、画像をクリックして編集アイコンをクリックします。

 

 

 

 

 

ここでは、「s2px shadow rotate」と入力します。

 

 

 

 

「更新」ボタンを押して、記事も更新すると

以下のようになります。

 

 

 

如何でしたか、

 

今回は、「WPで画像の装飾をする方法、

一度の設定で超簡単!」について

 

【SE小規模社長簡単】の山本が

お届けいたしました。

 

次回も役立つ情報をお届けいたします。

 

最後までご覧いただきありがとうございました。

 

貴方の成功を心から願っています。