amedia-online

自由が丘のカメラ好きな美容師 雨宮(amemiya)の情報発信media

ワードプレスで画像を横並びに配置する

calendar

reload

ワードプレスで画像を横並びに配置する

自由が丘美容室エクリュの雨宮(@amedia_online)です。HTMLとかCSSとか難しいですね。最近やっと色々使えるようになってきました(2017/10/16現在)

スポンサーリンク

ワードプレスで画像の横並びの方法

初心者ですが、色々と試行錯誤しながら、ブログを書いております。w最近知り合いのHPの作成をお願いされて、その中で画像を横並びにするのに下のコードを配置したので記録として書いておきます。お役にたてればいいなと。

<img align="left" src="右画像のURL" /> 
<img align="left" src="左画像のURL" />
<br clear="both">

ing1には左に来る画像をing2には右に来る画像を入れます。

 

Exif_JPEG_PICTURE

 

Exif_JPEG_PICTURE

 

※これはビジュアルエディターではなくテキストエディター行う事。メディアの呼び出しをしてその画像についているURLを挿入するとできます。そのまま挿入すると失敗します。

 

画像横並びに隙間をつける

上のコードでは画像がくっついてしまうので見栄えが良くないと思う方は下を使うと隙間ができます。僕は3px隙間を作りましたが。隙間はお好みで数字のところを変更してもらえればいいかなと思います。

<div style="float:left; margin: 3px;"> <img src="一番左画像のURL"/> 
</div>
 <div style="float:left; margin: 3px;"> <img src="2番目真ん中画像のURL"/> 
</div>
 <div style="float:left; margin: 3px;"> <img src="一番右画像のURL"/>
 </div>
 <br clear="both"/>  

 

とこんな感じになります。隙間が空いていたほうが見栄えは断然いいですね。
僕自身HTMLとCSSの知識があるわけではないのですが、必要に迫られては調べ、という方法で少しずつ学んでいこうかなというところです。
※追記というか修正(2017/10/16)
表示がずっとバグったままになっていたのに訂正をせずそのままになっていました。申し訳ありません。これで使用可能かと思います。
(今日記事で久しぶりに画像横並びを使ってきずいた。)

 

自由が丘美容室エクリュ店舗情報

新規のお客様にはエクリュではクーポンをご用意しています下の予約ボタンからごWEB予約できます。


【エクリュ店舗情報】
 〒152-0035 目黒区自由が丘2-16-16 2F

【TEL 】03-3718-7896(予約優先)

【営業時間】

平日 11:00~19:00
日・祝 10:00~18:00

【定休日】 火曜日 隔週水曜日

 

1FはMARGARET HOWELLさんです。

 

お問い合わせご質問等ありましたらこちらからご連絡ください。


 

instagramでも繋がってみませんか? followme.
@amemiya_ecru

ブログをメールで購読

SNSをやっていない方はこちらからブログの新着を受け取ることができます。

200人の購読者に加わりましょう

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




CAPTCHA


自己紹介

Amemiya Ryuichi

Amemiya Ryuichi

自由が丘の美容室エクリュでスタイリストをしています。趣味はカメラとブログと家庭菜園他にも色々多趣味で変な美容師。趣味を生かしてWEBの制作依頼から、写真の撮影依頼もこなしています。 もちろん本業が第一です。メンズカットが得意でマニアックな会話から理系男子率高めw [詳細]