見出し＆ショートコードプラグインShortcodes Ultimateのデザイン見本一覧

初心者の方でHTMLがわからないが、WordPressの記事を装飾をしたり、

ボタンを作ったり、見出しを他にも使いたい等、もう少し見栄え良くしたい方におすすめなのが役立つ無料でも十分使えるShortcodes Ultimateプラグインです。

ショートコードは、一行書くだけでいろいろな表現ができます。

例えばよく使っているこのプラグインのショートコードは、「ボタンを作る」ショートコードです。

ボタンの見本　

このようなボタンが簡単につくれます。

Shortcodes Ultimateプラグインは、WordPressでメリハリのあるページを作成するのに便利なプラグインです。

たくさんのデザインがあるため、試しながら記事を書くと時間がかかってしまうため

そこで各ショートコードがどのような効果があるのかひと目で分かるようにデザインの見本を一覧にしてみました。

無料のプラグインですが、有料の追加機能を購入すれば使えるショートコードが増えます。

見本は下記の公式サイトで見ることができます。

getshortcodes.com/docs/?menu#shortcodes

見本は下記の公式サイトで見ることができます。

▼見出し一覧
見出し（H2）
1. 見出し（H3）
  1. 見出し（H4）
    1. 見出し（H5）
▼見出し　デフォルト
▼見出し　MODERN１
▼見出し　MODERN２
▼見出し　ライン
▼見出し　ドットライン
▼見出し　フラット
▼仕切り　デフォルト
▼仕切り　点線
▼仕切り　波線
▼仕切り　二重
▼ハイライト
▼ラベル
▼引用
▼ボタン
▼サービス
▼スケジュール
▼リスト
▼Text with icon
▼ボックス
▼ノート
▼テーブル
▼フィード　RSS
▼料金表
▼パララックス
▼アイコンパネル
▼Testimonial
▼Progress Bar
▼Progress Pie
▼Shadow
▼Regular tabs
▼Vertical tabs
▼Member
▼Spoiler
▼スライダー
▼アイコン
▼Image slider
▼Panels slider
▼Mixed content
▼YouTube video
▼Google map
▼Regular video
▼Playlist
1. ソーシャルでシェア:
2. 関連

▼見出し一覧

見出し（H2）

見出し（H3）

見出し（H4）

見出し（H5）

見出し（H6）

▼見出し　デフォルト

デフォルト

▼見出し　MODERN１

MODERN１　ダーク

MODERN１　ブルー

MODERN１　バイオレット

MODERN１　オレンジ

▼見出し　MODERN２

MODERN２　ダーク

MODERN２　ライト

MODERN２　オレンジ

MODERN２　ブルー

MODERN２　バイオレット

▼見出し　ライン

ライン　ダーク

ライン　ライト

ライン　ブルー

ライン　バイオレット

ライン　オレンジ

▼見出し　ドットライン

ドットライン　ダーク

ドットライン　ライト

ドットライン　ブルー

ドットライン　オレンジ

ドットライン　バイオレット

▼見出し　フラット

フラット　ライト

フラット　ダーク

フラット　グリーン

フラット　オレンジ

フラット　ブルー

フラット　ダーク

フラット　バイオレット

▼仕切り　デフォルト

ページのトップへ

▼仕切り　点線

ページのトップへ

▼仕切り　波線

ページのトップへ

▼仕切り　二重

ページのトップへ

▼ハイライト

強調表示するテキストの背景色ハイライト　カラー#DDFF99

強調表示するテキストの背景色ハイライト　カラー#99f2ff

▼ラベル

ラベル　デフォルトラベル　成功ラベル　警告ラベル　重要ラベル　黒ラベル　情報

▼引用

当サイト制作の都合でリンクのマークが表示されていますが、通常は表記されません。

標準されている”引用”を使うとこのように表示されます

ショートコードを使うと・・・

デフォルト　を使用した場合引用元

”carbon”を使用した場合引用元

”sharp”を使用した場合引用元

”grid”を使用した場合引用元

”wood”を使用した場合引用元

”fabric”を使用した場合引用元

”modern-dark”を使用した場合引用元

”modern-light”を使用した場合引用元

“modern-blue” を使用した場合引用元

“modern-orange” を使用した場合引用元

“modern-violet” を使用した場合引用元

“flat-dark” を使用した場合引用元

“flat-light” を使用した場合引用元

“flat-blue” を使用した場合引用元

“flat-green” を使用した場合引用元

▼ボタン

当サイト制作の都合でリンクのマークが表示されていますが、通常は表記されません。チェックマークは任意で外すことが可能です。

泡

３D

▼サービス

サービスタイトル

サービスの説明サービスの説明サービスの説明サービスの説明サービスの説明サービスの説明サービスの説明

▼スケジュール

Sorry, we're offline now. Come back tomorrow.

▼リスト

star
star
star

book
book
book

text
text
text

▼Text with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius nibh leo, sit amet mollis sem gravida vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

▼ボックス

デフォルト

ボックス　デフォルト

soft　ボックス

ボックス　soft

glass　ボックスタイトル

ボックス　glass

bubbles　ボックスタイトル

ボックス　bubbles

noise　ボックスタイトル

ボックス　noise

▼ノート

あああああああああああああああああああああああああああああああああああああああああああ

▼テーブル

テーブル	テーブル
テーブル	テーブル

▼フィード　RSS

▼料金表

Option 1
Option 2
Option 3

Option 1
Option 2
Option 3

Option 1
Option 2
Option 3

Starter

Free

30-day trial

Option 1
Option 2
Option 3

Business

$10

per month

Option 1
Option 2
Option 3

Professional

$29

per month

Option 1
Option 2
Option 3

▼パララックス

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt elit et eros commodo, laoreet iaculis risus lobortis. Ut eget cursus nisi. Maecenas egestas, nunc gravida rutrum porttitor, ante ligula luctus erat, non vehicula massa mauris et ante. Mauris a vulputate sapien. Aenean sagittis tellus vitae mi viverra, sed venenatis nibh fringilla. Suspendisse vel suscipit elit, vel ultricies sem. Suspendisse elementum risus ut efficitur feugiat.

▼アイコンパネル

Panel content

▼Testimonial

The very best. I will refer everyone I know. Shortcodes Ultimate should be nominated for plugin of the year.

Chad Coogan, Intelli Wealth Group

▼Progress Bar

WordPress

PHP

Photoshop

PHP

WordPress

Photoshop

PHP

WordPress

JavaScript

HTML5/CSS3

▼Progress Pie

75%

Hi!

▼Shadow

これはボックスのタイトルです。

Integer cursus orci bibendum sem mollis, et bibendum diam sodales. Pellentesque eu suscipit magna, sed faucibus sem. Maecenas lacinia nulla vel risus molestie, in bibendum turpis congue.

Panel content