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-12139" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;2940688&lowbar;s&period;jpg" alt&equals;"" width&equals;"384" height&equals;"259" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>WordPressの投稿機能(ビジュアルエディタ)は、デフォルトの状態で簡単に記事の装飾ができるボタンが用意されているけど、かなり少ないです。<&sol;p>&NewLine;<p>プラグインでこのボタンを増やすこともできますが、今回はショートコードを使って簡単に装飾などができるプラグインについてメモってみました。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2><strong>ところでショートコードってなに?<&sol;strong><&sol;h2>&NewLine;<p>以前記事に<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;902&period;html">吹き出しをいれる方法<&sol;a>を書いたときには、なんとなくあいまいに理解して使い方(操作)がわかればいいか、と使っていたけど、ここはちゃんとおさえるべきかな、ということで説明します。<&sol;p>&NewLine;<p>ショートコードとは、WordPress固有のコードで、phpやソースコードを書き込まなくても、特定の文字を書くだけという便利な機能です。<&sol;p>&NewLine;<p>事前にphpという場所にプログラムコードを記述しておくと、記事投稿の際に短いコードを記述するだけで、その動作を呼び出すことができるというもの。<&sol;p>&NewLine;<p>その呼び出すためのコードが<strong>ショートコード<&sol;strong>というわけです。<&sol;p>&NewLine;<p>ショートコードは一般的に&lbrack;〇〇〇〇〇&rsqb;というように括弧で囲まれた記述の仕方をします。<&sol;p>&NewLine;<p>例として、Speech Bubbleでは<&sol;p>&NewLine;<p><span style&equals;"color&colon; &num;0000ff&semi;"><div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;1&period;jpg" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">A さん<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> こんにちわ<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div><&sol;span><&sol;p>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-a">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;1&period;jpg" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name">A さん<&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> こんにちわ <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<p>こんな具合の記述で楽に吹き出しをいれることができました。<&sol;p>&NewLine;<p>ソースコードやphpを直接書き込まなくても、ショートコードを書けば、<&sol;p>&NewLine;<p>ソースコードやphpを書き込んだのと同じことになるんですね。<&sol;p>&NewLine;<p>ショートコードは通常の投稿ページにも固定ページにも記述できるし、<&sol;p>&NewLine;<p>ビジュアルエディタでもテキストエディタでも記述できます。<&sol;p>&NewLine;<p>私のようなプログラムとかよくわからない、phpも極力いじりたくない、という人には向いていますね&lpar;&Hat;&Hat;&rpar;<&sol;p>&NewLine;<p>で、プラグインを使うことで、phpにプログラムコードを記述しておくという手間も省けてしまうようです。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2><strong>Shortcodes Ultimate<&sol;strong>の使い方<&sol;h2>&NewLine;<p>インストール方法は<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1476&period;html">一覧ページの作り方<&sol;a>で書いていますのでそちらを参照してください。<&sol;p>&NewLine;<h3><strong>なにができるのか?<&sol;strong><&sol;h3>&NewLine;<p><strong>Shortcodes Ultimate<&sol;strong>を<strong>インストールすると<&sol;strong><&sol;p>&NewLine;<p>記事投稿画面の上部に<strong>「ショートコードを挿入」<&sol;strong>というボタンが表示されます。<&sol;p>&NewLine;<p>クリックで、できることの一覧が表示されます。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1641" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc0&period;png" alt&equals;"ショートコード一覧" width&equals;"642" height&equals;"468" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>一覧の上にタイプ別フィルタという項目があります。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1642" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc1&period;png" alt&equals;"タイプ別" width&equals;"608" height&equals;"65" &sol;><&sol;p>&NewLine;<p>「すべて」が全部表示された状態ですが「コンテンツ」などの項目名をクリックすると、その項目にあったものだけが表示になり、クリックできます。<br &sol;>&NewLine; <&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1644" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc2&period;png" alt&equals;"コンテンツ項目" width&equals;"640" height&equals;"407" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>主なものを使って設定をみてみます。<&sol;p>&NewLine;<p><span style&equals;"font-size&colon; 12pt&semi;"><span style&equals;"color&colon; &num;ff00ff&semi;">例1:「コンテンツ」の<strong>「見出し」<&sol;strong><&sol;span> <&sol;span><&sol;p>&NewLine;<p>これは見出しを装飾できるショートコードです。<&sol;p>&NewLine;<p>「見出し」をクリックします<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1646" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc3&period;png" alt&equals;"見出し" width&equals;"536" height&equals;"291" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>すると、設定画面に変わります。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1647" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc4&period;png" alt&equals;"見出しの設定" width&equals;"562" height&equals;"932" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><strong>デフォルト<&sol;strong> これはデフォルトしか選択できません。他のスタイルは有料になります。<&sol;p>&NewLine;<p><strong>サイズ<&sol;strong> スライダーを動かして指定します。<&sol;p>&NewLine;<p><strong>整列<&sol;strong> 見出しの位置。右・左・中央から選べます。<&sol;p>&NewLine;<p><strong>マージン<&sol;strong> 余白の設定です。これもスライダーをドラッグして指定します。<&sol;p>&NewLine;<p><strong>クラス<&sol;strong> CSSで装飾したい人が書きこみます。<&sol;p>&NewLine;<p><strong>コンテンツ<&sol;strong> 見出しの文章<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>設定が終わったら下までスクロールすると「<strong>ショートコードを挿入<&sol;strong>」と「<strong>プレビュー<&sol;strong>」ボタンがあります。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1649" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc5&period;png" alt&equals;"挿入とプレビューボタン" width&equals;"611" height&equals;"90" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「<strong>プレビュー<&sol;strong>」をクリックするとプレビューが表示されるので確認します。<&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>&nbsp&semi;<&sol;p>&NewLine;<p>プリセットというのは、この設定を保存していつでも利用できるようにする設定のことです。<&sol;p>&NewLine;<p>「<strong>プリセット<&sol;strong>」をポイントすると図のように表示されます<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1652" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc7&period;png" alt&equals;"プリセットボタン" width&equals;"665" height&equals;"167" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「現在の設定をプリセットとして保存」というボタンを押して名前を入力して保存します。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1651" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc8&period;png" alt&equals;"プリセット" width&equals;"580" height&equals;"159" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>すべての設定が完了したら、「<strong>ショートコードを挿入<&sol;strong>」をクリックします。<&sol;p>&NewLine;<p>図ように、投稿記事内にショートコードが挿入されます。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1653" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc9&period;png" alt&equals;"ショートコードが挿入される" width&equals;"611" height&equals;"172" &sol;><&sol;p>&NewLine;<p>サイトをプレビューすると、先ほどのプレビューで確認したのと同じように表示されているのが確認できます。<br &sol;>&NewLine; <br &sol;>&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><span style&equals;"font-size&colon; 12pt&semi;"><span style&equals;"color&colon; &num;ff00ff&semi;">例2&colon;「コンテンツ」の<strong>「ボタン」<&sol;strong><&sol;span> <&sol;span><&sol;p>&NewLine;<p>リンクボタンを作れます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><span style&equals;"background-color&colon; &num;ffff00&semi;">使用例&srarr;<&sol;span> をクリックすると例が表示されます。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1654" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc10&period;png" alt&equals;"ボタン使用例" width&equals;"580" height&equals;"838" &sol;><&sol;p>&NewLine;<p><strong>リンク<&sol;strong> リンク先のURLを入力<&sol;p>&NewLine;<p><strong>ターゲット<&sol;strong> リンク先を同じタブか新しいタブか選びます<&sol;p>&NewLine;<p><strong>スタイル<&sol;strong>  ボタンのスタイルを選びます<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1655" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc12&period;png" alt&equals;"スタイル選択" width&equals;"614" height&equals;"299" &sol;><&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-1337 aligncenter" 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-1656" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc13&period;png" alt&equals;"スタイル見本" width&equals;"590" height&equals;"419" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><strong>背景<&sol;strong> ボタンの背景の色を指定できます<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1657" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc14&period;png" alt&equals;"色を決める" width&equals;"608" height&equals;"344" &sol;><&sol;p>&NewLine;<p>図のような表示になるのでドラッグで色を決めます<&sol;p>&NewLine;<p><strong>テキストの色<&sol;strong> ボタンのテキストの色も背景色のようにドラッグで色を決めます。<&sol;p>&NewLine;<p><strong>サイズ<&sol;strong> ボタンのサイズをスライダーで指定         などなど<&sol;p>&NewLine;<p>設定は見出しの時と同じでスクロールしていって、ひとつずつ決めていきます。<&sol;p>&NewLine;<p>全部やっていると時間がかかるので以下割愛。<&sol;p>&NewLine;<p>できあがったのがこちら。<&sol;p>&NewLine;<figure id&equals;"attachment&lowbar;1659" aria-describedby&equals;"caption-attachment-1659" style&equals;"width&colon; 633px" class&equals;"wp-caption alignnone"><img class&equals;"wp-image-1659 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc15&period;png" alt&equals;"挿入したショートコード" width&equals;"633" height&equals;"483" &sol;><figcaption id&equals;"caption-attachment-1659" class&equals;"wp-caption-text">投稿画面に挿入されたショートコード<&sol;figcaption><&sol;figure>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1662" 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>プレビューがこちら。<&sol;p>&NewLine;<p>スタイル・背景色・文字色・サイズの他にアイコンも入れられるので適当にいれてみました。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>アイコンは「<strong>メディアマネージャー<&sol;strong>」と「<strong>アイコンビッカー<&sol;strong>」から選ぶことができます。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1663" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc17&period;png" alt&equals;"アイコン" width&equals;"546" height&equals;"198" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>保存してあるメディアライブラリーから写真をアイコンとしていれるとこんな感じになりました。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1664" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc18&period;png" alt&equals;"メディアからいれたアイコン" width&equals;"571" height&equals;"132" &sol;><&sol;p>&NewLine;<p>アイコンビッカーにはいろんなアイコンがあります。リンクボタンに合ったアイコンをいれることができますね。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1665" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc19&period;png" alt&equals;"アイコンビッカー" width&equals;"599" height&equals;"771" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>いろいろ試してみると楽しくブログ作りができそうです。<&sol;p>&NewLine;<p>ワクワク&sung;o&lpar;&Hat;o&Hat;o&rpar;&lpar;o&Hat;o&Hat;&rpar;oワクワク&sung;<&sol;p>&NewLine;<p>使い方は簡単に感覚でできるので、まずは使ってみる!のがいいと思います。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>次はいろいろ試してこれは便利!よく使うかも、<&sol;p>&NewLine;<p>というものをメモってみます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>前の記事<br &sol;>&NewLine;<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1569&period;html">画像キャプチャと編集ができるフリーソフトMonosnapの使い方<&sol;a> へ<&sol;p>&NewLine;<p>次の記事<br &sol;>&NewLine;<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1791&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> <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;

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