Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
こんなことがしたい!Shortcodes Ultimateで簡単記事装飾 | 思いだし にっき
サイトアイコン 思いだし にっき

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

<p><img class&equals;"aligncenter size-full wp-image-10961" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;2691888&lowbar;s&period;jpg" alt&equals;"" width&equals;"384" height&equals;"256" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><strong>「Shortcodes Ultimate」は<&sol;strong>インストールすると、ショートコードで簡単に記事の装飾ができる便利なプラグインです。<&sol;p>&NewLine;<p>Shortcodes Ultimateのインストール方法は<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1476&period;html">こちら<&sol;a>をご覧下さい<&sol;p>&NewLine;<p>ここではどんなことができるのか?ということのご紹介です<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2><span style&equals;"font-size&colon; 14pt&semi;"><strong>Shortcodes Ultimateでどんなことができるのか?<&sol;strong><&sol;span><&sol;h2>&NewLine;<p>こんなことをしたいときは?!から探せる一覧をつくってみました。<&sol;p>&NewLine;<p>一覧は独断と偏見で選んだものなので、全てではありません(^o^;<&sol;p>&NewLine;<p>項目をクリックすると説明に飛びます(^^)<&sol;p>&NewLine;<h3><span style&equals;"font-size&colon; 14pt&semi;"><strong>基本的なショートコードの利用のしかた<&sol;strong><&sol;span><&sol;h3>&NewLine;<p>①投稿記事で使いたい機能をいれる場所にカーソルを置く&Implies;「ショートコードの挿入」をクリック<&sol;p>&NewLine;<p>②一覧から使用するショートコードを選択、クリック<&sol;p>&NewLine;<p>③設定が表示されたら必要項目を選択あるいは入力してプレビューで確認<&sol;p>&NewLine;<p>④「プリセット」をクリック&Implies;「現在の設定をプリセットとして保存」をクリック<&sol;p>&NewLine;<p>⑤「ショートコードを挿入をクリック<&sol;p>&NewLine;<p>設定はそれぞれの項目で違いますが、読んでいくと何を入力するのかわかるかなと思います。<br &sol;>&NewLine;分かりづらいところなどは補足してあります。<&sol;p>&NewLine;<div class&equals;"su-divider su-divider-style-default" style&equals;"margin&colon;15px 0&semi;border-width&colon;2px&semi;border-color&colon;&num;2415ed"><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;見出し">見出しの装飾<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;仕切り">文章の間に仕切り線を引く<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;リスト">アイコン付きのリスト<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;スペーサー">空スペースの高さ調整<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;ドロップ">最初の文字を大きく<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;ボタン">リンクボタンの装飾<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;ハイライト">文の背景に色を付ける<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;フレーム">画像にフレームを付ける<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;テーブル">ブログに表をいれる<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;ラベル">カラーのラベルを作る<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;タブ">項目をアコーデオンタブにする<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;サービス">アイコンのあるサービスタイトルと説明<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;スポイラー">項目を展開する<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;行">文章や画像を1行で表示<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;ボックス">見栄えのいいボックス作り<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;アコーディオン">記事の展開を複数<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;カラム">記事の一部を2カラムや3カラムに<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;ノート">背景に色のある枠に文字をいれる<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;Youtube">Youtubeを簡単に表示<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;オーディオ">ブログで音楽が効けるように<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;文書">Wordの文書などをブログに<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;Googleマップ">地図をブログにいれる<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;ライトボックス">ボタンをクリックで動画などの再生<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;スライダー">画像などのスライダーを表示したい<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;カルーセル">横に自動でスライドするギャラリー<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;投稿">投稿記事をカテゴリー別の一覧に<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-row"><div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;ツールチップ">文章にマウスを合わせると補足が表示<&sol;a><&sol;div><&sol;div>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim"><a href&equals;"&num;アニメーション">文字や文章に動きを追加する<&sol;a><&sol;div><&sol;div><&sol;div>&NewLine;<div class&equals;"su-divider su-divider-style-default" style&equals;"margin&colon;15px 0&semi;border-width&colon;2px&semi;border-color&colon;&num;2d6eca"><a href&equals;"&num;" style&equals;"color&colon;&num;a414d4">ページのトップへ<&sol;a><&sol;div>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a name&equals;"見出し"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;"><strong>見出し<&sol;strong><&sol;span><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1650" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc6&period;png" alt&equals;"プレビュー" width&equals;"612" height&equals;"200" &sol;><&sol;p>&NewLine;<p>見出しを装飾するショートコードです。<br &sol;>&NewLine;以前の記事で使い方の基本と設定を書いてあります。<&sol;p>&NewLine;<p>見出しの詳しい使い方は以前の記事で確認してみてください <&sol;p>&NewLine;<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1640&period;html" class&equals;"su-button su-button-style-3d" style&equals;"color&colon;&num;2b2727&semi;background-color&colon;&num;f79723&semi;border-color&colon;&num;c6791c&semi;border-radius&colon;7px" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer"><span style&equals;"color&colon;&num;2b2727&semi;padding&colon;7px 20px&semi;font-size&colon;16px&semi;line-height&colon;24px&semi;border-color&colon;&num;fab765&semi;border-radius&colon;7px&semi;text-shadow&colon;none"><i class&equals;"sui sui-paper-plane" style&equals;"font-size&colon;16px&semi;color&colon;&num;f5f01e"><&sol;i> 見出しのショートコードの使い方<&sol;span><&sol;a>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 14pt&semi;"><a name&equals;"仕切り"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi;"><strong>仕切り<&sol;strong><&sol;span><&sol;span><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1811" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc30&period;png" alt&equals;"仕切り" width&equals;"597" height&equals;"85" &sol;><&sol;p>&NewLine;<p>「仕切り」は、文章と文章の間に線で仕切りを入れられるショートコードです。<br &sol;>&NewLine;「トップに戻る」というリンク文字もつきますが、設定で「トップに戻る」を表示させるかしないかや、線のスタイル・色・高さなどを設定できます。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 14pt&semi;"><a name&equals;"リスト"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi;"><strong>リスト<&sol;strong><&sol;span><&sol;span><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1800" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc31&period;png" alt&equals;"リスト アイコンピッカー" width&equals;"400" height&equals;"184" &sol;><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1801" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc32&period;png" alt&equals;"リスト メディアから" width&equals;"402" height&equals;"173" &sol;><&sol;p>&NewLine;<p>アイコンつきのリストができます。<br &sol;>&NewLine;設定でコンテンツに見出しの内容を入力します。<br &sol;>&NewLine;アイコンは「アイコンピッカー」を選択するとたくさんあるアイコンプリセットの中から好きなアイコンを選ぶことができます<&sol;p>&NewLine;<p>アイコンの色も指定できます。<br &sol;>&NewLine;「メディアマネージャ」を選択すると自分の好きな画像をアイコンとして表示できます<br &sol;>&NewLine; <&sol;p>&NewLine;<p><a name&equals;"スペーサー"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi;"><strong><span style&equals;"font-size&colon; 14pt&semi;">スペーサー<&sol;span><&sol;strong><&sol;span><&sol;p>&NewLine;<p>これは空きスペースの高さを任意で指定できるショートコードです。<br &sol;>&NewLine;スペースの調整なのでプレビューでは空欄になります<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><strong><a name&equals;"ドロップ"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">Dropcap<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1812" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc33&period;png" alt&equals;"dropcap" width&equals;"420" height&equals;"439" &sol;><&sol;p>&NewLine;<p>最初の文字だけ大きくしたり、ハイライトして表示するときに使います。<&sol;p>&NewLine;<p>「スタイル」は4種類あり、<br &sol;>&NewLine;「デフォルト」「フラット」「ライト」「シンプル」から好きなものを選べます。<&sol;p>&NewLine;<p>コンテンツのところで入力するのは、大きくしたい1文字です。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 14pt&semi;"><a name&equals;"ボタン"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi;"><strong>ボタン<&sol;strong><&sol;span><&sol;span><&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-1662 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc16&period;png" alt&equals;"ボタンのプレビュー" width&equals;"596" height&equals;"274" &sol;><&sol;p>&NewLine;<p>ボタンはリンク用のボタンを簡単に作ることができるショートコードです<br &sol;>&NewLine;これは使い方が以前の記事にあるので<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1640&period;html">そちら<&sol;a>をご覧ください。<br &sol;>&NewLine;形・色・サイズなど自由につくることができます。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><strong><a name&equals;"ハイライト"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">ハイライト<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1813" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc34&period;png" alt&equals;"ハイライト" width&equals;"420" height&equals;"228" &sol;><&sol;p>&NewLine;<p>背景に色を付けたい時に利用するショートコードです。<br &sol;>&NewLine;文字の色も選択できます<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><strong><a name&equals;"フレーム"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">フレーム<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1814" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc35&period;png" alt&equals;"フレーム" width&equals;"419" height&equals;"398" &sol;><&sol;p>&NewLine;<p>画像などにフレームをつけられるショートコードです。<br &sol;>&NewLine;プレビューではサンプルが表示されますが、好きな画像にフレームをつけられます<br &sol;>&NewLine;「コンテンツ」に画像のタグをいれます。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1838" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc70&period;png" alt&equals;"画像のタグ" width&equals;"407" height&equals;"56" &sol;><&sol;p>&NewLine;<p>画像のURLは、メディアライブラリにある場合は画像をクリックすると右欄に表示されているので、コピペで貼りつければOKです<&sol;p>&NewLine;<p>「左寄せ」「中央」「右寄せ」を選択できます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 14pt&semi;"><a name&equals;"テーブル"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi;"><strong>テーブル<&sol;strong><&sol;span><&sol;span><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1815" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc36&period;png" alt&equals;"テーブル" width&equals;"482" height&equals;"117" &sol;><&sol;p>&NewLine;<p>HTMLのテーブルタグを生成するショートコードで、ブログに表をいれられます。<br &sol;>&NewLine;CSVファイルをインポートしてテーブルとして出力もできます。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><a name&equals;"ダミー画像"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;"><strong>ダミー画像<&sol;strong><&sol;span><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1816" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc37&period;png" alt&equals;"ダミー画像" width&equals;"544" height&equals;"367" &sol;><&sol;p>&NewLine;<p>いくつかのテーマからダミー画像を選んで差し込むことができます。<br &sol;>&NewLine;画像の幅・高さも指定できます。<&sol;p>&NewLine;<p>テーマには「任意」「抽象的」「動物」「ビジネス」「キャッツ」「市」「食品」「ナイトライフ」「ファッション」「人」「自然」「スポーツ」「テクにクス」「トランスポート」があります。<br &sol;>&NewLine;どんな画像なのかプレビューで確認しながら決められますね。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><strong><a name&equals;"ラベル"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">ラベル<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1817" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc38&period;png" alt&equals;"ラベル1" width&equals;"426" height&equals;"75" &sol;><&sol;p>&NewLine;<p>ラベルを作れるショートコードです。<br &sol;>&NewLine;「タイプ」の中から6色選択ができます。<br &sol;>&NewLine;「デフォルトはグレー」「成功はグリーン」「警告はオレンジ」「重要は赤」「黒はブラック」「情報は水色」となっています。<&sol;p>&NewLine;<p>色にこだわらずに「ポイント」で表示したいところに使うなんていうのもいいと思います<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1818" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc56&period;png" alt&equals;"ラベル2" width&equals;"252" height&equals;"72" &sol;><br &sol;>&NewLine; <&sol;p>&NewLine;<p><strong><span style&equals;"font-size&colon; 14pt&semi;"><a name&equals;"タブ"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi;">タブ<&sol;span><&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1819" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc39&period;png" alt&equals;"タブ横" width&equals;"570" height&equals;"106" &sol;><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1820" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc40&period;png" alt&equals;"タブ縦" width&equals;"569" height&equals;"149" &sol;><&sol;p>&NewLine;<p>アコーディオンタブを生成できるショートコードです。<br &sol;>&NewLine;縦型にすることもできます。<&sol;p>&NewLine;<p>「コンテンツ」にこんな具合に入力すると図のようなタブができます<&sol;p>&NewLine; <&sol;p>&NewLine; <&sol;p>&NewLine; <&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS v&period; 2&period;0&period;92 Shortcode Ad -->&NewLine;<div class&equals;"quads-location quads-ad" id&equals;"quads-ad" style&equals;"">&NewLine;<&sol;div>&NewLine;&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><strong><a name&equals;"サービス"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">サービス<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1821" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc41&period;png" alt&equals;"サービス" width&equals;"442" height&equals;"125" &sol;><&sol;p>&NewLine;<p>アイコンが付いたサービスタイトルとサービス説明を作れるショートコードです。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 14pt&semi;"><strong><a name&equals;"スポイラー"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi;">スポイラー<&sol;span><&sol;strong><&sol;span><br &sol;>&NewLine; <&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1822" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc42&period;png" alt&equals;"スポイラー" width&equals;"325" height&equals;"75" &sol;><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1337" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;yajirusi&period;png" alt&equals;"yajirusi" width&equals;"54" height&equals;"58" &sol;><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1823" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc43&period;png" alt&equals;"スポイラー" width&equals;"326" height&equals;"106" &sol;><&sol;p>&NewLine;<p>スポイラーとは「以下の複数」という意味の単語です。<br &sol;>&NewLine;図のように「&plus;」やアイコンのところなどをクリックで展開できるショートコードです。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><strong><a name&equals;"行"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">行<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1824" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc44&period;png" alt&equals;"行" width&equals;"561" height&equals;"126" &sol;><&sol;p>&NewLine;<p>なにをどんな割合でいれるかという1行の設定ができる、行を作成できるショートコードです。<br &sol;>&NewLine;以下は例でいれたコンテンツです。<&sol;p>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim">&NewLine;<&sol;div><&sol;div> <&sol;p>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim">空を飛びたい飛ぶ方法の一つ<&sol;div><&sol;div> <&sol;p>&NewLine;<div class&equals;"su-column su-column-size-1-2"><div class&equals;"su-column-inner su-u-clearfix su-u-trim">パラグライダー<&sol;div><&sol;div> <&sol;p>&NewLine;<p>1&sol;3の部分は自由に変更できます。<&sol;p>&NewLine;<p>この場合は1行に3列入れるということになります。<br &sol;>&NewLine;割合が1&sol;3ずつですね。<&sol;p>&NewLine;<p>半々にしたければ、1&sol;2に。<&sol;p>&NewLine;<p>幅の割合を変えることもできます。<&sol;p>&NewLine;<p>「2&sol;3と1&sol;3」にしたり、「1&sol;4と3&sol;4」したり「1&sol;4と1&sol;4と2&sol;4」にしたりとか・・・<br &sol;>&NewLine;文字だけ、画像だけ、文字と画像など使い方いろいろ。<&sol;p>&NewLine;<p>これはなかなか使い道がありそうなので<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1770&period;html"><strong>こちら<&sol;strong><&sol;a>に詳細をのせています。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><strong><a name&equals;"ボックス"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">ボックス<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1825" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc45&period;png" alt&equals;"ボックス" width&equals;"578" height&equals;"126" &sol;><&sol;p>&NewLine;<p>図のようなボックスを簡単に作成できるショートコードです。<br &sol;>&NewLine;スタイルには「デフォルテ」「ガラス」「ソフト」「泡」「ノイズ」があります。<br &sol;>&NewLine;タイトルとボックスの色、テキストの色も選べます。<br &sol;>&NewLine;例のスタイルは「ガラス」です。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><strong><a name&equals;"アコーディオン"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">アコーディオン<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1826" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc57&period;png" alt&equals;"アコーディオン" width&equals;"385" height&equals;"258" &sol;><&sol;p>&NewLine;<p>図のようなアコーディオンを作成できるショートコードです。<&sol;p>&NewLine;<p>次のようにスポイラーと組み合わせます。<&sol;p>&NewLine;<div class&equals;"su-accordion su-u-trim"><div class&equals;"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset&equals;"0" data-anchor-in-url&equals;"no"><div class&equals;"su-spoiler-title" tabindex&equals;"0" role&equals;"button"><span class&equals;"su-spoiler-icon"><&sol;span>スポイラーのタイトル<&sol;div><div class&equals;"su-spoiler-content su-u-clearfix su-u-trim">コンテンツ<&sol;div><&sol;div> <&sol;p>&NewLine;<div class&equals;"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset&equals;"0" data-anchor-in-url&equals;"no"><div class&equals;"su-spoiler-title" tabindex&equals;"0" role&equals;"button"><span class&equals;"su-spoiler-icon"><&sol;span>スポイラーのタイトル<&sol;div><div class&equals;"su-spoiler-content su-u-clearfix su-u-trim">コンテンツ<&sol;div><&sol;div>&NewLine; <&sol;p>&NewLine;<div class&equals;"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset&equals;"0" data-anchor-in-url&equals;"no"><div class&equals;"su-spoiler-title" tabindex&equals;"0" role&equals;"button"><span class&equals;"su-spoiler-icon"><&sol;span>スポイラーのタイトル<&sol;div><div class&equals;"su-spoiler-content su-u-clearfix su-u-trim">コンテンツ<&sol;div><&sol;div>&NewLine;<&sol;div>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><strong><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">カラム<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1827" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc46&period;png" alt&equals;"カラム" width&equals;"603" height&equals;"176" &sol;><&sol;p>&NewLine;<p>記事と記事の間で記事を2カラムや3カラムにできます。<&sol;p>&NewLine;<p>これは3カラムの設定を行った図です。<br &sol;>&NewLine;3列になっていますね。<&sol;p>&NewLine;<p>コンテンツは<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1859" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc71&period;png" alt&equals;"コンテンツ" width&equals;"597" height&equals;"338" &sol;><&sol;p>&NewLine;<p>ちょっと文字が多かったです(^^;<&sol;p>&NewLine;<div class&equals;"su-row">と<&sol;div>ではさむことで横に並びます<&sol;p>&NewLine;<p>文字の代わりに画像のタグを入れることもできます。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><strong><a name&equals;"ノート"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">ノート<&sol;span><&sol;strong><&sol;p>&NewLine;<div class&equals;"su-note" style&equals;"border-color&colon;&num;0076a8&semi;border-radius&colon;5px&semi;-moz-border-radius&colon;5px&semi;-webkit-border-radius&colon;5px&semi;"><div class&equals;"su-note-inner su-u-clearfix su-u-trim" style&equals;"background-color&colon;&num;0990c2&semi;border-color&colon;&num;d5ffff&semi;color&colon;&num;fdfafa&semi;border-radius&colon;5px&semi;-moz-border-radius&colon;5px&semi;-webkit-border-radius&colon;5px&semi;">コンテンツに入力した文字の背景に色をつけられます。<br &sol;>&NewLine;複数行でもOKです。<&sol;div><&sol;div>&NewLine;<p>ノートはコンテンツを囲って表示できるショートコードです。<br &sol;>&NewLine;背景色や文字色も変更できます。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><strong><a name&equals;"Youtube"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">Youtube<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1829" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc48&period;png" alt&equals;"Youtube" width&equals;"633" height&equals;"378" &sol;><&sol;p>&NewLine;<p>YouTubeのURLを「URL」の欄にいれると自動でframe出力してくれるショートコードです。<&sol;p>&NewLine;<p>自動再生の有無やレスポンシブデザインにも自動で対応しています。<&sol;p>&NewLine;<p>※もう一つの<strong>「高度なYoutube」<&sol;strong>は<br &sol;>&NewLine;より詳細なYouTubeの設定を行えるものです。<br &sol;>&NewLine;基本Youtubeと同様ですが、設定でリスト表示を可能にしたり、ループ設定をしたりとより細かい設定ができます。<br &sol;>&NewLine;さまざまな項目があるのでここは実際に試して自分好みの設定にできます。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><strong><a name&equals;"オーディオ"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">オーディオ<&sol;span><&sol;strong><br &sol;>&NewLine; <&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1830" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc49&period;png" alt&equals;"オーディオ" width&equals;"601" height&equals;"64" &sol;><&sol;p>&NewLine;<p>オーディオファイルをWordPressのメディアライブラリへアップロード(ドラッグ&amp&semi;ドロップでOK)して、このショートコードを利用するだけで音声が聴けるように自動生成してくれるショートコードです<br &sol;>&NewLine; <&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 14pt&semi;"><strong><a name&equals;"文書"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi;">文書<&sol;span><&sol;strong><&sol;span><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1831" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc50&period;png" alt&equals;"文書" width&equals;"558" height&equals;"327" &sol;><&sol;p>&NewLine;<p>WordやExcelなどの文書などをブログに表示できるショートコードです。<&sol;p>&NewLine;<p>先に文書などをメディアライブラリに追加しておきます。<br &sol;>&NewLine;ファイル名は半角英数で!<&sol;p>&NewLine;<p>PDFファイルやWordファイルなど、先にアップロードした文書を「メディアマネージャ」ボタンから選択すると表示することができます。<&sol;p>&NewLine;<p>PDFファイルをスクロールして閲覧も可能です。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><strong><a name&equals;"Googleマップ"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">Google マップ<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1832" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc51&period;png" alt&equals;"Googleマップ" width&equals;"600" height&equals;"337" &sol;><&sol;p>&NewLine;<p>マーカーの部分に住所を入れるだけで自動でGoogleマップを生成してくれるショートコードです。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><strong><a name&equals;"ライトボックス"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">Lightbox<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1833" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc52&period;png" alt&equals;"ライトボックス" width&equals;"487" height&equals;"104" &sol;><&sol;p>&NewLine;<p>ボタンをクリックすると動画を再生させたり画像を表示させたりできます。<&sol;p>&NewLine;<p>図のようなボタンを生成するショートコードです。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><a name&equals;"スライダー"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;"><strong>スライダー<&sol;strong><&sol;span><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1834" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc53&period;png" alt&equals;"スライダー" width&equals;"603" height&equals;"416" &sol;><&sol;p>&NewLine;<p>メディアライブラリなどからソース元を選択し、設定するとスライダーを自動で生成できるショートコードです。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><a name&equals;"カルーセル"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;"><strong>カルーセル<&sol;strong><&sol;span><&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1835" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc54&period;png" alt&equals;"カルーセル" width&equals;"600" height&equals;"255" &sol;><&sol;p>&NewLine;<p>横に自動でスライドするギャラリーを作成できます。<br &sol;>&NewLine;スライダーと設定方法は似ています。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><a name&equals;"投稿"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;"><strong>投稿<&sol;strong><&sol;span><&sol;p>&NewLine;<p>固定ページやメディアなど好きな投稿タイプを出力できます。<br &sol;>&NewLine;この「投稿」は「文書」の下にある「投稿」です。<&sol;p>&NewLine;<p>2種類あるので間違えないよう。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1485" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;shortu9&period;png" alt&equals;"完成" width&equals;"607" height&equals;"477" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&star;カテゴリ別の一覧を固定ページに作成した記事があります。<&sol;p>&NewLine;<p>詳しく紹介していますので興味のある方は<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1476&period;html">こちら<&sol;a>をご覧ください<br &sol;>&NewLine; <&sol;p>&NewLine;<p><a name&equals;"ツールチップ゚"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;"><strong>ツールチップ<&sol;strong><&sol;span><br &sol;>&NewLine; <&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1836" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc55&period;png" alt&equals;"ツールチップ" width&equals;"458" height&equals;"128" &sol;><&sol;p>&NewLine;<p>文章などにマウスを合わせると、補足を表示させることができるショートコードです。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><strong><a name&equals;"アニメーション"><&sol;a><span style&equals;"color&colon; &num;0000ff&semi; font-size&colon; 14pt&semi;">アニメーション<&sol;span><&sol;strong><&sol;p>&NewLine;<div class&equals;"su-animate" style&equals;"opacity&colon;0&semi;-webkit-animation-duration&colon;4s&semi;-webkit-animation-delay&colon;0&period;5s&semi;animation-duration&colon;4s&semi;animation-delay&colon;0&period;5s&semi;" data-animation&equals;"bounceInLeft" data-duration&equals;"4" data-delay&equals;"0&period;5"><span style&equals;"font-size&colon; 18pt&semi;"><strong>文字が動くよ!!<&sol;strong><&sol;span><&sol;div>&NewLine;<p>動きのあるアニメーションを差し込みたい時に使うショートコードです。<&sol;p>&NewLine;<p>アニメーションの種類を選んで、いろいろ見て見ましょう<br &sol;>&NewLine;注意を引きたい場所に差し込むと効果的です。初期値は1回ですが、回数は指定できます<&sol;p>&NewLine;<div class&equals;"su-divider su-divider-style-dotted" style&equals;"margin&colon;15px 0&semi;border-width&colon;2px&semi;border-color&colon;&num;f9b42d"><a href&equals;"&num;" style&equals;"color&colon;&num;a414d4">ページのトップへ<&sol;a><&sol;div>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>Shortcodes Ultimateはブログを作る上でかなり便利な機能満載でした。<&sol;p>&NewLine;<p>できることや使い方も忘れっぽいので備忘録的に作ってみました<&sol;p>&NewLine;<p>ブログの装飾などを楽にできたらいいのに、と思っているあなた!<&sol;p>&NewLine;<p>ぜひインストールして活用してみてください(^o^)<&sol;p>&NewLine;<p>以前の記事  <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1640&period;html">Shortcodes Ultimateショートコードで簡単記事装飾&vert;基本の使い方  <&sol;a>へ<&sol;p>&NewLine;<p>次の記事   <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1770&period;html">Shortcodes Ultimateの行で文字も画像も横並び<&sol;a> へ<&sol;p>&NewLine;<p style&equals;"text-align&colon; right&semi;"><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;page-1472&period;html"><span style&equals;"color&colon; &num;0066cc&semi;">WordPress一覧へ<&sol;span><&sol;a><&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;affiliate&period;freebieac&period;com&sol;link&period;php&quest;i&equals;580f01029d0b2&amp&semi;m&equals;584c839908d81"><img src&equals;"http&colon;&sol;&sol;affiliate&period;freebieac&period;com&sol;data&period;php&quest;i&equals;580f01029d0b2&amp&semi;m&equals;584c839908d81" width&equals;"728" height&equals;"90" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><img src&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;img&sol;diary88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">にほんブログ村<&sol;a><&sol;p>&NewLine;<p><a title&equals;"日々の出来事 ブログランキングへ" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200"><img src&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;img&sol;banner&sol;c&sol;banner&lowbar;1&sol;br&lowbar;c&lowbar;9200&lowbar;1&period;gif" width&equals;"110" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a style&equals;"font-size&colon; 12px&semi;" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200">日々の出来事 ブログランキングへ<&sol;a><&sol;p>&NewLine;&NewLine;

モバイルバージョンを終了