WordPressプラグイン

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

更新日:

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

woman-731894_1920 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のショートコードを利用するにはビジュアルモードでボタンをクリックし選択します。(ビジュアルモードでショートコードボタンが表示されます。テキストモードではボタンは表示されません。)

【 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

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

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

PAK145152451_TP_V-1024x682 Shortcodes by Angie Makes:記事を装飾できる

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

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

wordpress-923188_1920-1024x683 Shortcodes by Angie Makes:記事を装飾できる

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

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

woman-731894_1920-1024x678 Shortcodes by Angie Makes:記事を装飾できる

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

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

laptop-2838921_1920-1024x609 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

PAK145152451_TP_V-150x150 Shortcodes by Angie Makes:記事を装飾できる

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

Theme Checkはテーマ…

wordpress-923188_1920-150x150 Shortcodes by Angie Makes:記事を装飾できる

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

WP Multibyte Pa…

woman-731894_1920-150x150 Shortcodes by Angie Makes:記事を装飾できる

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

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

laptop-2838921_1920-150x150 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は人気の記事を…

Simple Post Notes:ダッシュボードにノート機能を追加する

Simple Post Notesはダッシュボードにのノート…

Search Excludeは任意ページを検索結果から除外できる

Search ExcludeはWordPressの検索結果(…

■ 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の有効化ボタンをクリックし必要な設定を行います。

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

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

※関連の記事

o-FASTEST-SLOWEST-INTERNET-SPEEDS-WORLD-CANADA-facebook-150x150 Shortcodes by Angie Makes:記事を装飾できる

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

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

woman-801872_1920-150x150 Shortcodes by Angie Makes:記事を装飾できる

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

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

-WordPressプラグイン
-

Copyright© WordPress テーマとプラグイン , 2019 All Rights Reserved Powered by STINGER.