*

こんなことがしたい!Shortcodes Ultimateで簡単記事装飾

公開日: : 最終更新日:2018/04/04 WordPress ,

「Shortcodes Ultimate」をインストールすると、ショートコードで簡単に記事の装飾ができる便利なプラグインです。

Shortcodes Ultimateのインストール方法はこちらをご覧下さい

スポンサーリンク




Shortcodes Ultimateでどんなことができるのか?


こんなことをしたいときは?!から探せる一覧をつくってみました。

一覧は独断と偏見で選んだものなので、全てではありません(^o^;

項目をクリックすると説明に飛びます(^^)

基本的なショートコードの利用のしかた


①投稿記事で使いたい機能をいれる場所にカーソルを置く⇒「ショートコードの挿入」をクリック

②一覧から使用するショートコードを選択、クリック

③設定が表示されたら必要項目を選択あるいは入力してプレビューで確認

④「プリセット」をクリック⇒「現在の設定をプリセットとして保存」をクリック

⑤「ショートコードを挿入をクリック

設定はそれぞれの項目で違いますが、読んでいくと何を入力するのかわかるかなと思います。
分かりづらいところなどは補足してあります。




 
スポンサーリンク

 

見出し

プレビュー
見出しを装飾するショートコードです。
以前の記事で使い方の基本と設定を書いてあります。

見出しの詳しい使い方は以前の記事で確認してみてください 

見出しのショートコードの使い方
 

仕切り

仕切り
「仕切り」は、文章と文章の間に線で仕切りを入れられるショートコードです。
「トップに戻る」というリンク文字もつきますが、設定で「トップに戻る」を表示させるかしないかや、線のスタイル・色・高さなどを設定できます。
 

リスト

リスト アイコンピッカー
リスト メディアから
アイコンつきのリストができます。
設定でコンテンツに見出しの内容を入力します。
アイコンは「アイコンピッカー」を選択するとたくさんあるアイコンプリセットの中から好きなアイコンを選ぶことができます

アイコンの色も指定できます。
「メディアマネージャ」を選択すると自分の好きな画像をアイコンとして表示できます
 

スペーサー

これは空きスペースの高さを任意で指定できるショートコードです。
スペースの調整なのでプレビューでは空欄になります

 

Dropcap

dropcap
最初の文字だけ大きくしたり、ハイライトして表示するときに使います。

「スタイル」は4種類あり、
「デフォルト」「フラット」「ライト」「シンプル」から好きなものを選べます。

コンテンツのところで入力するのは、大きくしたい1文字です。
 

ボタン

ボタンのプレビュー
ボタンはリンク用のボタンを簡単に作ることができるショートコードです
これは使い方が以前の記事にあるのでそちらをご覧ください。
形・色・サイズなど自由につくることができます。
 

ハイライト

ハイライト
背景に色を付けたい時に利用するショートコードです。
文字の色も選択できます

 

フレーム

フレーム
画像などにフレームをつけられるショートコードです。
プレビューではサンプルが表示されますが、好きな画像にフレームをつけられます
「コンテンツ」に画像のタグをいれます。

画像のタグ
画像のURLは、メディアライブラリにある場合は画像をクリックすると右欄に表示されているので、コピペで貼りつければOKです

「左寄せ」「中央」「右寄せ」を選択できます。

 

テーブル

テーブル
HTMLのテーブルタグを生成するショートコードで、ブログに表をいれられます。
CSVファイルをインポートしてテーブルとして出力もできます。
 

ダミー画像

ダミー画像
いくつかのテーマからダミー画像を選んで差し込むことができます。
画像の幅・高さも指定できます。

テーマには「任意」「抽象的」「動物」「ビジネス」「キャッツ」「市」「食品」「ナイトライフ」「ファッション」「人」「自然」「スポーツ」「テクにクス」「トランスポート」があります。
どんな画像なのかプレビューで確認しながら決められますね。
 

ラベル

ラベル1
ラベルを作れるショートコードです。
「タイプ」の中から6色選択ができます。
「デフォルトはグレー」「成功はグリーン」「警告はオレンジ」「重要は赤」「黒はブラック」「情報は水色」となっています。

色にこだわらずに「ポイント」で表示したいところに使うなんていうのもいいと思います

ラベル2  
スポンサーリンク

 

タブ

タブ横
タブ縦
アコーディオンタブを生成できるショートコードです。
縦型にすることもできます。

「コンテンツ」にこんな具合に入力すると図のようなタブができます

[su_tab title="タイトル1"]あいうえお1[/su_tab] 

[su_tab title="タイトル2"]かきくけこ2[/su_tab] 

[su_tab title="タイトル3"]さしすせそ3[/su_tab] 

 

サービス

サービス
アイコンが付いたサービスタイトルとサービス説明を作れるショートコードです。
 

スポイラー
 

スポイラー
yajirusi
スポイラー
スポイラーとは「以下の複数」という意味の単語です。
図のように「+」やアイコンのところなどをクリックで展開できるショートコードです。
 



行
なにをどんな割合でいれるかという1行の設定ができる、行を作成できるショートコードです。
以下は例でいれたコンテンツです。

[su_column size="1/3"] [/su_column] 

[su_column size="1/3"]空を飛びたい飛ぶ方法の一つ[/su_column] 

[su_column size="1/3"]パラグライダー[/su_column] 

1/3の部分は自由に変更できます。

この場合は1行に3列入れるということになります。
割合が1/3ずつですね。

半々にしたければ、1/2に。

幅の割合を変えることもできます。

「2/3と1/3」にしたり、「1/4と3/4」したり「1/4と1/4と2/4」にしたりとか・・・
文字だけ、画像だけ、文字と画像など使い方いろいろ。

これはなかなか使い道がありそうなのでこちらに詳細をのせています。
 

ボックス

ボックス
図のようなボックスを簡単に作成できるショートコードです。
スタイルには「デフォルテ」「ガラス」「ソフト」「泡」「ノイズ」があります。
タイトルとボックスの色、テキストの色も選べます。
例のスタイルは「ガラス」です。
 

アコーディオン

アコーディオン
図のようなアコーディオンを作成できるショートコードです。

次のようにスポイラーと組み合わせます。

[su_accordion][su_spoiler]コンテンツ[/su_spoiler] 

[su_spoiler]コンテンツ[/su_spoiler]  

[su_spoiler]コンテンツ[/su_spoiler] 

[/su_accordion]
 
スポンサーリンク

 

カラム

カラム
記事と記事の間で記事を2カラムや3カラムにできます。

これは3カラムの設定を行った図です。
3列になっていますね。

コンテンツは

コンテンツ
ちょっと文字が多かったです(^^;

[su_row]と[/su_row]ではさむことで横に並びます

文字の代わりに画像のタグを入れることもできます。
 

ノート

コンテンツに入力した文字の背景に色をつけられます。
複数行でもOKです。

ノートはコンテンツを囲って表示できるショートコードです。
背景色や文字色も変更できます。
 

Youtube

Youtube
YouTubeのURLを「URL」の欄にいれると自動でframe出力してくれるショートコードです。

自動再生の有無やレスポンシブデザインにも自動で対応しています。

※もう一つの「高度なYoutube」
より詳細なYouTubeの設定を行えるものです。
基本Youtubeと同様ですが、設定でリスト表示を可能にしたり、ループ設定をしたりとより細かい設定ができます。
さまざまな項目があるのでここは実際に試して自分好みの設定にできます。
 

オーディオ
 

オーディオ
オーディオファイルをWordPressのメディアライブラリへアップロード(ドラッグ&ドロップでOK)して、このショートコードを利用するだけで音声が聴けるように自動生成してくれるショートコードです
 

文書

文書
WordやExcelなどの文書などをブログに表示できるショートコードです。

先に文書などをメディアライブラリに追加しておきます。
ファイル名は半角英数で!

PDFファイルやWordファイルなど、先にアップロードした文書を「メディアマネージャ」ボタンから選択すると表示することができます。

PDFファイルをスクロールして閲覧も可能です。
 

Google マップ

Googleマップ
マーカーの部分に住所を入れるだけで自動でGoogleマップを生成してくれるショートコードです。
 

Lightbox

ライトボックス
ボタンをクリックすると動画を再生させたり画像を表示させたりできます。

図のようなボタンを生成するショートコードです。
 

スライダー

スライダー
メディアライブラリなどからソース元を選択し、設定するとスライダーを自動で生成できるショートコードです。
 

カルーセル

カルーセル
横に自動でスライドするギャラリーを作成できます。
スライダーと設定方法は似ています。
 

投稿

固定ページやメディアなど好きな投稿タイプを出力できます。
この「投稿」は「文書」の下にある「投稿」です。

2種類あるので間違えないよう。

完成
 

☆カテゴリ別の一覧を固定ページに作成した記事があります。

詳しく紹介していますので興味のある方はこちらをご覧ください
 

ツールチップ
 

ツールチップ
文章などにマウスを合わせると、補足を表示させることができるショートコードです。

 

アニメーション


動きのあるアニメーションを差し込みたい時に使うショートコードです。

アニメーションの種類を選んで、いろいろ見て見ましょう
注意を引きたい場所に差し込むと効果的です。初期値は1回ですが、回数は指定できます


 

Shortcodes Ultimateはブログを作る上でかなり便利な機能満載でした。

できることや使い方も忘れっぽいので備忘録的に作ってみました

ブログの装飾などを楽にできたらいいのに、と思っているあなた!

ぜひインストールして活用してみてください(^o^)

以前の記事  Shortcodes Ultimateショートコードで簡単記事装飾|基本の使い方  

次の記事   Shortcodes Ultimateの行で文字も画像も横並び へ

WordPress一覧へ




にほんブログ村


日々の出来事 ブログランキングへ

スポンサーリンク




スポンサーリンク




Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


梅雨とは?梅雨(つゆ)の語源とは?いろいろある梅雨の種類

今年の梅雨入りはまだ?とか、梅雨明けは?とか、普段、会話で普通に出てく

七夕にぬりえで遊ぼう!無料ダウンロードサイト紹介 折り紙もあるよ^^

七夕の日あなたは何をしてすごしますか?^^ 笹竹に七夕のお飾りや短冊

笹に七夕飾りをするわけは?七夕飾りの意味と短冊の色や飾る期間は?

いろんな行事でそれぞれになにかを飾ったり、供えたりしますよね。 雛祭

七夕とは?たなばたと読むのはなぜ?由来は乞巧奠と棚機つ女信仰から

子供の頃から7月7日になると空を見上げては織姫と彦星の話を思いだし、雨

お中元を贈った場合やいらない場合の困ったときの対処は?やめたい時は

日本では季節ごとに行事が目白押しですが、夏前になるとお中元の時期。

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくてアフィリエイトにチャレンジ中

    好きなものは
    アニメ・漫画・ゲーム・お絵描き・映画を観ること・パソコンで遊ぶこと・チョコレート・中島みゆきさんの歌・・

    やりたいことは・・
    空を飛びたい・馬に乗って自由に走り回りたい・猫を飼いたい・・

    いろいろあるけど、まずは資金と自由な時間を確保しないと進まない。
    日々どうしたらできるか考えながらリアル仕事に追われています。

PAGE TOP ↑