Onecosブログ

WordPress/Webサービス/ライフスタイルを紹介する個人ブログ

WP Canvas Shortcodesの使い方。CSS知識不要!ショートコードで簡単にスタイルを変えれる

time 2015/06/29

WP Canvas Shortcodesの使い方。CSS知識不要!ショートコードで簡単にスタイルを変えれる

このサイトでも使っている便利なプラグイン、WP Canvas Shortcodesの使い方のメモ
画像の横並び、サムネイル、タブや、アコーディオンなど、ちょっとした事なんだけど、CSSでスタイルを調整するのって面倒臭い。装「ちょっとだけ変えようかな?」って思った時に便利なプラグインです。

このプラグインは有効化さえすれば、後は決まった手順でショートコードを貼れば簡単に実装出来ます。

sponsored link

WP Canvas Shortcodesのダウンロード

まずはここからダウンロードするか、プラグイン→新規追加から「WP Canvas Shortcodes」で検索。インストールして有効化。
WP Canvas Shortcodes

WP Canvas Shortcodesの機能

テキストエディタ(HTMLモード)には、ショートコード挿入ボタンは追加されません。ビジュアルエディタで使って下さい
すると下記の画面のように追加されます。
iofewa
この部分を選択するとアイコン
efafeaw
↓これ

ショートコードは左から順番で下記の順です。

カラムの指定

カラムの指定
カラムの指定が出来ます。
例えば1/2+1/2を指定すれば横並びの2列になります。
1カラムでよいなら指定する必要はありません。

ねこ
ねこ画像

例えば上記のように横並びにする場合は、カラムを指定すると下記のコードが出てくるので、ショートコードの間に画像を挿入します
※カラム指定後、テキストエディタに戻した場合

WP Canvas Shortcodesのスタイル

とりあえず見たほうが早いのでズラズラ書いていきます。デフォルトのショートコードを張っているので、このままコピペし、文字だけ変えるか数値を指定すればよいでしょう。
使用しているテーマのCSSにより若干スタイルが変わる場合があります。

Elments→Buttons:リンクボタンの表示

Elments→GoogleMap:グーグルマップを表示


Elments→Pricing Tavle:価格表の表示

Basic
$19.99
per month
30GB Storage
512MB Ram
10 databases
1,000 Emails
25GB Bandwidth

Basic
$19.99
per month
30GB Storage
512MB Ram
10 databases
1,000 Emails
25GB Bandwidth

Basic
$19.99
per month
30GB Storage
512MB Ram
10 databases
1,000 Emails
25GB Bandwidth

Elments→Skillbar:プログレスバーの表示

目標まで
70%

Elments→Social icon:ソーシャルアイコン

  • Facebook
  • Google
  • Twitter
  • Pinterest
  • Instagram
  • BlogLovin
  • Flickr
  • RSS
  • Email
  • Custom 1
  • Custom 2
  • Custom 3
  • Custom 4
  • Custom 5

Elments→Testimonial:吹き出しの表示

これってなに?
こたえ

Elments→Countdown:指定日のカウントダウン

Elments→RSVP 招待状のフォーム

Your Name

Number of Guests

You Will Attend...

Hello

Boxes:ボックス

Sample Content
Sample Content
Sample Content
Sample Content
Sample Content
Sample Content
Sample Content

Highlights:文字のハイライト

Sample Content
Sample Content
Sample Content
Sample Content
Sample Content

Dividers:罫線の表示











jQuery→accordion:アコーディオンの表示

hQuery→Tabs:タブの表示

Sample Content
Sample Content1

jQuery→Toggle:トグルの表示

簡単な使用例

使用例2

カラムを指定して、その中にスタイルのショートコードを入れればこのようになります。

HP
60%
MP
30%

使用例2

タブの中にカラムを指定し、さらにショートコードを追加することも出来ます。
これは簡単で便利ですね
※スマホの場合縦に表示されます

ewacaw

テスト投稿1

説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文

fewawefa

テスト投稿2

説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文

まとめ

本当に便利なプラグインです。
TwitterBootstrpのような事が簡単にプラグインで出来るようになります。
カラムをうまく使えばピンタレストのように画像を並べることも出来るし、ただ画像を貼るだけよりグッとカッコよくなります。アイディア次第で色々出来ますね!!

この他にも【Post→Maonry-Box】にすれば、投稿ページがこのサイトのTOPページのように記事が表示されたりします。

CSS知識不要と書きましたが、もし色を変更するやスタイルを調整する場合プラグインのCSSを変更しなければなりません。
しかし、このままでも十分使えます。
是非使ってみてください

プラグインの公式はこちら

sponsored link

音楽

管理人

Yuki

Yuki

本業はWeb制作やWebコンテンツの運営をしています。最近は動画制作も。日常やWordPress等の役に立つ情報を皆さんにお届けします

LikeBoxを表示するには、テーマカスタマイザーSNS設定FacebookページURLを入力してください

sponsored link