Shortcodes Ultimateの多彩な機能の使い方29選【WordPressプラグイン】 | 【暮らしの音】kurashi-*note

当ブログは広告を掲載しています

Shortcodes Ultimateの多彩な機能の使い方29選【WordPressプラグイン】

シェアボタンを押して情報を共有しましょう。

Sponsored Link
PC

当ブログは、ワードプレスで無料テーマを利用しています。さまざまなプラグインを導入することによってブログがどんどんカスタマイズされていきます。

その中でも、大いに役に立っている「Shortcodes Ultimate(ショートコード オレティメット)」。

和訳すると、究極のショートコード。

名前の通り、この機能が半端ない。あまりにも多すぎてどう使っていいかわからないほど…。

具体的にどんなことができるのか見てみましょう。

長旅になります。一緒にお供願います( *´艸`)

Sponsored Link
Sponsored Link

Shortcodes Ultimateの使い方

インストール方法

プラグイン新規追加

ワードプレスの管理画面、プラグイン⇒新規追加で、

「Shortcodes Ultimate」を検索しましょう。

インストール

キーワードに「Shortcodes Ultimate」と打ち込むと、表示されます。

「今すぐインストール」をクリック。

有効化

「有効化」されると、メニューに「ショートコード」が追加されます。

ビジュアル画面

投稿画面(ビジュアル)

ショートコードが追加されています。

テキスト画面

投稿画面(テキスト)

どちらからでも使用できます。「ショートコードを挿入」をクリックします。

Shortcodes Ultimateメニュー画面

メニューが開きます。実に50種類以上。

ただし、全部が利用できるわけではありません。サービスが終了して使えないもの、高度な設定が必要なため、普通に使わなかったりするものもあります。

通常使えそうなものだけピックアップして紹介します。(といっても29個あるので、かなり長いお付き合いになりそうです。最後までよろしくお願いします。)

見出し

見出しテキスト

ショートコード画面見出し

スタイル:デフォルト

サイズ:13

整列:中央

マージン:20

サイズを20にしてみて、「ライブプレビュー」をクリックすると…

プレビュー画面

プレビューが下に表示されるので、これを見ながら自分が好きなようにカスタマイズしていきます。

見出しのタイトルは、コンテンツ内に入力します。

自分のスタイルが決まったら、「ショートコードを挿入」ボタンをクリックして決定。

ワードプレスビジュアル画面には、

ビジュアル画面

このように表示されているので、見出しのタイトルを変更したいときは、ピンクの下線部分を書き換えるだけでOK。

タブ

タブ名タブ名タブ名
タブコンテンツ
タブコンテンツ
タブコンテンツ

スタイル:デフォルト

有効なタブ:1

垂直:いいえ

例えば…

【WordPressについて】

メリットデメリット
・自分の資産になる

・自分の好きなようにカスタマイズできる

・最初の設定が大変

・費用がかかる

このような使い方ができます。

スポイラー

ここをクリックしてみてね!
表示されます。

スタイル:デフォルト

アイコン:プラス

ここをクリックしてみてね!
表示されます。

スタイル:ファンシー

アイコン:矢印

ここをクリックしてみてね!
表示されます。

スタイル:シンプル

アイコン:シェブロン

※スタイル:シンプルの場合、アイコンが表示されない

ここをクリックしてみてね!
表示されます。

スタイル:デフォルト

アイコン:シェブロン

ここをクリックしてみてね!
表示されます。

スタイル:デフォルト

アイコン:正方形のカーソル

アイコンの種類

デフォルトで見てみましょう。

プラス
開くよ
プラスサークル
開くよ
プラスサークル1
開くよ
プラスサークル2
開くよ
矢印
開くよ
矢印円1
開くよ
矢印円2
開くよ
シェブロン
開くよ
シェブロンサークル
開くよ
カーソル
開くよ
正方形のカーソル
開くよ
フォルダ1
開くよ
フォルダ2
開くよ

お好みのアイコンを使ってみてください。実に13種類。なぜか、プラスサークル2のアイコンが表示されない…。これは無視。

アコーディオン

スポイラーのタイトル
非表示のコンテンツ
スポイラーのタイトル
非表示のコンテンツ
スポイラーのタイトル
非表示のコンテンツ

アコーディオンの場合、1つのタブを開くと、他のタブは閉じてしまいます。

先ほどのスポイラーの場合、1つのスポイラーを開いて、別のスポイラーを開いても全部表示されたままです。

どちらがいいのか、好みの問題?

仕切り

ページのトップへをクリックしてみて!

お帰りなさい。

ごめんなさいね。ページのトップまで飛ばしてしまいましたね。

ページのトップに飛ばしてくれるショートコードでした。

仕切りメニュー画面

スタイル:デフォルト

点線

スタイル:点線

破線

スタイル:破線

二重

スタイル:二重

ハイライト

 強調表示するテキストの背景色 

マーカーを引いてくれるショートコード。

ラベル

ラベルが作れるショートコード。

ラベル

タイプ:デフォルト

成功 警告 重要 情報

ラベルタイプ

デフォルトはグレー、成功は緑、警告はオレンジ、重要が濃いピンク、黒、情報が青色になります。

コンテンツ内に好きな文言を書いて使います。

引用

【暮らしの音】は、そんな暮らしの中で奏でる音と、暮らしに便利な備忘録kurashi-*note (暮らしノート)をかけて、つけたネーミングです。 私の便利であるとともに、皆さまの便利にもなれますように願いをこめて。【暮らしの音】kurashi-*noteプロフィール

引用画面

手前味噌ですみません。このブログのプロフィールを引用例としました。笑

Dropcap

1

スタイル:デフォルト、サイズ:3

1

スタイル:デフォルト、サイズ:5

1

スタイル:フラット、サイズ:4

1

スタイル:シンプル、サイズ:3

当ブログ、ハンドメイド記事やレシピ記事でよく使うのが

1

スタイル:ライト、サイズ:2

強調し過ぎず、シンプルなところが気に入っています。

dropcap

フレーム

だんだん、疲れてきましたね。

ここでブレイクタイム。

休憩はできましたか?

オケー、続きをやりましょう。

この画像にフレームをつけます。

整列:左

中央と左に配置することもできます。

注意パソコンでは左側に画像、右側に文字が配置されますが、スマホ・iPhoneからは画像が画面いっぱいに表示され文字はその下に表示されます。見え方が違うので使うときは、スマホからも確認しましょう。

カラム

列のコンテンツ/これはカラムです/これはカラムです/これはカラムです/これはカラムです/これはカラムです/これはカラムですこれはカラムです/これはカラムです
列のコンテンツ/これはカラムです/これはカラムです/これはカラムです/これはカラムです/これはカラムです/これはカラムです/これはカラムです/これはカラムです

記事を1/2や1/3などに分けて書くことができます。

クマ

列のコンテンツ/これはクマです/これはクマです/これはクマです/これはクマです/これはクマです/これはクマです/これはクマです/これはクマです/これはクマです/これはクマです/これはクマです/これはクマです/

画像を入れることもできます。

注意こちらもフレーム同様、パソコンとスマホ・iPhoneでは見え方が違います。スマホ・iPhoneには対応していないので注意しましょう。

リスト

  • 並び項目
  • 並び項目
  • 並び項目

アイコンピッカーの種類が豊富。テーマに合わせてアイコンを選びましょう。

icon

私、rouganなので、いつもアイコン探すのに苦労しています。これで見やすくなりました。(ほぼ自分用)

ボタン

ボタンをクリックしてみて!
【暮らしの音】kurashi-*note

このブログのホームに飛びます♪

公式サイトはこちら

リンク:URLを入力

ターゲット:Open in same tab/Open in new tab…new tabを選択

スタイル:ソフト

背景:#d77cb6

テキストの色:#fefefe

サイズ:7

半径:自動

アイコン:icon: play

アイコンの色:#fefefe

テキストの影:水平オフセット1:垂直オフセット1:ぼかし1

公式サイトはこちら

スタイル:デフォルト

公式サイトはこちら

スタイル:フラット

公式サイトはこちら

スタイル:ゴースト

公式サイトはこちら

スタイル:ソフト

公式サイトはこちら

スタイル:ガラス

公式サイトはこちら

スタイル:泡

公式サイトはこちら

スタイル:ノイズ

公式サイトはこちら

スタイル:撫でる

公式サイトはこちら

スタイル:3D

ここをクリック

半径:自動

ここをクリック

半径:ラウンド

ここをクリック

半径:正方形

ここをクリック

半径:5px

ここをクリック

半径:10px

ここをクリック

半径:20px

チェック

サイズ:1

チェック

サイズ:5

チェック

サイズ:10

チェック

サイズ:15

チェック

サイズ:20

Click!!

テキストの影:水平オフセット20:垂直オフセット10:ぼかし5

組み合わせれば無限大に好きなようにボタンを作ることができます。

サービス

動画をアップしました
作り方の手順をチェックしてみてください

Pinterest
素敵だったので思わずpinした画像

Instagram
インスタグラムから●●のご紹介です。

Instagram
気になるインスタをpinしました。

Twitter
ツィートを見てみよう

●●のコツ・ポイント

注意すること

縫ったところ

参考にした書籍はこちら

もう少し詳しく

気になる口コミ

ワンポイントアドバイス

recipe

…とまぁ、アイコンピッカーの種類が豊富なので、つい作ってしまい、ブログ記事に活用しております。

例えば…

詳しくはこちらの記事で
こちらの記事を参考にして下さい。

このショートコードは、

ビジュアル画面でみると、

サービス

このように表示されています。

ピンクの下線の上の文字を内容に合わせて書きかえます。

私はメモ帳にコピペしておき、そのメモ帳を開いたままブログを書き、コピーして使っています。こうすればいちいち設定し直さなくてもいいし、毎回同じものを使えるので統一感も出てきます。

記事によって、サイズがまちまちだったりするのが単にいやなので…。ちょっとしたこだわりかな…笑

ボックス

☑Check!!
・リンクを挿入 ・リンクを挿入 ・リンクを挿入

最近、これを作り記事の最後に関連エントリーとして紹介しています。

記事を読んでもらったあと、関連する内容の記事も読んでいただきたいので、さりげなくURLを貼りつけました。

具体的には、

・リンクを挿入のところに、「リンク挿入/編集」からURLを貼りつけて改行するだけ。

こんな風に関連記事を一番下に置くと、いろんな記事を閲覧してもらえますね。過去記事もリライトしなきゃ。

ついでに上記の記事、閲覧どうぞ( *´艸`)( *´艸`)( *´艸`)

