サポート » 使い方全般 » 複数画像を横に並べたい

  • 解決済 mugifumi

    (@mugifumi)


    お尋ねですが、新しく作成したページに他のサイトの商品情報をHTMLで貼り付けています。
    これが複数個ありまして現時点で縦に並んでいます。
    これを横に5列ずつ並べようとしているのですがうまくいきません。
    画像だけでしたら手動で横に並べることは出来ましたが、画像付きのHTMLがどうしても
    うまくいきません。
    ご存知のかたがおられましたら是非ともご教示くださいませ。
    よろしくお願いいたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • 推奨しない方法でしたらテーブルで構成するのもひとつの手です。ただしコーディングにこだわるのであればやらないでしょうね;)

    通常考えうる方法は、divタグやpタグなどのブロック要素で囲んでfloatするのでしょうが、wordpressのxhtmlソース整形に邪魔されてうまく記述できない可能性が高いです。
    ソースがxhtmlに正確に準拠していれば自動整形されることもないと思いますので、挑戦してみてはいかがでしょうか。もちろんテーマのcssにfloat用の記述を追加しておく必要があります。

    トピック投稿者 mugifumi

    (@mugifumi)

    shokun0803さん
    ご返事ありがとうございます。

    国外のテーマを拝借していますので今の時点では自信がありません。

    >推奨しない方法でしたらテーブルで構成するのもひとつの手です。
    テーブルで構成する方法というのは以下でいいのでしょうか?

    <table style=”float:left;”><tr><td>
    コピペしたHTML
    </td></tr></table>

    <table><tr><td>
    コピペしたHTML
    </td></tr></table>

    <table><tr><td>
    コピペしたHTML
    </td></tr></table>
        ・
        ・
        ・
    ただ、この方法では2列しか表示できませんでした。
    5列にするには何か仕掛けが必要なのでしょうか?
    よろしければご教示お願いいたします。

    いや~普通にtdを5個並べてもらえば・・・

    <table>
    <tr>
    <td>コピペしたHTML</td>
    <td>コピペしたHTML</td>
    <td>コピペしたHTML</td>
    <td>コピペしたHTML</td>
    <td>コピペしたHTML</td>
    </tr>
    </table>

    あまり綺麗じゃないですけどね;)

    <ul>
      <li style="float:left">画像1</li>
      <li style="float:left">画像2</li>
      <li style="float:left">画像3</li>
      ...
    </ul>
    トピック投稿者 mugifumi

    (@mugifumi)

    douseeさん、ありがとうございます。

    shokun0803さん、HTMLが横に並びました!どうもありがとうございました。
    でも運用面となると大変なのでshokun0803さんの最初のご教示どおり
    ページテンプレートを新規に作成してやる方法に挑戦してみます。

     

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「複数画像を横に並べたい」には新たに返信することはできません。