ご冗談でしょう、チャッキーさん

チャッキーさんの旅と読書とWordPress学び備忘録

WP初心者必見! WPCanvasShortcodes が便利すぎて手放せない

約 16 分

WordPressの記事内で「段組み」「カラーボックス」「アコーディオンメニュー」など、やりたいことは沢山あるけど、やるにはある程度CSSの知識が必要になります。

でも、諦めないで下さい!!!

今回紹介する「WP Canvas Shortcodes」を使えば、僕のようなバカでも、1クリックでカンタンにあんな事やこんな事が出来ちゃうんです!!

例えば ↓ ↓ ↓

カンタンに文字を囲って色まで付くの?ウソ?!本当です。

カラーの囲みもボタン1発! とにかく超便利なプラグインなんで WordPress初心者は今すぐインストールをオススメします。

WP Canvas Shortcodesのデメリット

とても便利な「WP Canvas Shortcodes」ですが、使う前に一応デメリットも知っておいてください。

先程説明で使った「色の付いたボックス」を例で説明します。

wp canvas shortcodes

「wp canvas shortcodes」をインストールをすると、ボタン1クリックで、上のように表示できるのですが、アンイストールすると「英語の羅列=ショートコード」が画面に表示されてしまいます。 ↓ ↓

wp canvas shortcodes

対応策としては「これまで使って来たショートコードを全て消す」しかありません。

使用箇所が1,2個であれば特に問題ないでしょうが、全ページで使用していたりすると量にもよりますが、徹夜作業になります。

だから、使うなら一生付き合うつもりでお願いします。

僕は、現在まで特に困るような事はありませんでしたが、テンプレートとの相性などから削除しなければならない場合があるかもしれません。その事を理解した上でご使用ください。

ただし、メッチャ便利なんで、そんな事すぐに忘れてしまうでしょう

WP Canvas Shortcodesのインストール

ダッシュボードメニューから「プラグイン」⇒「新規追加」をクリックします。

wp canvas shortcodes

つづいて、検索ボックスに「WP Canvas Shortcodes」と入力。

wp canvas shortcodes

表示されたプラグインを「今すぐインストール」⇒「有効化」まで済ませてください。

インストールは以上になります。続いて使い方を見ていきましょう。

使い方

投稿画面に移動すると、このような2つのアイコンが追加されています。

wp canvas shortcodes

  • ①はレイアウトの作成やボックスの作成 など色々行なえるボタン。
  • ②はアイコンを表示させるためのボタンです。

①をクリックした状態

②をクリックした状態

②の使い方

①は種類が多いので、まずは②のアイコンの使い方から説明します。

使い方は、②をクリックして表示された文字を選ぶだけです。そうすればアイコンが表示されます。例えば1番上にある「500px」を選ぶと→と表示されます。

ただ、表記出来るアイコンの数が死ぬほどあるので、とりあえず適当に選択して自分のお気に入りを探して下さい。試しにいくつか適当に選んでみました。

このように表示されます ↓ ↓ ↓

 

アイコンは、文字と同じように選択して色や大きさなども自由に変更することも可能です。

アイコンの使い方は以上です。続いてよく使う機会のあるボックスやボタンが作成できる①の使い方をみていきましょう。

①の使い方 Columns

wp canvas shortcodes

1番上にある「Column」では文章の構成を途中で変更することが出来ます。

文面だけでは説明しづらいので↓↓↓を御覧ください。

1/2+1/2

とっても簡単にセンターでレイアウトをわけることに成功しました。これで、分かりやすく文章を整理することが可能になりました。

とっても簡単にセンターでレイアウトをわけることに成功しました。これで、分かりやすく文章を整理することがかのうになりました。

このようにレイアウトをセンターで分けてくれます。

使い方は「Columns」から「1/2」を選択して見ます。

すると、↓のような文字が投稿画面に表記されます。

2ヶ所ある「SAMPLE Content」の部分に好きな文字を打ち込むだけです。

これで先程のような2段のレイアウトを文章の途中で構成することが出来ます。 写真を挿入する際もフルサイズでOKでした。自動的にサイズを調整してくれます。

他にも様々な区切りが方がありますので是非ためしてみてください。

1/3+1/3+1/3

 

とっても簡単に1/3でレイアウトをわけることに成功しました。これで、分かりやすく文章を整理することがかのうになりました。

 

