プラグイン

Shortcodes by Angie Makes(WordPressプラグイン)は記事を装飾できる

更新日:

「Shortcodes by Angie Makes」は記事のレイアウトや見た目をHTMLやCSSの知識がなくてもショートコードで充実させることができるプラグインです。インストールするとビジュアルモード画面にボタンが表示されます。ボタンをクリックするとColumns,Elements,Content,Posts,Actions,Wrappersから選択し記事を編集することができます。

Shortcodes by Angie Makesの概要

  • プラグイン名称の名称は「Shortcodes by Angie Makes」
  • プラグインのURLはhttps://ja.wordpress.org/plugins/wc-shortcodes/
  • ライセンスは無償
  • 機能は記事のレイアウトや見た目をHTMLやCSSの知識がなくてもショートコードで充実させることができる。
  • インストールは、ダッシュボード → プラグイン → 新規追加 → 検索 → Shortcodes by Angie Makesで検索 → インストール
  • 必須WordPressバージョンは3.7
  • 検証済みバージョンは4.7.7
  • 言語は英語
  • アクティブインストールは40,000+

Shortcodes by Angie Makesに実装されているショートコード

  • Columns(カラム・列)
  • Elements(要素)
  • Content(コンテンツ)
  • Posts(投稿)Posts(投稿)
  • Actions(アクション)
  • Wrappers(ラッパー)

※「Shortcodes by Angie Makes」のショートコードのデモサイトです。

Shortcodes by Angie Makesの使い方

Shortcodes by Angie Makesのショートコードを利用するにはビジュアルモードでボタンをクリックし選択します。(ビジュアルモードでショートコードボタンが表示されます。テキストモードではボタンは表示されません。)

Shortcodes by Angie Makes【 Colum 】の使い方

Shortcodes by Angie Makesの【 Colum 】はページを分割表示するレイアウトができる機能です。WordPressのレスポンシブ対応テーマを利用するとスタイルシートをカスタマイズするのに知識が必要です。文章だけで構成できる記事なら比較的簡単に作りことができますが、企業サイトのように製品やサービスをアピールするにはレイアウトを操作したくなります。ビジュアル編集画面で分割したいレイアウトを選択するだけでショートコードがページに埋め込まれます。分割できるサイズは下記のようになっています。

  • 1/2 + 1/2
  • 1/3 + 1/3 + 1/3
  • 1/3 + 2/3
  • 2/3 + 1/3
  • 1/4 + 1/4 + 1/4 +1/4
  • 1/4 + 1/2 + 1/4
  • 1/2 + 1/4 + 1/4
  • 1/4 + 1/4 + 1/2
  • 1/4 + 3/4
  • 3/4 + 1/4

■ Colum使用例

1/2分割でレイアウトすることができます。

1/2 +1/2
左・上
1/2 +1/2
右・下

モバイル端末では左側が上に、右側が下にレイアウトされます。

■ 1/3 + 1/3 + 1/3 「Columns」ショートコード

3分割レイアウトです。

1/3 + 1/3 + 1/3
1/3 + 1/3 + 1/3
1/3 + 1/3 + 1/3

■ 1/3 + 2/3 「Columns」ショートコード

1/3
2/3

Shortcodes by Angie Makes【 Elements 】の使い方

Shortcodes by Angie Makesの「Elements」にはButton、Font Awesome Icon、Heading、Highlight、Spacing、Clear Floats、Inline Code、Dividerなどの文章を装飾する機能がショートコードで提供されています。HTMLやCSSスタイルシートを理解しなくても装飾をすることが可能になります。

  • Button - リンクボタンを設置できる
  • Font Awesome Icon - アイコンを設置できる
  • Heading - 見出しを設置できる
  • Highlight - ハイライトをつける
  • Spacing - スペースをとるスペース
  • Inline Code
  • Divider - デバイダー(分割線を設置)

「Elements」を編集するにはビジュアル編集モードから [▼] ボタンをクリックして、ドロップダウンメニューより装飾したいショートコードを選択します。

Shortcodes by Angie Makes【 Button 】の使い方

「Button」はリンクボタンを設置することができます。「Button Type」ではリンクボタンの外観を設定します。

「Button」
  • Primary
  • Secondary
  • Inverse
  • Saccess
  • Warning
  • Danger
  • Info

その他に、リンク先のURL、アンカーテキスト、別窓で開く、nofflow、配置位置などボタンに関する設定ができます。

【 Font Awesome Icon 】
「Font Awesome Icon」は文字列にアイコンをつけることができます。Iconをクリックすると用意されているアイコンから選択できるようになっています。

表示例) アイコン

