WordPressプラグイン

Shortcodes by Angie Makesは記事を装飾できる

投稿日:2017年12月25日 更新日:

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

Shortcodes by Angie Makesは記事を装飾できる

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-サンプル

Shortcodes by Angie Makesは記事を装飾できる

Theme Checkはテーマをチェックする

Theme CheckはテーマをチェックしてくれるWordPressプラグインです。Theme CheckはWordPress.orgに登録を提出するときにチェ…

Shortcodes by Angie Makesは記事を装飾できる

WP Multibyte Patchはマルチバイト文字の修正パッチ

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

Shortcodes by Angie Makesは記事を装飾できる

One-Click Child Themeは子テーマを作成する

One-Click Child Themeは、子テーマを作成してくれるプラグインです。更新は3年ほどされていません。参考までのご紹介になります。One-Click Child Themeご利用時は下記サイトで確認の上ご利用ください。WordPressをカスタマイズするなら子テーマを利用することが推奨されています。

Shortcodes by Angie Makesは記事を装飾できる

Table of Contents Plusは目次を作成してくれる

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

■ Masonry-Borderless

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

Theme Checkはテーマをチェックする

Theme CheckはテーマをチェックしてくれるWordP…

WP Multibyte Patchはマルチバイト文字の修正パッチ

WP Multibyte PatchはWordPressのマ…

One-Click Child Themeは子テーマを作成する

One-Click Child Themeは、子テーマを作成してくれるプラグインです。更新は3年ほどされていません。参考までのご紹介になります。One-Click Child Themeご利用時は下記サイトで確認の上ご利用ください。WordPressをカスタマイズするなら子テーマを利用することが推奨されています。

Table of Contents Plusは目次を作成してくれる

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

■ Grid-Box

Theme Checkはテーマをチェックする

Theme Checkはテーマ…

WP Multibyte Patchはマルチバイト文字の修正パッチ

WP Multibyte Pa…

One-Click Child Themeは子テーマを作成する

One-Click Child Themeは、子テーマを作成してくれるプラグインです。更新は3年ほどされていません。参考までのご紹介になります。One-Click Child Themeご利用時は下記サイトで確認の上ご利用ください。WordPressをカスタマイズするなら子テーマを利用することが推奨されています。

Table of Contents Plusは目次を作成してくれる

Table of Conten…

■ Grid-Borderless

Shortcodes by Angie Makesは記事を装飾できる

Theme Checkはテーマをチェックする

Theme Checkはテーマ…

Shortcodes by Angie Makesは記事を装飾できる

WP Multibyte Patchはマルチバイト文字の修正パッチ

WP Multibyte Pa…

Shortcodes by Angie Makesは記事を装飾できる

One-Click Child Themeは子テーマを作成する

One-Click Child Themeは、子テーマを作成してくれるプラグインです。更新は3年ほどされていません。参考までのご紹介になります。One-Click Child Themeご利用時は下記サイトで確認の上ご利用ください。WordPressをカスタマイズするなら子テーマを利用することが推奨されています。

Shortcodes by Angie Makesは記事を装飾できる

Table of Contents Plusは目次を作成してくれる

Table of Conten…

■ Post-slider1

XML Sitemap & Google News feedsはXMLサイトマップを送信してくれる

XML Sitemap & Google News …

WordPress Popular Postsは人気の記事を表示してくれる

WordPress Popular Postsは人気の記事を…

VK All in one Expansion UnitはLightning以外でも使える

VK All in one Expansion Unitは株…

Ultimate Category Excluderは任意のカテゴリー記事一覧を非表示にしてくれる

Ultimate Category Excluderは任意の…

■ Post-slider2

Theme Checkはテーマをチェックする

Theme CheckはテーマをチェックしてくれるWordP…

WP Multibyte Patchはマルチバイト文字の修正パッチ

WP Multibyte PatchはWordPressのマ…

One-Click Child Themeは子テーマを作成する

One-Click Child Themeは、子テーマを作成してくれるプラグインです。更新は3年ほどされていません。参考までのご紹介になります。One-Click Child Themeご利用時は下記サイトで確認の上ご利用ください。WordPressをカスタマイズするなら子テーマを利用することが推奨されています。

Table of Contents Plusは目次を作成してくれる

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

【 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は記事を装飾できる

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

※関連の記事

Shortcodes by Angie Makesは記事を装飾できる

Shortcodes by Angie Makes Elementsの使い方

Shortcodes by Angie Makesの「Elements」にはButton、Font Awesome Icon、Heading、Highlight、Spacing、Clear Floats、Inline Code、Dividerなどの文章を装…

Shortcodes by Angie Makesは記事を装飾できる

Shortcodes by Angie MakesのColumns(カラム・列)の使い方

Shortcodes by Angie MakesのColumns(カラム・列)を利用すればCSS(スタイルシート)を使わなくてもページを2や3列に分割するレイアウトをデザインすることができます。もちろんレスポンシブ対応ですので、スマートフォンなどの端末で…

Shortcodes by Angie Makesは記事を装飾できる

Shortcodes by Angie Makesで記事に投稿一覧を表示する

Shortcodes by Angie Makesの「Posts」は投稿や固定ページを一覧形式で表示したり、スライダー(ページを左右にスライドさせて表示する)形式で表示させたりすることができるWordPressプラグインです。製品やサービスをわかり易く一覧…

Shortcodes by Angie Makesは記事を装飾できる

Shortcodes by Angie Makesは記事を装飾できる

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

-WordPressプラグイン
-

執筆者:

関連記事

WordPressのプラグインで「抜粋」を編集する

WordPressの「抜粋」には何を書けばいいのでしょう。「抜粋」に書かれた文章はディスクリプションとしてページに反映されます。その為、ディスクリプションは、60文字~120文字前後でわかりやすく記述 …

Shortcodes by Angie Makes Elementsの使い方

Shortcodes by Angie Makesの「Elements」にはButton、Font Awesome Icon、Heading、Highlight、Spacing、Clear Float …

Autoptimizeはスクリプトを集約し高速表示してくれる

「Autoptimize」はWordPressのプログラムソースコードを最適化してページの表示速度を高速化してくれるプラグインです。WordPressはシステム的にページを掃き出すため、プラグインのイ …

Duplicatorはサイトを丸ごとコピーできる

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

Table of Contents Plusは目次を作成してくれる

Table of Contents Plusは投稿や固定ページに「見出しタグ h1 ~ h6」を元に自動で「目次」を作成して表示してくれるWordPressプラグインです。長文が検索エンジンに上位表示 …