ノート

ノートテキスト

コンテンツを囲って表示できるショートコード。

背景色とテキストの色を好きなようにカスタマイズして、強調する箇所をノートで書いてもいいですね。

拡大

デフォルトではこのようになっています。

下線はこれ。

ボタンはこれ。

コンテンツのテキストブロックを拡大するショートコードのようです。いまいちよくわかりません。

Lightbox

ボタンをクリックすると動画を再生したり画像を表示させたりできるショートコード。

ソースを指定して作ります。

ツールチップ

Hover me to open tooltip

マウスを文字の上におく(スマホでは文字を軽くタップする)と、補足説明などが表示されます。エクセルでいうところの、コメント機能と同じ感覚。

Youtube

Youtubeをブログに埋め込むときは、

共有⇒<>埋め込む⇒埋め込みコードをコピーして、テキスト画面に貼り付けます。

こんな感じですね。

テキスト画面での書き込みはこうなります。

youtubeテキスト

しかし、「Shortcodes Ultimate」では、「ショートコードを挿入」⇒「Youtube」

youtubeショートコード

動画のURLを貼りつけるだけでOKなので簡単!

オーディオ

注意!再生をクリックすると音が流れます。

オーディオファイルをワードプレスのメディアライブラリにあらかじめ追加しておきます。

