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-10964" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;1160458&lowbar;s&period;jpg" alt&equals;"" width&equals;"384" height&equals;"255" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><strong>Shortcodes Ultimate<&sol;strong>の中でもいくつかの項目は<br &sol;>&NewLine;「これは便利!」「こんなことができるんだ!」<br &sol;>&NewLine;と思わず見つけたことに感激してしまうものもあります。<&sol;p>&NewLine;<p>今回はそんな中の「<span style&equals;"font-size&colon; 12pt&semi;"><strong>行<&sol;strong><&sol;span>」について、使い方をメモっておきます。<&sol;p>&NewLine;<p>Shortcodes Ultimateのインストール方法と基本の使い方は<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1640&period;html">以前の記事<&sol;a>で<&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>「行」の使い方<&sol;strong><&sol;span><&sol;h2>&NewLine;<p>投稿画面で「<strong>ショートコードの挿入<&sol;strong>」をクリックしたら、その中の「<strong>行<&sol;strong>」をクリックします<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1787" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc0-1&period;png" alt&equals;"sc0" width&equals;"617" height&equals;"337" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>図のような設定画面が表示されます。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-4052" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;scg1&period;png" alt&equals;"" width&equals;"346" height&equals;"171" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>「コンテンツ」の部分に文字や画像URLをいれます<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1775" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc58&period;png" alt&equals;"行のショートコード" width&equals;"567" height&equals;"485" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ここで設定するのは「コンテンツ」だけです。<br &sol;>&NewLine;プレビューで見るとこんな感じになります。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-medium wp-image-4053" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;scg3-300x71&period;png" alt&equals;"プレビュー" width&equals;"300" height&equals;"71" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>この<strong><span style&equals;"background-color&colon; &num;ffff00&semi;">1&sol;3<&sol;span><&sol;strong>の部分が行に表示する<strong>割合<&sol;strong>になります。<&sol;p>&NewLine;<p>画像をいれる場合URLをメモしておいて入力というのは面倒なので、このまま挿入します。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-4054" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;scg2&period;png" alt&equals;"挿入したコード" width&equals;"382" height&equals;"140" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ここで投稿のテキストモードで文字や画像をいれてみます。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-4055" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;scg4&period;png" alt&equals;"" width&equals;"586" height&equals;"426" &sol;><&sol;p>&NewLine;<p>図のオレンジで囲んだ部分が元々あったコードになります。<br &sol;>&NewLine;ピンクの線の部分が画像URLをいれるところです。<&sol;p>&NewLine;<p>&lt&semi;img column size&equals;&&num;8221&semi;1&sol;3&&num;8243&semi;&gt&semi;の後ろにカーソルを置いて「メディアを追加」ボタンで画像を選べばOK。<&sol;p>&NewLine;<p>あまり大きい画像サイズは入りきらないと横並びにならないこともあるので、150×150くらいに設定してみてください。<&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>例をプレビューしてみると次のようになります。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-medium wp-image-4056" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;scg5-300x99&period;png" alt&equals;"横並びプレビユー" width&equals;"300" height&equals;"99" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>画像と文字の組み合わせもできます。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1776" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc59&period;png" alt&equals;"行の例" width&equals;"593" height&equals;"181" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><span style&equals;"background-color&colon; &num;ffff00&semi;"><strong>1行が3等分<&sol;strong><&sol;span>されて、それぞれが同じ割合で表示されています。<br &sol;>&NewLine;この割合を変えてみると・・・<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1777" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc60&period;png" alt&equals;"行の割合変更" width&equals;"599" height&equals;"424" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>図のようになります。<strong><span style&equals;"background-color&colon; &num;ffff00&semi;">1&sol;4と2&sol;4と1&sol;4<&sol;span><&sol;strong><br &sol;>&NewLine; <&sol;p>&NewLine;<p>この割合を自由に変更することで、画像・文章などの配置を思うようにできますね。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-1778 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc61&period;png" alt&equals;"半々で表示" width&equals;"603" height&equals;"371" &sol;><br &sol;>&NewLine;<strong><span style&equals;"background-color&colon; &num;ffff00&semi;"><br &sol;>&NewLine;1&sol;2と1&sol;2<&sol;span><&sol;strong>の場合<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-1779 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc62&period;png" alt&equals;"割合変更" width&equals;"601" height&equals;"364" &sol;><&sol;p>&NewLine;<p><span style&equals;"background-color&colon; &num;ffff00&semi;"><strong> 1&sol;3と2&sol;3<&sol;strong><&sol;span>にして、文字を入れるところを広くした場合<&sol;p>&NewLine;<p> <br &sol;>&NewLine;<img class&equals;"alignnone size-full wp-image-1780" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc63&period;png" alt&equals;"sc63" width&equals;"567" height&equals;"311" &sol;><br &sol;>&NewLine;<span style&equals;"background-color&colon; &num;ffff00&semi;"><strong> <&sol;strong><&sol;span><&sol;p>&NewLine;<p><span style&equals;"background-color&colon; &num;ffff00&semi;"><strong>1&sol;4と1&sol;4と2&sol;4<&sol;strong><&sol;span>にして 文字の方の割合を変えることもできます。<br &sol;>&NewLine; <&sol;p>&NewLine;<p>この同じ割合を<span style&equals;"background-color&colon; &num;ffff00&semi;"><strong>1&sol;4と1&sol;4と1&sol;2にしてみる<&sol;strong><&sol;span>と、次のようになりました。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-1788 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc68&period;png" alt&equals;"割合を変える" width&equals;"560" height&equals;"305" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>コンテンツをみるとわかるように文章はそのまま書き続けると指定した割合の領域内で改行します。<&sol;p>&NewLine;<p>これを任意のところで改行したい場合は、図のように適切なところで<strong>htmlタグの<&sol;strong> <strong> &lt&semi;br&gt&semi;をいれる<&sol;strong>と改行できます。<&sol;p>&NewLine;<p>コンテンツの入れ方ですが、画像の場合はメディアライブラリなどにあるものなら、そこのURLをタグにいれてあげればOKです。<&sol;p>&NewLine;<p>画像だけを表示することもできます<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-1781 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc64&period;png" alt&equals;"画像を並べる" width&equals;"602" height&equals;"352" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>スマホでみると横並びではなく縦に並びます。<br &sol;>&NewLine; <&sol;p>&NewLine;<figure id&equals;"attachment&lowbar;1782" aria-describedby&equals;"caption-attachment-1782" style&equals;"width&colon; 486px" class&equals;"wp-caption alignnone"><img class&equals;"wp-image-1782 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc69&period;png" alt&equals;"スマホでみると" width&equals;"486" height&equals;"783" &sol;><figcaption id&equals;"caption-attachment-1782" class&equals;"wp-caption-text">スマホの場合の見え方<&sol;figcaption><&sol;figure>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><span style&equals;"background-color&colon; &num;ccffff&semi;"><strong>Shortcodes Ultimateの「ノート」を組み合わせると<&sol;strong><&sol;span><br &sol;>&NewLine;背景に色をつけることができます(^^)<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<figure id&equals;"attachment&lowbar;1784" aria-describedby&equals;"caption-attachment-1784" style&equals;"width&colon; 590px" class&equals;"wp-caption alignnone"><img class&equals;"wp-image-1784 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc65-1&period;png" alt&equals;"行とノート" width&equals;"590" height&equals;"179" &sol;><figcaption id&equals;"caption-attachment-1784" 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-1785" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc66&period;png" alt&equals;"行とノート2" width&equals;"583" height&equals;"166" &sol;><&sol;p>&NewLine;<p>この場合のコンテンツは次のようになります<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-1786 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;12&sol;sc67&period;png" alt&equals;"ショートコードのコンテンツ" width&equals;"565" height&equals;"250" &sol;><&sol;p>&NewLine;<p>投稿画面のテキストタブでノートのショートコードを追加します。<&sol;p>&NewLine;<p>行のショートコードをノートのショートコードで挟みます。<&sol;p>&NewLine;<p>他のショートコードも使い方でいろいろできるようですね(^^)<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>前の記事 <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>次の記事 <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1861&period;html">WordPressの再編集の「困った」を解決、投稿をいつもテキストモードで<&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><&sol;p>&NewLine;<p><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;

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