とっても簡単に1/3でレイアウトをわけることに成功しました。これで、分かりやすく文章を整理することがかのうになりました。

 

とっても簡単に1/3でレイアウトをわけることに成功しました。これで、分かりやすく文章を整理することがかのうになりました。

 

1/3+2/3

 

とっても簡単に写真1/3と文字2/3でレイアウトをわけることに成功しました。これで、分かりやすく文章を整理することがかのうになりました。

①の使い方 カラーボックス

wp canvas shortcodes

 

続いて、紹介するのは文章を色で囲んでくれるボックスです。
まとめる時によく使うアレです。

ココがまとめですよ注目してくださいね。という時に文章に枠を付けるやつです。WPCanvasShortcodesなら色ベースになります。普通の枠よりも効果的に文章を読ませることが出来ますよ。1つの記事で多用するとどこが大事なのか?わからなくなるので注意してくださいね。

こちらもボタンを押して「SAMPLE Content」を書き換えるだけでOKです。

種類が沢山あるので、どの項目がどの色になるかだけ覚えておいて下さい。

コチラは【primary】ボタン一つで文字に囲みがつくれてしまいます。こちらもとても簡単なのにみんなびっくりするほどのクォリティーです。
コチラは【secondary】ボタン一つで文字に囲みがつくれてしまいます。こちらもとても簡単なのにみんなびっくりするほどのクォリティーです。
コチラは【inverse】ボタン一つで文字に囲みがつくれてしまいます。こちらもとても簡単なのにみんなびっくりするほどのクォリティーです。
コチラは【success】ボタン一つで文字に囲みがつくれてしまいます。こちらもとても簡単なのにみんなびっくりするほどのクォリティーです。
コチラは【warning】ボタン一つで文字に囲みがつくれてしまいます。こちらもとても簡単なのにみんなびっくりするほどのクォリティーです。
コチラは【danger】ボタン一つで文字に囲みがつくれてしまいます。こちらもとても簡単なのにみんなびっくりするほどのクォリティーです。
コチラは【info】ボタン一つで文字に囲みがつくれてしまいます。こちらもとても簡単なのにみんなびっくりするほどのクォリティーです。

①の使い方 Highlights

wp canvas shortcodes

Highlightsは読んで字のごとく文字をハイライトさせてくれる機能です。

選択した文字がハイライトされます。

選択した文字がハイライトされます。

選択した文字がハイライトされます。

選択した文字がハイライトされます。

選択した文字がハイライトされます。

①の使い方 Dividers

 

wp canvas shortcodes

Dividersは区切り線になります。このような区切り線を表示してくれます。








①の使い方 jQuery

wp canvas shortcodes

ココでは3つの形のタブ形式を表記できます。

アコーディオン

アコーディオンは楽器のアコーディオンのようにクリックすると広がります。

クリックして広げるとみてもらえるようになります。上でクイズを出してクリックすると正解が見えるみたいに、最初は隠しておきたい事なんかを記入すればいいですね。
ハズレです。みたいな

tab

タブは読んで字のごとくタブ表記が出来るようになります↓↓

昨日、道端で100円拾いました。本当は警察に届けないといけないんだけど、夜も遅かったのでセブンイレブンでコーヒーを買いました。
良心の呵責に耐えきれず、本日警察に100円を届けに行きました。

一つのスペースで書きたいことが幾つかある時には便利な機能ですね。

toggle

トグル機能は説明するのが難しいのでクリックしてみて下さい。

はい、分かりました。トグル機能とはこのような機能ですね

まとめ

今回はよく使うであろう機能について記述してきました。が他にもGoogleMapの挿入やボタンの作成など全て書ききれないほど便利な機能があります。 記事作成の際に是非活用して下さい。

チャッキー
本日も最後までお付き合い頂きましてありがとうございました

ブログランキングに参加してます。

にほんブログ村 ブログブログへ

クリックすると現在の順位が表示されます。

About The Author

チャッキーさん
ご訪問ありがとうございます。管理人のチャッキーと申します。
日本語を学ぶ為にブログを始めました。内容は主に旅と読書とWordPressという全く自分の知らない世界についてです。現在、南米をぷらぷら散歩中。時々、出稼ぎのため広島県にいます。

Leave A Reply

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

オススメ記事