簡単すぎる！wordpressで初めてのCSS編集これで画像装飾はお手のもの

この記事で得られるメリット

• 初めてWordpressでCSSを編集する人でもわかる
• コードをコピペするだけで簡単に編集できる
• 色々な装飾表現ができるようになる

CSSを編集する際に注意すべき点

当ブログでもテーマをカスタマイズする際に、必要な子テーマ作成のところでお話していたのですが、テーマをアップデートするとCSSも更新され、今まで編集したのが無駄になってしまいます。それを防ぐためには、子テーマが必要になります。

しかし、CSSのみの編集であれば「simple custom CSS」というプラグインを使うことでテーマのCSSとは、別にCSSを編集することができます。今回はこのプラグインを使って説明したいと思います。

参考までに↓に子テーマ作成についての記事を貼っています。興味がある方はご覧下さい。

2015.10.16

WordPress初心者でも安心してCSSを編集できる子テーマ作成法

Wordpressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃらないでしょうか？子テーマを作成すれば親テーマを変更せず、レイアウトを変更できるので大丈夫です。初心者でも安心して子テーマを作成する方法をご紹介します。 　このようなメリットがあり...

CSSの編集方法

wordpress管理画面⇨「プラグイン」⇨「新規追加」⇨「simple custom CSS」と検索する。⇨インストールし有効化します。
今回は、画像装飾のCSSコードを提供されているWEBロケッツマガジンさんのコード（シャドウ）を利用して説明したいと思います。

CSS3を使ってできる画像まわりのエフェクトやスタイリング18

有効化するとwordpress管理画面⇨「外観」⇨「custom CSS」に入ります。そして、WEBロケッツマガジンさんのCSSコード（シャドウ）を下の写真のとおりコードをペーストします。

投稿画面に移り、画像を挿入してdivで囲んでclassを指定して画像への装飾は完了です。

シャドウを入れる前の写真

CSSでシャドウを入れた写真

まとめ

いかがでしたでしょうか？簡単にCSSで画像を装飾できたかと思います。

WEBロケッツマガジンさんはたくさんのコードを紹介されていますので、活用してあなたの表現したい画像に編集していただけたらと思います。

2017.07.13

本気でスキルを身に付けたい人におすすめのプログラミングスクール５校のまとめ

本気でプログラミングを学んで、HPを作りたいとか、スマホアプリを作りたいとか、転職して別の道に進みたいと考えている人へ、最短で習得する為にはスクールを利用することをおすすめしたいと思います。 なぜなら、私はwebと関係ない世界から今はこうやってブログを書いていますが、初めは独学で勉強して...