ショートコードを挿入⇒オーディオ⇒メディアマネージャーから、ファイルを選択し、ショートコードを挿入。

テーブル

→→→→

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

CSVファイルをメディアライブラリに追加しておきます。

ショートコードを挿入⇒テーブル⇒メディアマネージャーから、ファイルを選択し、ショートコードを挿入。

文書

ワードやエクセルのファイル、PDFファイルなどを表示できます。

ショートコードを挿入⇒テーブル⇒メディアマネージャーから、ファイルを選択し、ショートコードを挿入。

Google map

googleマップをブログに入れ込むには、グーグルマップで、共有⇒地図を埋め込む⇒HTMLをコピーしてテキスト画面に貼り付けます。

ところが、

googlemapショートコードを挿入

マーカーに住所を入力するだけで自動でGoogleマップを生成してくれます。

スライダー

ショートコードを挿入⇒スライダー⇒ソース:メディアライブラリーを選択

メディアライブラリから画像を選択

スライダー

制限:20

リンク:なし

リンクターゲット:Open in new tab

幅:600

高さ:300

自動再生:5000

速度:600

カルセール

挿入方法はスライダーと同じ。

ソース:最近の投稿

ギャラリー

こちらもスライダーと設定方法は同じ。

ショートコードを挿入⇒ギャラリー⇒ソース:メディアライブラリーを選択

