フォーラムトピック: 商品を横に並べたい

フォーラムトピック: 商品を横に並べたい http://ja.forums.wordpress.org/ フォーラムトピック: 商品を横に並べたい en Thu, 18 Mar 2010 06:45:45 +0000 mugifumi : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11170 Wed, 28 Oct 2009 10:12:32 +0000 mugifumi 11170@http://ja.forums.wordpress.org/ <p>shokun0803さんこんにちは。</p> <p>ご教示のことを試しましたらうまくいきました。<br /> ありがとうございました。</p> <p>現時点ではV.J.Catkickに教わった方法で以下のコードを沢山（何十行でも）書いておき単純にひたすら機械的に貼り付けるという作業をしています。<br /> 我ながら非効率的なことをしているなと分かってはいるのですが今のスキルではどうすることも出来ず商売商売と自分に言い聞かせてやっています。</p> <pre><code><div style="float: left; width: 140px;" > 　　ここにHTMLを貼り付け </div></code></pre> shokun0803 : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11111 Tue, 27 Oct 2009 00:49:45 +0000 shokun0803 11111@http://ja.forums.wordpress.org/ <p>最初から記述しているテーブル<br /> <pre><code><table cellpadding="0" cellspacing="0" border="0" style="width:125px;height:200px;font-family:～～～　　　　　　　　　　・　　　　　　　　　　・　　　　　　　　　　・～～～tyle="margin: 0; border: 0;" /></td></tr></table></code></pre> <p>のstyleにfloatを入れてしまうと言うのはどうでしょう？ </p> mugifumi : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11093 Mon, 26 Oct 2009 05:16:10 +0000 mugifumi 11093@http://ja.forums.wordpress.org/ <p>V.J.Catkickさん<br /> 迅速な返信ありがとうございます。</p> <pre><code><div style="float: left; width: 100px;" >  </div> <div style="float: left; width: 100px;" >  </div></code></pre> <p>おかげさまで少し分かりかけてきました。要するに何らかの方法でこの形を作らなければならないということですね。その鍵を握るのがPHPの習得ということでしょうか。<br /> 自信がないですが勉強してみます。<br /> どうもありがとうございました。 </p> V.J.Catkick : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11092 Mon, 26 Oct 2009 04:49:07 +0000 V.J.Catkick 11092@http://ja.forums.wordpress.org/ <p>日付はあくまで並んでいる順番…ということになりますので、Pageのように入れ替えても結果は同じ（並び順が変わるだけ）になります。単に例なので、その辺は広義に捉えていただければと思います。 </p> mugifumi : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11091 Mon, 26 Oct 2009 04:39:53 +0000 mugifumi 11091@http://ja.forums.wordpress.org/ <p>ありがとうございます。</p> <p>ひとつ確認させてください。<br /> 商品を貼り付けているページですがこれは時系列に依存しないPAGEを新規に作成したものを使っているので<br /> <code>>全て商品A,B,Cがあるとして、エントリ今日、昨日、一昨日があるとします</code></p> <p>日付が絡んだ実験は出来ないような気がしています。</p> <p>ポイントがずれていたらご容赦ください。<br /> よろしくお願いいたします。 </p> V.J.Catkick : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11082 Mon, 26 Oct 2009 03:41:31 +0000 V.J.Catkick 11082@http://ja.forums.wordpress.org/ <p>もう少し具体的に書いてみます。</p> <p>全て商品A,B,Cがあるとして、エントリ今日、昨日、一昨日があるとします。</p> <p>１エントリに複数の商品（HTML）を貼る場合：<br /> 今日のエントリに商品A,B,Cと並べて貼る<br /> 同様に昨日、一昨日も貼る</p> <p>１エントリ１商品（HTML）にする場合：<br /> 今日のエントリ１に商品Aを<br /> 今日のエントリ２に商品Bを…いか繰り返し</p> <p>※先の例で挙げたサイトは１エントリ１商品のタイプになります。</p> <p>最初の例の方が商品を並べるという意味では楽になると思います。面倒なのはテーマ自体にPHPコードなりでなんらかの手を入れなければならないということでしょうか。もしそれをしないのであれば、コピペするHTMLそのものをDIVタグで囲み、そのDIVタグにfloatを付けてやれば、面倒ですがなんとかなります。つまり：</p> <blockquote><p> <div style="float: left; width: 100px;" ><br /> <br /> </div></p> <p><div style="float: left; width: 100px;" ><br /> <br /> </div> </p></blockquote> <p>とこんな感じになります。DIVタグに付けるスタイルはCSSに書き出しておくと繰り返し書かなくて済みます。</p> <p>２番目の例の方を考えると、.postなどに対してfloat属性を付ければ、およそどんな感じになるのかがわかります。例えばWordPressのdefaultテーマを例にとると、CSS（style.css）の最下行に次のCSSを追加してみて下さい。</p> <blockquote><p> .post {<br /> width: 30%;<br /> float: left;<br /> } </p></blockquote> <p>最低限のことしかしていないので見栄えは悪いですが、３つのエントリが横に並ぶはずです。</p> <p>１エントリに１商品にするか、１エントリ内部で並べるかによってやり方が違ってくるのと、やり方によってHTMLやCSS、それにPHPの知識の必要度合いが違うということになります。試してみて下さい。 </p> mugifumi : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11077 Mon, 26 Oct 2009 02:10:49 +0000 mugifumi 11077@http://ja.forums.wordpress.org/ <p>V.J.Catkick さん<br /> こんにちは。<br /> ブログ拝見させていただきました。すばらしいです。これこそやりたいことです。</p> <p>>float属性のところを勉強すると理解が早いと思います。</p> <p>これについては大分理解できました。別にホームページを作成して試したりしましたが<br /> 画像を横に並べることは自由自在に出来るようになりました。</p> <p>しかし、WordPressでとなると依然として縦並びです。<br /> <pre><code><div class="yoko5"> <?php the_content(); ?> </div></code></pre> <p>これだとすべての情報を読み込んでくるのでだめだとは分かるのですがこれ以上はどうすることも出来ません。一つのページに次々とHTMLを貼り付けるのでこれらを別々のエントリにするという方法も分かりません。<br /> よろしければ、再度ご教示くださいませんか。 </p> V.J.Catkick : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11033 Fri, 23 Oct 2009 10:26:47 +0000 V.J.Catkick 11033@http://ja.forums.wordpress.org/ <p>１エントリに付き１つの商品にする方法ならば、単に.post等に対してCSSでfloat属性をつけてやり幅を指定すれば出来ます（横にいくつまで並べるのかは、包括しているボックスの幅で決まります）。</p> <p>エントリ（つまり投稿時）に気にしたくないのであれば、テーマファイルの方で先に書いたように、the_content()を含む行をDIVで囲み、CSSでfloat:left;と幅指定をします。</p> <p>つまり、本来なら（ブログ形式なら）、毎回のエントリが縦に並ぶのを、横につめて並べる…ということになります。</p> <p>手前味噌で恐縮ですが、１エントリを横に４つ並べた場合はこんな感じ：<br /> <a href="http://nekos.kyoeitech.com/?all_images=1" rel="nofollow">http://nekos.kyoeitech.com/?all_images=1</a><br /> ２つ並べた場合はこんな感じ：<br /> <a href="http://www.vjcatkick.com/" rel="nofollow">http://www.vjcatkick.com/</a><br /> どちらも表示するためにあれこれコードを差し込んでいますが、基本は変わりません。CSSのリファレンス系サイトで、float属性のところを勉強すると理解が早いと思います。 </p> mugifumi : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11025 Fri, 23 Oct 2009 07:02:40 +0000 mugifumi 11025@http://ja.forums.wordpress.org/ <p>V.J.Catkickさん<br /> こんにちは。</p> <p>アドバイスありがとうございます。</p> <p>　<code>もしくは、商品毎に１エントリにする…という方法なら先のthe_content()をくくる方法で並ぶはずです。</code></p> <p>これは、具体的にどうすればよいのでしょうか？</p> <p>貼り付ける商品のHTMLをじっくり眺めてみました。1商品あたりのコードが長いので省略しますが概略分かったことを参考までに記述します。</p> <pre><code><table cellpadding="0" cellspacing="0" border="0" style="width:125px;height:200px;font-family:～～～　　　　　　　　　　・　　　　　　　　　　・　　　　　　　　　　・～～～tyle="margin: 0; border: 0;" /></td></tr></table></code></pre> <p>概ね一行132バイトが13行のHTMLです。</p> <p>この中に１商品のみの画像、説明文、詳細へのリンクやカートへのリンク等のコードが記述してあります。<br /> これをページ画面のHTMLで一個ずつ投稿しています。<br /> 何卒、よろしくお願いいたします。 </p> V.J.Catkick : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11023 Fri, 23 Oct 2009 04:10:41 +0000 V.J.Catkick 11023@http://ja.forums.wordpress.org/ <p>the_content()は１つのエントリの中身を全部書き出してしまうので、</p> <blockquote><p>`<div class="yoko5"><br /> <?php the_content(); ?><br /> </div>` </p></blockquote> <p>という書き方をすると全部ひっくるめて…になります。商品毎にくくらなければなりません。もし、１つのエントリ内に複数の商品があって、それを横に並べたいのであれば、エントリの編集画面（ビジュアルエディタはだめだったと思います）で、</p> <blockquote><p>`<div class="yoko5"><br /> 投稿したコード<br /> </div><br /> <div class="yoko5"><br /> 投稿したコード<br /> </div><br /> <div class="yoko5"><br /> 投稿したコード<br /> </div><br /> <div class="yoko5"><br /> 投稿したコード<br /> </div><br /> <div class="yoko5"><br /> 投稿したコード<br /> </div>`</p></blockquote> <p>と書かないとならない、ということになります。もし、１エントリ内に複数のアイテムがあり、かつ、DIVタグを手打ちしたくないのであれば、the_content()だけをくくってもダメで、個別にその部分を解析するPHPコードを差し込む必要があると思います。</p> <p>もしくは、商品毎に１エントリにする…という方法なら先のthe_content()をくくる方法で並ぶはずです。 </p> mugifumi : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11022 Fri, 23 Oct 2009 02:57:49 +0000 mugifumi 11022@http://ja.forums.wordpress.org/ <p>shokun0803さん<br /> たびたびお世話になります。</p> <p>ご指摘のとおり以下のようになっていました。</p> <pre><code><div class="yoko5"> 投稿したコード投稿したコード投稿したコード投稿したコード投稿したコード </div></code></pre> <p>うーーん、困りました。 </p> shokun0803 : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11017 Fri, 23 Oct 2009 00:12:43 +0000 shokun0803 11017@http://ja.forums.wordpress.org/ <blockquote><p>ページにHTMLコードで投稿します。それが<?php the_content(); ?>で表示されますが現在は縦に並んで生きます。</p></blockquote> <p>これがなんだか間違いの元のような気がします・・・<br /> 現在のコード（縦に並んでいるもの）をブラウザで表示させて以下のようになっていますか？<br /> <pre><code><div class="yoko5"> 投稿したコード </div> <div class="yoko5"> 投稿したコード </div> <div class="yoko5"> 投稿したコード </div> <div class="yoko5"> 投稿したコード </div> <div class="yoko5"> 投稿したコード </div></code></pre> <p>これが以下のようになっていると提示のcssではうまくいきません。<br /> <pre><code><div class="yoko5"> 投稿したコード投稿したコード投稿したコード投稿したコード投稿したコード </div></code></pre> <p>確認してみてください。 </p> mugifumi : "商品を横に並べたい" http://ja.forums.wordpress.org/topic/2670#post-11013 Thu, 22 Oct 2009 15:16:03 +0000 mugifumi 11013@http://ja.forums.wordpress.org/ <p>お世話になります。<br /> 数日前に商品を横に並べたいの質問では大変お世話になりました。<br /> おかげさまでテーブルを使っての方法で解決しましたので運用しております。<br /> 並行してCSSを勉強したので応用してみましたがやはり未熟なので思い通り動きません。<br /> 次のようにやりましたが何か根本的に間違っているのでしょうか。<br /> 何卒、お助けください。</p> <p>PHPファイルです<br /> `<div class="yoko5"><br /> <?php the_content(); ?><br /> </div>`<br /> ページにHTMLコードで投稿します。それが<?php the_content(); ?>で表示されますが現在は縦に並んで生きます。</p> <p>CSSファイルです<br /> <pre><code>.yoko5{ width:145px; margin:0 20px 20px 0; padding:0px; float:left; }</code></pre> <p>画像の大きさは125px×125pxです。 </p>