サポート » 使い方全般 » 記事作成時のCSSレイアウト

  • CMSとしてワードプレスを使用しております。
    普通に写真、文言を配置するのはできるのですが、
    少し凝ったレイアウトになると、どうしてもテーブルレイアウトになってしまいます。
    どうしたらCSSレイアウトにできるのかわかりません。

    参考に、このサイトのショーケースで他サイトのソースを見ると
    きれいにレイアウトされております。

    みなさん、どのように制作されているのでしょうか。
    記事投稿欄から制作が可能なのでしょうか。

    WordPressバージョン:2.8.5

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • どんなレイアウトをやろうとしていて、それに対してどういうものを「きれいな」と表現しているのかがわかりません。
    WordPress うんぬんではなくて、css レイアウトの勉強をされたほうがよいのでは?

    また、table を使うこと自体は悪いことではなく、table は厳密に「表」という意味を持っています。
    「表」を表示するなら table を使うことは悪いことではありませんので、そのへんは誤解なさらないように。

    >>bootlegさん
    すいませ、質問に便乗させていただきます。

    投稿で、ビジュアル表示のまま、レイアウトするときに、
    ——————————————————
    例)
       画像   画像   画像   画像
      コメント コメント コメント コメント

      画像   画像   画像   画像
      コメント コメント コメント コメント

    ——————————————————
    のようなレイアウトにしたいのですが、どうしてもテーブルを使用することになってしまいます。
    テーブルを使うとどうして、携帯での表示がおかしくなってしまうので、
    テーブルは避けたいと思っています。
    あらかじめ、CSSで指定しておけば、可能なのかもしれないのですが、
    そうすると、ビジュアルエディタではなく、HTMLエディタで書かないといけなくなってしまうため、なんとかビジュアルエディタのほうで再現できませんでしょうか?

    画像とコメントのペアで出力されるだけなら、ギャラリーショートコードを使用すればいいと思います。コメントは各画像のキャプション欄に入力しておきます。

    お使いのテーマによっては CSS にスタイルを追加する必要があるかもしれませんが、WordPress 本体で実装されている機能なのでひょっとするとお使いのテーマでもそのまま使用できますよ。

    # 他の方がどのように複雑なレイアウトを実現されているのか、ちょっと分かりかねますが、私の場合はショートコードとフィルタを組み合わせ、自作プラグインの導入やテーマの functions.php に自作関数を追加しています。投稿ごとの特殊な値の入力にはカスタムフィールドを使用しています。

    mizubeさん以外のアプローチとして、普通に回り込ませるとか?

    <div style="float: left; width: 50px;">
    画像タグ<br />
    ここに説明
    </div>
    <div style="float: left; width: 50px;">
    画像タグ<br />
    ここに説明
    </div>
    <div style="float: left; width: 50px;">
    画像タグ<br />
    ここに説明
    </div>
    <div style="float: left; width: 50px;">
    画像タグ<br />
    ここに説明
    </div>
    <div style="float: left; width: 50px;">
    画像タグ<br />
    ここに説明
    </div>

    みたいな感じ。
    表示しきれなくなれば、そこまでで改行するでしょうし。
    xhtml で かつ、インラインスタイルシートにしておかないと機種依存するかもですが。

    あ、アイコンの色が同じなので同じ方かと勘違いしていました。失礼しました。
    ギャラリーの方は prego さんへの返信、 # を行頭に付けた内容は bootleg さんに宛てたもの、ということになります。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「記事作成時のCSSレイアウト」には新たに返信することはできません。