Shortcodes Ultimateの行で文字も画像も横並び

 

Shortcodes Ultimateの中でもいくつかの項目は
「これは便利!」「こんなことができるんだ!」
と思わず見つけたことに感激してしまうものもあります。

今回はそんな中の「」について、使い方をメモっておきます。

Shortcodes Ultimateのインストール方法と基本の使い方は以前の記事

スポンサーリンク

 

「行」の使い方

投稿画面で「ショートコードの挿入」をクリックしたら、その中の「」をクリックします

sc0

 

図のような設定画面が表示されます。

 

「コンテンツ」の部分に文字や画像URLをいれます

行のショートコード

 

ここで設定するのは「コンテンツ」だけです。
プレビューで見るとこんな感じになります。

プレビュー

 

この1/3の部分が行に表示する割合になります。

画像をいれる場合URLをメモしておいて入力というのは面倒なので、このまま挿入します。

挿入したコード

 

ここで投稿のテキストモードで文字や画像をいれてみます。

図のオレンジで囲んだ部分が元々あったコードになります。
ピンクの線の部分が画像URLをいれるところです。

<img column size=”1/3″>の後ろにカーソルを置いて「メディアを追加」ボタンで画像を選べばOK。

あまり大きい画像サイズは入りきらないと横並びにならないこともあるので、150×150くらいに設定してみてください。

 

スポンサーリンク

 

 

例をプレビューしてみると次のようになります。

横並びプレビユー

 

画像と文字の組み合わせもできます。

行の例

 

1行が3等分されて、それぞれが同じ割合で表示されています。
この割合を変えてみると・・・

行の割合変更

 

図のようになります。1/4と2/4と1/4
 

この割合を自由に変更することで、画像・文章などの配置を思うようにできますね。

 

半々で表示

1/2と1/2
の場合

 

割合変更

 1/3と2/3にして、文字を入れるところを広くした場合

 
sc63
 

1/4と1/4と2/4にして 文字の方の割合を変えることもできます。
 

この同じ割合を1/4と1/4と1/2にしてみると、次のようになりました。

 

割合を変える

 

コンテンツをみるとわかるように文章はそのまま書き続けると指定した割合の領域内で改行します。

これを任意のところで改行したい場合は、図のように適切なところでhtmlタグの  <br>をいれると改行できます。

コンテンツの入れ方ですが、画像の場合はメディアライブラリなどにあるものなら、そこのURLをタグにいれてあげればOKです。

画像だけを表示することもできます

画像を並べる

 

スマホでみると横並びではなく縦に並びます。
 

スマホでみると
スマホの場合の見え方

 

Shortcodes Ultimateの「ノート」を組み合わせると
背景に色をつけることができます(^^)

 

行とノート
行とノートを組み合わせると背景に色をつけられる

 

行とノート2

この場合のコンテンツは次のようになります

ショートコードのコンテンツ

投稿画面のテキストタブでノートのショートコードを追加します。

行のショートコードをノートのショートコードで挟みます。

他のショートコードも使い方でいろいろできるようですね(^^)

 

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

次の記事 WordPressの再編集の「困った」を解決、投稿をいつもテキストモードで

WordPress一覧へ


にほんブログ村


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

アバター画像

投稿者: 波空

波空です、こんにちは。 好きなことを自由にやりたくてブログアフィリエイトにチャレンジするも、なかなか成果はでなくて今に至るです(^^ 好きなことやりたいことはたくさんあるけど、とにかく時間とお金がないことには走り出せない。 好きなものは アニメ・漫画 ゲーム 絵を描くこと パソコンで遊ぶこと 中島みゆきさんの歌 やりたいことは・・ 空を飛びたい 馬に乗って自由に走り回りたい 猫を飼いたい 自由に好きな時に行きたいところに行きたい・・ いろいろあるけど、まずは資金と自由な時間を確保できないと進まない。 日々どうしたらできるか考えながらゲームやアニメで遊んでいる毎日。。 現在リアル仕事が2つあるので、当面の目標は仕事を1つにすること。

コメントを残す

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