「Heading」


「Heading」は見出しを設置できます。通常見出しはテーマによってスタイルシートで装飾されていますが、手軽にアイコンをつけたりすることは難しくなっています。また、見出しの上下の余白、文字寄、文字の大きさ、文字色、アイコンを付けるなど指定ができるので表現力が増します。

【 Highlight 】
「Highlight」はショートコードで囲まれた文字をハイライトしてくれ注意を引き付けることができます。

【 Spacing 】


「Spacing」は余白をとることができます。見出しとこの文の間に40pxの余白を入れています。

【 Content 】
「Content」には価格表を設置、ソーシャルボタンを設置、シャエアボタン、吹き出しを埋め込んだりとコンテンツを装飾するためのショートコードが揃っています。

  • Pricing Table - 価格表を設置する
  • Social Icon - ソーシャルボタンを設置する
  • Share Buttons - シェア(共有ボタン)を設定する
  • Testimonial - 吹き出しを埋め込む
  • Countdown - カウントダウンを設置する
  • Skillbar - スキルバーを埋め込む
  • 画像 - 画像を埋め込む
  • Call to Action - 資料請求などの行動を促すコンテンツを追加する
  • Image links - 画像リンク(一度に複数)埋め込むことができる
  • Box - ブロックを線で囲むことができる
  • HTML - カスタムHTMLを埋め込める
  • Preformatted Text - 書式設定済みのテキストを配置

【 Pricing Table 】
「Pricing Table」は価格表を設置し、問い合わせ、申し込み、予約などのコンタクトフォームにユーザーを誘導することができます。

※Pricing Tableのサンプル

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

【 Social Icon 】
「Social Icon」はページにソーシャボタンを埋め込むことができます。ソーシャルボタンを埋め込むことができるプラグインもありますが、サイト全対に必要がない場合等、ページ単位で埋め込みが可能です。

※ソーシャルボタンのサンプル

➡ Share Buttons
「Share Buttons」シェア(共有ボタン)を埋め込みます。

※シェアボタンのサンプル

➡ Testimonial
「Testimonial」は吹き出しを埋め込むことができます。

※Testimonialのサンプル

Sample Content
Author

➡ Countdown
「Countdown」はカウントダウンをページに埋め込めます。

※カウントダウンのサンプル

【 Skillbar 】
「Skillbar」はページにスキルバーを埋め込むことができます。

※Skillbarのサンプル

Sample Content
100%

【 画像 】
画像はメディアの追加でも埋め込むことができるのですが、こちらは画像の上にラベルを表示させることができます。サンプルでは「For Sale」を表示しています。画像を編集したものではなく、文字を重ねてくれるのです。

※画像のサンプル

【 Posts 】
ショートコードを埋め込んだページにカテゴリーやタグ、個別指定(ID)で投稿を一覧表示してくれます。アイキャッチ画像やページタイトル、詳細文章を同時に表示できるのでナビゲーションページを効率良く作成することが可能になります。

  • Masonry-Box → タイル・フチあり
  • Masonry-Borderless → タイル・フチなし
  • Grid-Box → グリッド・フチあり
  • Grid-Borderless → グリッド・フチなし
  • Post Slider 1 → スライダー
  • Post Slider 2 → スライダー
  • Collage → コラージュ

【 Masonry-Box 】
Masonry-Boxは投稿ごとに枠線で囲って並べて表示できます。並べるBox数は指定でき、1ボックスだけ表示することもできたりします。以下のサンプルではアイキャッチ画像をサムネイル表示、ページタイトルを見出しタグを使って抜粋を表示しています。モバイル端末などの表示領域が狭い場合は左から順番に下へと表示されるようになっています。

■ Masonry-Box-サンプル

WP Multibyte Patchはマルチバイト文字の修正をする

WP Multibyte PatchはWordPressのマルチバイト文字の不具合の修正を行うプラグインです。WP Multibyte PatchはWordPr…

Table of Contents Plus(WordPressプラグイン)は目次を作成してくれる

Table of Contents Plusは投稿や固定ページに「見出しタグ h1 ~ h6」を元に自動で「目次」を作成して表示してくれるWordPressプラ…

Duplicator(WordPressプラグイン)はサイトを丸ごとコピーできる

Duplicatorは、WordPressのサイトを丸ごとコピーできるプラグインです。サイトを移行する場合などに、Duplicatorは、移行先のデータベースだけを用意すれば、新しいサーバは空でOK

Shortcodes by Angie Makes(WordPressプラグイン)は記事を装飾できる

「Shortcodes by Angie Makes」は記事のレイアウトや見た目をHTMLやCSSの知識がなくてもショートコードで充実させることができるプラグイ…

