Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

初心者のための

画像を並べたい!画像の横に文字を表示させたい!

2018/12/08
 

 

 

 

 

画像をアップすると、小さめのサイズだと右側が開いちゃいますよね。

画像を並べたり、文字を画像の横に入れたいなぁって思って。

しばらくはまぁいいかって、そのままにしてたんですよね。

 

やっぱり、画像を並べたいし、文字を入れたい!

ってことで調べたのでご紹介しますね。

 

table

調べていたら、tableを使うと画像を横に並べられるって書いてあって、さっそく試してみました。

 

<table><tr><td>画像</td><td>画像</td></tr></table>

ビジュアルじゃなくて、テキストの方に入力して、画像のところに実際のコードを貼り付ければOK。


やったー。画像が横に並んだ。って思ったんだけど、枠があったほうが良いときもあるけど、枠があるのがちょっと・・・

というか、書かれてあった記事いくつか見たんだけど、どれも枠なかったんだけどな・・

 

float

 

色々調べていたら、枠なしで横に並べる方法見つけました。

これも、ビジュアルじゃなくて、テキストに入力します。

 

<div style=”float:left; margin: 20px”>
<img src=”画像” />
</div>
<div style=”float:left; margin: 20px”>
<img src=”画像” />
</div>
<div style=”clear: both;”></div>

 

画像のところには、http://~ を貼り付けてください。

上手く画像が並びました!
並んだんだけど、コードを触るのが苦手だとちょっと難しいかなぁ・・・
なんだか、ちょっと失敗して、”とか削除したし・・・
次は画像の横に文字を並べたいなぁ!

align

これも、ビジュアルじゃなくて、テキストに入力します。
<img src=”画像” align=”left” hspace=”20″ />
画像のところには、http://~ を貼り付けてください。

 


ブドウの画像の横に文字を表示させたい。余白がたくさんあるとそう思いますよね?
やったぁ。表示された!

 

これもちょっと、コードを触るの苦手だと難しいかも・・

 

Shortcodes Ultimate

 

色々調べていたら、Shortcodes Ultimateというプラグインを使えば簡単に、画像も横に並べられるし、画像の横に文字も入れられるって。

 

プラグインインストール方法は簡単なんだけど、下記の記事のインストール方法で確認してみてください!

関連記事

 

 

そしてこのプラグイン。私は、おススメのプラグインってことで、一番最初に入れていました・・・またこのパターン・・・

 

 

 

 

 

 

 

「ショートコードを挿入」をクリックすると、下の画面が出てきます。

 

 

「Columns」をクリックします。(Columnsじゃなくて行のこともあるようです。)

 

 

「ショートコード」を挿入をクリックすると、コンテンツの部分が記事に追加されます。

 

列のコンテンツの部分に、画像や文字を挿入することで、画像を並べたり、画像の横に文字を入れたりできます。

 

画像の上からじゃなくて、少し下から文字を入れたかったので、エンターで改行してから文字を入れました。

 

 

右側に文字を入れたい!

そうすると、こんな感じに表示されます。

 

ちなみに、1/2を変えると、幅の調節ができます。

 

今度は上から表示してみました。

 

こんな感じで表示されるようになります。

 

しっかりアドセンスの本を紹介したりして!

 

どうでしょう?

 

まとめ

 

画像を並べたいな。画像の横に文字を表示させたいなって思って、色々調べたけれど、一番最初にプラグイン入れていました・・・

 

なんだかそのパターンが多いので、入れてるプラグインに何があるのか、どうやって使うのか、調べた方がよさそう・・・

 

あんまりプラグイン入れると重くなるらしいので、他に入れたいプラグインがあったら、コードで書く方法に切り替えようかな・・・・

 

ではまた!まみでした。

 

 

 

 

 

- Comments -

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

Copyright© ワードプレスお困りごと講座 , 2018 All Rights Reserved.