Grazioso:使い方ガイド

WP Smart Shortcode 使い方

プラグインPosted 2014.10.06

「WP Smart Shortcode」はGraziosoのウィジェット機能の中でも使用できる、便利なショートコード設置用の弊社オリジナルのプラグインです。

Black Studio TinyMCE WidgetプラグインのビジュアルエディタウィジェットとPageBuilderプラグインを組み合わせることで、様々なショートコードを活用した自由度の高いデザインのページを構築可能です。

このプラグインは本来、単体で使用できるプラグインとして開発したものですが、Graziosoの機能に合わせた特別バージョンとして推奨プラグインに組み込んであるため、FTPソフトなどを使ってプラグイン単体でダウンロードして他のテーマで使用することはできませんのでご注意ください。

なお、基本的にウィジェットの中にビジュアルエディタウィジェットを入れ込んだ状態での使用を前提にしているため、ここではその状態での使用法をメインに説明していますのでご了承ください。

まず最初に、「WP Smart Shortcode」をインストールして有効化した場合、「テーマオプション」の「一般設定」から「Smart Shortcodeプラグインを有効化している」という項目にチェックを必ず入れるようにしてください。(必須項目です) 参考:テーマオプション:その他の設定

 

「WP Smart Shortcode」でできること

「WP Smart Shortcode」プラグインは、19種類のショートコードを使って様々な表示効果を簡単に使いこなすことができる機能が備わっています。

 


ヘッドライン

ヘッドライン

 

背景色は6色から選択可能で文字の大きさも指定できます。 文字色を変更する場合は、入力した文字をビジュアルエディタで編集することができます。

 


説明ボックス

サービス名

ここには商品やサービスなどの説明やアピールポイントを記載します。ここには商品やサービスなどの説明やアピールポイントを記載します。ここには商品やサービスなどの説明やアピールポイントを記載します。ここには商品やサービスなどの説明やアピールポイントを記載します。

商品画像を左に配した商品やサービスの紹介を手軽に記事中に挿入することができます。 画像は自動で適正なサイズに調整されます。

 


 Divider

記事中や記事下などに横線を追加することができます。 またトップに戻るリンクを任意で表示させることも可能です。

 


 Pullquote

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

Pull Quoteとは「抜粋見出し」と呼ばれるもののことです。記事の一部を抜き出して見出しのように配置されたテキストを挿入することが可能です。

 


 ラベル

インフォ

デフォルトでショートコードを設置した場合のラベル表示です。ショートコード設置後に改行を入れてテキストを記載しています。

 

注意事項こちらはショートコードをPタグの中で使用した場合のラベル表示となります。ショートコード設置直後からテキストを記載しています。

上記のように、記事の内容に応じたラベルを文頭に貼付することができます。

 


 ノート

テキストテキストテキストテキストテキストテキストテキストテキスト

 

記事の補足や追記をするときに便利な機能です。 背景色はお好みで選択できます。

 


 Youtube

Youtube動画のURLを入力するだけで、記事中に動画を挿入することができます。幅と高さを指定できます。

※…この機能で幅と高さを指定したYoutube動画は、レスポンシブ表示には対応しません。

 


 見出し

見出し1

 

見出し2

 

見出し3

 

見出し4

このようにデザインされた見出しを追加することができます。テキストは左寄せ・右寄せ・中央寄せ表示を選択できます。

 


カラーボックス

カラーボックスサンプル

カラーボックスの表示例です。 背景色をお好みで選ぶことができます。


 


 Spacer

このショートコードは、行間にスペースを空けたい場合に使用します。 ピクセル単位で設定することができます。

 


ボックスコメント

コメントした人の名前など

お客様の声や推薦文などのコメントを記事に追加したい場合などに便利です。4種類のスタイルが選べます。

 


 ファンシーリンク

サンプル:ヤフー

テキストリンクの文字色を変えたり、装飾を施すことができます。

 