■ Masonry-Borderless

Masonry-Borderlessは枠線を表示しないもので、他はMasonry-Boxと同様の機能を持っています。

WP Multibyte Patchはマルチバイト文字の修正をする

WP Multibyte PatchはWordPressのマ…

Table of Contents Plus(WordPressプラグイン)は目次を作成してくれる

Table of Contents Plusは投稿や固定ペー…

Duplicator(WordPressプラグイン)はサイトを丸ごとコピーできる

Duplicatorは、WordPressのサイトを丸ごとコピーできるプラグインです。サイトを移行する場合などに、Duplicatorは、移行先のデータベースだけを用意すれば、新しいサーバは空でOK

Shortcodes by Angie Makes(WordPressプラグイン)は記事を装飾できる

「Shortcodes by Angie Makes」は記事…

■ Grid-Box

WP Multibyte Patchはマルチバイト文字の修正をする

WP Multibyte Pa…

Table of Contents Plus(WordPressプラグイン)は目次を作成してくれる

Table of Conten…

Duplicator(WordPressプラグイン)はサイトを丸ごとコピーできる

Duplicatorは、WordPressのサイトを丸ごとコピーできるプラグインです。サイトを移行する場合などに、Duplicatorは、移行先のデータベースだけを用意すれば、新しいサーバは空でOK

Shortcodes by Angie Makes(WordPressプラグイン)は記事を装飾できる

「Shortcodes by …

■ Grid-Borderless

WP Multibyte Patchはマルチバイト文字の修正をする

WP Multibyte Pa…

Table of Contents Plus(WordPressプラグイン)は目次を作成してくれる

Table of Conten…

Duplicator(WordPressプラグイン)はサイトを丸ごとコピーできる

Duplicatorは、WordPressのサイトを丸ごとコピーできるプラグインです。サイトを移行する場合などに、Duplicatorは、移行先のデータベースだけを用意すれば、新しいサーバは空でOK

Shortcodes by Angie Makes(WordPressプラグイン)は記事を装飾できる

「Shortcodes by …

■ Post-slider1

Zen Menu Logic(WordPressプラグイン)でヘッダーやフッターメニューを切り替える

Zen Menu Logic Zen Menu Logicは…

XML Sitemap & Google News feeds(WordPressプラグイン)はXMLサイトマップを送信してくれる

XML Sitemap & Google News …

WP-Optimize - Clean, Compress, Cache(WordPressプラグイン)はデータベースをクリーンアップ

WP-Optimizeは、データベースをクリーンアップし、画…

Wp-Insert(WordPressプラグイン)は記事に広告コードを挿入できる

Wp-Insertは、記事に広告コードを挿入できるWordP…

■ Post-slider2

WP Multibyte Patchはマルチバイト文字の修正をする

WP Multibyte PatchはWordPressのマ…

Table of Contents Plus(WordPressプラグイン)は目次を作成してくれる

Table of Contents Plusは投稿や固定ペー…

Duplicator(WordPressプラグイン)はサイトを丸ごとコピーできる

Duplicatorは、WordPressのサイトを丸ごとコピーできるプラグインです。サイトを移行する場合などに、Duplicatorは、移行先のデータベースだけを用意すれば、新しいサーバは空でOK

Shortcodes by Angie Makes(WordPressプラグイン)は記事を装飾できる

「Shortcodes by Angie Makes」は記事…

【 Action 】

  • Accordion
  • Accordion Section
  • Tabs
  • Tabs Section
  • Toggle
  • Google Map
  • RSVP

「Actions」を使って表示させることができるのは、「Accordion」、「Tabs」、「Toggle」、「GoogleMap」、「RSVP」となっています。(以下の表示サンプルを参照してください)

Sample Content 1
Sample Content 2
Sample Content
Sample Content 1
Sample Content 2
Sample Content
Sample Content

Google requires an API key to embed Google Maps. Enter your key in your Shortcodes option page under the "Maps" tab.

Your Name

Number of Guests

You Will Attend...

Hello

  • Center Content
  • Full Width

Shortcodes by Angie Makesのインストール

Contact Form 7をインストールするにはダッシュボードからプラグイン → 新規追加 → Contact Form 7で検索 → インストールボタンをクリック → Shortcodes by Angie Makesの有効化ボタンをクリックし必要な設定を行います。

ご利用の環境によってはShortcodes by Angie Makesをインストールできないことやエラーになることもあります。エラーの対処方法はこちらをお読みください

-プラグイン

Copyright© エス・ティ・セブン有限会社 , 2019 All Rights Reserved Powered by STINGER.