メディアライブラリから画像を選択。

アニメーション

文字や画像が動くショートコードです。

ちょっとびっくりしますよ!

おっと、危ないよ~

これについてはここから書き始めると、1万文字超えの記事になってしまいます。

なので別記事でかなり詳しく説明します。

詳しくはこちらの記事で
こちらの記事を参考にして下さい。
Shortcodes Ultimateプラグイン|アニメーション61種。文字が動くよ~♪
プラグインの「Shortcodes Ultimate」のアニメーションのリストです。 このブログもワードプレスを利用しており、時々文字で遊...

QRコード

これは簡単!このブログもQRコードが作成できました。

データにURLを入力するだけです。コードのサイズはお好きなように変えられます。

Note

長いお付き合い、ありがとうございました。これだけのことがこの「Shortcodes Ultimate」ひとつでできるなんて、とても便利。

これは絶対、入れるべきプラグインのひとつです。

人気ブログランキング

お役に立てたなら、ぽちっと応援クリックお願いします☆

人気ブログランキング
いつもありがとうございます!

Sponsored Link
Sponsored Link

シェアボタンを押して情報を共有しましょう。

RECOMMEND こちらの記事も人気です。



Sponsored Link
Sponsored Link
Sponsored Link

『Shortcodes Ultimateの多彩な機能の使い方29選【WordPressプラグイン】』へのコメント

  1. 名前:WordPressのテキストを装飾する | Te ador 投稿日:2018/09/10(月) 08:57:51 ID:7da5bb9d9 返信

    […] https://kurashi-note00.com/archives/17999#i-8 #Shortcodes Ultimateの多彩な機能の使い方29選【WordPressプラグイン】さん […]

  2. 名前:WordPressプラグインに関する記事 | ふかメモ 投稿日:2019/09/08(日) 11:10:54 ID:aea267e98 返信

    […] Shortcodes Ultimateの多彩な機能の使い方29選【WordPressプラグイン】 | 【暮らしの音】kurashi-*note当ブログは、ワードプレスで無料テーマを利用しています。さまざまなプラグインを導入するこ […]

トップへ戻る