menu

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

wordpressを使っていて、画像を装飾をする際にCSSを編集したい時ってありますよね。じゃあ編集ってどこから入って、コードを書いていけば良いかわからないですよね。私もわからなくて迷ってたんですよね。そんなあなたにCSS編集をする際に気をつけておくべき点を踏まえて説明したいと思います。

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

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

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

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

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

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

CSSの編集方法

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

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

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

https://share-life.biz/wp-content/uploads/2016/02/adc19d0ca8d140e8bcc1340aa69e2bd6.png

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

カスタム2

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

73b638ea11c13050114caaa001e36b4b_s

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

73b638ea11c13050114caaa001e36b4b_s

まとめ

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

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

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

ブログってそう使うんだ!月間10万PVブロガーとの対談から得たブログ活用法と考え方ブログってそう使うんだ!月間10万PVブロガーとの対談から得たブログ活用法と考え方

注目度大!after effectsでfacebookプロフィール動画の作り方を紹介します。注目度大!after effectsでfacebookプロフィール動画の作り方を紹介します。

関連記事

  1. font-533232_1280

    【動画版】子テーマでのバイラルメディア風facebookボタン設…

    この記事が気に入ったらいいね!しようというバイラルメディア風オリジナルSNSボタンの設置方法について…

  2. Fotolia_51516768_S

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

    Wordpressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃ…

  3. facebook投稿のリンク画面をアイキャッチ画像にする設定方法

    facebook投稿のリンク画面をアイキャッチ画像にする設定方法…

    ブログ記事をfacebookに投稿したけど、アイキャッチ画像が表示されないって時って悩ましい…

  4. ul、liのドット部分を画像でリスト化する方法

    ul、liのドット部分を画像でリスト化する方法

    ul,olのドットや数字部分に画像を挿入したい時ってありますよね。画像を挿入できれば、自分の…

  5. 50743432_m

    たったそれだけで?PVを増加させたSNSボタンのカスタマイズ方法…

    ブロガーなら、誰でも悩むと思うのですが、バズを狙ったり、自分のfacebookやtwitterに投稿…

  6. 初心者必見contact form 7基本操作からカスタマイズ方法をご紹介します。

    初心者必見contact form 7基本操作からカスタマイズ方…

    contact form 7でお問い合わせページ作成したけど、レイアウトだけでも変更したいと…

  7. wordpressでテキストにアイコン付き背景をワンクリックで挿入する方法(コピペできます)

    wordpressでテキストにアイコン付き背景をワンクリックで挿…

    ブログを書いて、強く訴えたい部分ってありますよね。目立たせたいけどどうすればいいか悩みますよ…

  8. たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの使い方

    たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの…

    リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画…

PAGE TOP