メッセージ

Info

Success

Warning

エラー

メッセージの内容に合わせて、4つのスタイルから選択できます。

 


 Tweets

Twitterのアカウント名を入力するだけで、タイムラインを表示できます。表示する件数も指定できます。

 


画像&背景枠

画像に枠をつけて表示することができます。 3種類のスタイルが選択できます。

 


ボタン

様々な色や形、アイコン、そして大きさを指定したボタンを追加できます。

なお、リンク先として挿入するURLの文字列によっては、ボタンテキストの色がグリーンになる場合があります。
※この不具合は、Graziosoバージョン2.1へのアップデートと共に解消されました。(旧バージョンをお使いの方はインストールし直してください)

その場合はボタンの文字色はビジュアルエディタ上で変更可能です。

 

ショートコードのボタンテキストの部分を右クリックで選択、反転させます。

bandicam 2015-09-28 09-51-51-345

 

次にエディタのツールバー下段にある「テキスト色」アイコンをクリックして、カラーピッカーで色を選択します。(この場合白を選択しました)

bandicam 2015-09-28 09-52-36-987

 

ボタンに反映されました。

bandicam 2015-09-28 09-53-45-198

 


 引用

引用文を記入します。引用文を記入します。

他の文献や記事などからの文章を引用する際に使用します。

 


ハイライト

テキストテキスト

文字列にハイライト効果を付加することができます。背景色と文字色はお好みの色を使用できます。

 


 

Column(カラム)

2カラムのサンプル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

2カラムのサンプル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

 

3カラムのサンプル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

3カラムのサンプル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

3カラムのサンプル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

記事のレイアウトを様々なカラム数から選択し、お好みの配置を設定することができます。


 

このように様々な機能を備えていますが、使い方は簡単です。 以下に「見出し」を例にした使い方を解説していますので参考にしてください。

 


 

新規に記事を投稿するために管理画面の「投稿」から「新規追加」をクリックし、記事投稿の画面を開きます。

 

bandicam 2014-10-04 22-37-18-383

PageBuilderプラグインを有効化していると追加される、Pagebuilderタブをクリックします。

 

bandicam 2014-10-04 22-38-03-503

デフォルトでは、1カラムの行が設置された状態で開きます。 ここではこのまま左上のプラス記号のボタンをクリックしてウィジェットを組み込みます。 PageBuilderの詳しい使い方については、コチラを参照してください。

 

bandicam 2014-10-04 22-38-35-453

Visual Editor(ビジュアルエディター)を選択します。

 

bandicam 2014-10-04 22-40-12-463

通常の記事投稿と同じように、コンテンツの投稿や編集を行うことができます。 任意の位置にカーソルを置き、次に上部にあるショートコードを挿入するためのボタンをクリックします。

 

bandicam 2014-10-04 22-40-42-720

このようなポップアップ画面が開くので、上部にあるボタンをクリックして、使いたいショートコードの種類を選択します。

 

bandicam 2014-10-04 22-46-35-339

このように、様々な種類のショートコードが用意されています。 今回は「見出し」を選択します。

 

bandicam 2014-10-05 16-59-34-382「見出し」用の設定画面がポップアップで開くので、上の画像を参考にしてそれぞれの項目を設定してください。 ほぼ日本語のインターフェースなので、迷うことはないと思います。
設定が終わったら、最後に「Insert」をクリックします。

 

bandicam 2014-10-04 22-48-48-439

すると、見出しを表示させるためのショートコードが自動的に挿入されます。 前後しますが、ショートコードを挿入する場合は、必ずエディタをビジュアルモードにしておいてください。
編集が終わったら、右下の「Done」をクリックして保存します。

 

bandicam 2014-10-04 22-49-20-735

ブラウザで見え方を確認してみましょう。 上の例では、Style1、タグはh3、文字の配置は中を選択しています。 お好みに合わせて、様々な機能をご活用ください!

PAGE TOP