初心者の方でHTMLがわからないが、WordPressの記事を装飾をしたり、
ボタンを作ったり、見出しを他にも使いたい等、もう少し見栄え良くしたい方におすすめなのが役立つ無料でも十分使えるShortcodes Ultimateプラグインです。
ショートコードは、一行書くだけでいろいろな表現ができます。
例えばよく使っているこのプラグインのショートコードは、「ボタンを作る」ショートコードです。
このようなボタンが簡単につくれます。
Shortcodes Ultimateプラグインは、WordPressでメリハリのあるページを作成するのに便利なプラグインです。
たくさんのデザインがあるため、試しながら記事を書くと時間がかかってしまうため
そこで各ショートコードがどのような効果があるのかひと目で分かるようにデザインの見本を一覧にしてみました。
無料のプラグインですが、有料の追加機能を購入すれば使えるショートコードが増えます。
見本は下記の公式サイトで見ることができます。
getshortcodes.com/docs/?menu#shortcodes
- ▼見出し一覧
- 見出し(H2)
- ▼見出し デフォルト
- ▼見出し MODERN1
- ▼見出し MODERN2
- ▼見出し ライン
- ▼見出し ドットライン
- ▼見出し フラット
- ▼仕切り デフォルト
- ▼仕切り 点線
- ▼仕切り 波線
- ▼仕切り 二重
- ▼ハイライト
- ▼ラベル
- ▼引用
- ▼ボタン
- ▼サービス
- ▼スケジュール
- ▼リスト
- ▼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
- ソーシャルでシェア:
- 関連
▼見出し一覧
見出し(H2)
見出し(H3)
見出し(H4)
見出し(H5)
見出し(H6)
▼見出し デフォルト
デフォルト
▼見出し MODERN1
MODERN1 ダーク
MODERN1 ブルー
MODERN1 バイオレット
MODERN1 オレンジ
▼見出し MODERN2
MODERN2 ダーク
MODERN2 ライト
MODERN2 オレンジ
MODERN2 ブルー
MODERN2 バイオレット
▼見出し ライン
ライン ダーク
ライン ライト
ライン ブルー
ライン バイオレット
ライン オレンジ
▼見出し ドットライン
ドットライン ダーク
ドットライン ライト
ドットライン ブルー
ドットライン オレンジ
ドットライン バイオレット
▼見出し フラット
フラット ライト
フラット ダーク
フラット グリーン
フラット オレンジ
フラット ブルー
フラット ダーク
フラット バイオレット
▼仕切り デフォルト
▼仕切り 点線
▼仕切り 波線
▼仕切り 二重
▼ハイライト
強調表示するテキストの背景色ハイライト カラー#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” を使用した場合引用元
▼ボタン
当サイト制作の都合でリンクのマークが表示されていますが、通常は表記されません。チェックマークは任意で外すことが可能です。
デフォルトデフォルト チェックボタンなし
フラット
ゴースト
ソフト
ガラス
泡
ノイズ
撫でる
3D
▼サービス
サービスタイトル
サービスの説明サービスの説明サービスの説明サービスの説明サービスの説明サービスの説明サービスの説明
▼スケジュール
Sorry, we're offline now. Come back tomorrow.▼リスト
- star
- star
- star
- book
- book
- book
- text
- text
- text
▼Text with icon
[su_icon_text url=”#”]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.[/su_icon_text]▼ボックス
デフォルト
ボックス デフォルト
soft ボックス
ボックス soft
glass ボックスタイトル
ボックス glass
bubbles ボックスタイトル
ボックス bubbles
noise ボックスタイトル
ボックス noise
▼ノート
あああああああああああああああああああああああああああああああああああああああああああ
▼テーブル
テーブル | テーブル |
テーブル | テーブル |
▼フィード RSS
▼料金表
[su_pricing_table] [su_plan name=”” price=”” before=”” after=”” period=”” featured=”no” background=”#f9f9f9″ color=”#333333″ border=”#eeeeee” shadow=”0px 0px 25px #eeeeee” icon=”” icon_color=”#333333″ icon_size=”48″ btn_url=”” btn_target=”self” btn_text=”” btn_background=”#999999″ btn_color=”#ffffff” class=””]- Option 1
- Option 2
- Option 3
- Option 1
- Option 2
- Option 3
- Option 1
- Option 2
- Option 3
[su_pricing_table] [su_plan name=”Starter” price=”Free” period=”30-day trial” btn_url=”#plan-1″ btn_text=”Sign Up”]
- Option 1
- Option 2
- Option 3
- Option 1
- Option 2
- Option 3
- Option 1
- Option 2
- Option 3
▼パララックス
[su_section image=”https://getshortcodes.com/wp-content/uploads/sites/2/2017/08/section-bg.jpg” border=”none” text_align=”center”]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.[/su_section]
▼アイコンパネル
[su_icon_panel url=”#”]Panel content[/su_icon_panel]
[su_icon_panel icon=”icon: star” icon_size=”40″ icon_color=”#31a8e6″]Panel content[/su_icon_panel]
[su_icon_panel icon=”icon: cog” icon_size=”40″ icon_color=”#ff5e3a”]Panel content[/su_icon_panel]
[su_icon_panel icon=”icon: flask” icon_size=”40″ icon_color=”#0fe2b8″]Panel content[/su_icon_panel]
▼Testimonial
[su_testimonial name=”Chad Coogan” photo=”https://getshortcodes.com/wp-content/uploads/sites/2/2017/08/person-3-square.jpg” company=”Intelli Wealth Group” url=”#” border=”yes” target=”self”]The very best. I will refer everyone I know. Shortcodes Ultimate should be nominated for plugin of the year.[/su_testimonial]▼Progress Bar
[su_progress_bar style=”default” text=”WordPress” percent=”60″] [su_progress_bar style=”default” text=”PHP” percent=”75″] [su_progress_bar style=”default” text=”Photoshop” percent=”90″][su_progress_bar style=”fancy” percent=”40″ text=”Photoshop” bar_color=”#ffffff” fill_color=”#f01c3c” text_color=”#000000″] [su_progress_bar style=”fancy” percent=”60″ text=”PHP” bar_color=”#ffffff” fill_color=”#f01c3c” text_color=”#000000″] [su_progress_bar style=”fancy” percent=”80″ text=”WordPress” bar_color=”#ffffff” fill_color=”#f01c3c” text_color=”#000000″]
[su_progress_bar style=”thin” percent=”20″ text=”Photoshop” bar_color=”#FFDD0C” fill_color=”#4AD182″ text_color=”#000000″] [su_progress_bar style=”thin” percent=”40″ text=”PHP” bar_color=”#FFDD0C” fill_color=”#4AD182″ text_color=”#000000″] [su_progress_bar style=”thin” percent=”60″ text=”WordPress” bar_color=”#FFDD0C” fill_color=”#4AD182″ text_color=”#000000″] [su_progress_bar style=”thin” percent=”80″ text=”JavaScript” bar_color=”#FFDD0C” fill_color=”#4AD182″ text_color=”#000000″] [su_progress_bar style=”thin” percent=”100″ text=”HTML5/CSS3″ bar_color=”#FFDD0C” fill_color=”#4AD182″ text_color=”#000000″]
▼Progress Pie
[su_progress_pie percent=”75″ text=”” after=”%” size=”200″ pie_width=”1″ text_size=”40″ align=”center” pie_color=”#f0f0f0″ fill_color=”#F73F43″ text_color=”#cccccc”]
[su_progress_pie percent=”75″ after=”%” size=”180″ align=”center”]
[su_progress_pie percent=”60″ text=”9″ before=”$” size=”180″ pie_width=”5″ text_size=”80″ pie_color=”#e0f3f8″ fill_color=”#e3004e” text_color=”#535353″ align=”center”]
[su_progress_pie percent=”77″ text=”Hi!” size=”180″ pie_width=”35″ text_size=”15″ pie_color=”#f1f1f1″ fill_color=”#0097fc” text_color=”#0097fc” align=”center”]
▼Shadow
[su_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.
▼Regular tabs
Tab nameTab nameTab name
Tab content
Tab content
Tab content
▼Vertical tabs
Tab nameTab nameTab name
Tab content
Tab content
Tab content
▼Member
[su_member text_align=”center” photo=”https://getshortcodes.com/wp-content/uploads/sites/2/2017/08/person-1.jpg” name=”Roland Hall” role=”Personnel manager” icon_1=”icon: facebook” icon_1_url=”#” icon_1_color=”#3B5998″ icon_2=”icon: twitter” icon_2_url=”#” icon_2_color=”#1DA1F2″]Member bio[/su_member]
[su_member text_align=”center” photo=”https://getshortcodes.com/wp-content/uploads/sites/2/2017/08/person-2.jpg” name=”Ramona Fields” role=”Technology officer” icon_1=”icon: facebook” icon_1_url=”#” icon_1_color=”#3B5998″ icon_2=”icon: twitter” icon_2_url=”#” icon_2_color=”#1DA1F2″]Member bio[/su_member]
[su_member text_align=”center” photo=”https://getshortcodes.com/wp-content/uploads/sites/2/2017/08/person-3.jpg” name=”Steven Davenport” role=”Personnel director” icon_1=”icon: facebook” icon_1_url=”#” icon_1_color=”#3B5998″ icon_2=”icon: twitter” icon_2_url=”#” icon_2_color=”#1DA1F2″]Member bio[/su_member]
▼Spoiler
▼スライダー
▼アイコン
[su_icon icon=”icon: star” background=”#eeeeee” color=”#F73F43″ text_color=”#F73F43″ size=”32″ shape_size=”16″ radius=”256″ text_size=”16″ url=”#” target=”self”] This is a custom icon [/su_icon] [su_icon icon=”icon: angle-double-down” background=”#31a8e6″ color=”#ffffff” text_color=”#31a8e6″ shape_size=”4″ radius=”8″ url=”#” target=”self”]Download archive.zip [5Mb][/su_icon] [su_icon icon=”icon: phone” background=”#0fe2b8″ color=”#FFFBB2″ text_color=”#0fe2b8″ size=”20″ shape_size=”10″ radius=”0″ url=”#” target=”self”]Need Support? Call Us![/su_icon]▼Image slider
[su_content_slider effect=”fadeUp” autoplay=”3″ style=”light”] [su_content_slide]


▼Panels slider
[su_content_slider] [su_content_slide] [su_panel]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum[/su_panel] [/su_content_slide] [su_content_slide] [su_panel]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum[/su_panel] [/su_content_slide] [su_content_slide] [su_panel]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum[/su_panel] [/su_content_slide] [/su_content_slider▼Mixed content
[su_content_slider effect=”goDown” autoplay=”0″ style=”dark” pages=”yes”] [su_content_slide] [/su_content_slide] [su_content_slide] Service shortcode
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis. Donec molestie tempor mattis. Sed elementum, est vitae tincidunt faucibus, metus dui lobortis orci, non auctor ipsum elit quis nunc. Integer nec mattis nunc, eu dapibus nisl. Proin in eleifend lorem. Praesent mattis eros in orci aliquet fermentum.
Box shortcode
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis.
▼YouTube video
▼Google map
▼Regular video
▼Playlist
詳しくは下記の公式サイトへ
プロフィール
-
こんにちは、三重県四日市出身です。ネットショップやWordPressなどの制作やコンサルやセミナー講師等で教えています。このブログは最近雑多になってしまったため、備忘録として色々書いています。
■ はっちゃんセミナー
最新記事一覧
新着2025年4月15日Chrome拡張「Momentum」の新機能:音楽の再生やカレンダー連携等
ブログ2025年2月27日リーゼント刑事こと秋山博康さんの行きつけのお店に行ってきました
AIツール2025年1月17日Google Workspace Labの新AI機能を試してみました
新着2024年12月11日天野雅博さんとリーゼント刑事:秋山博康さんのW講演決定!テーマは「生きてこそ命」