amaryllis_watch の回答履歴

このような、FBの画像は、どうやって作るのでしょうか？

livedoorのブログのレイアウトをカスタムしているんですが、どうしてもレイアウトの崩れを回避出来ずに困っています。 具体的な症状ですが、記事本文にjavascriptタグを記入するとサイドバーの位置がおかしな場所にズレてしまいます。 本文のタグを消すと元通り、正常な表示になります。 レイアウトは２カラムで、本文の位置、内容共に問題無く表示されますが、本来本文の真横にサイドバーが来るハズなのに、本文が終わった最下部の位置からようやく表示されます。 参考イラストがこちらにあります。 【https://www.dropbox.com/s/3j1lwr40klm949i/%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%BA%E3%83%AC%E3%80%80%E8%B3%AA%E5%95%8F.jpg?dl=0】 ※参考イラストでは『次の記事　前の記事のボタン』が崩れている場面においても記事本文下に正常表示されていますが、これは色々試している中で正常な表示になる事もあった位の話で、これらのボタンも位置がおかしく、サイドバーの部分に表示だったりとおかしくなっています。　 試した事は以下です。 (1)cssに記述されている『#main-inner』や『#sidebar』の箇所のwidthやpaddingの数値を変更。 （以前スクリプトを本文に記述していない頃、レイアウト決めで今回と同じようにサイドバーが正常位置に表示されない事があり、その際は単に横幅が足りなかっただけのようで、数値を調整する事で正しい元の位置に表示できましたが、今回は以前のそれとは関係ない模様） (2)htmlの</div>の位置や書き忘れ 原因を調べている段階でこちらのサイトを見つけ、 【https://sagadylan.com/blog-layout-fix/】 今回の原因はコレと同じ原理なのではと色々試してみましたが、何分cssやhtmlに詳しい訳ではないので解決までのイメージがイマイチ理解出来ていません。 とりあえず物は試しとhtmlの怪しそうな箇所に</div>を記入しては戻し記入しては戻しと試してみたりもしました。 今回のレイアウトはlivedoorが用意しているテンプレートを使用していますが、 ちょこちょこ色を変えたりボーダーラインを四隅にひいたりと変更しているので、 知らないうちにDivタグを付け忘れてしまった、或は本来あるべき位置ではなく別の場所に終了タグを置いてしまっているのか… もし解決に必要な情報が他にあれば、回答の際に教えて頂けるとお礼欄にて追記させて頂きたいと思います。

livedoorのブログのレイアウトをカスタムしているんですが、どうしてもレイアウトの崩れを回避出来ずに困っています。 具体的な症状ですが、記事本文にjavascriptタグを記入するとサイドバーの位置がおかしな場所にズレてしまいます。 本文のタグを消すと元通り、正常な表示になります。 レイアウトは２カラムで、本文の位置、内容共に問題無く表示されますが、本来本文の真横にサイドバーが来るハズなのに、本文が終わった最下部の位置からようやく表示されます。 参考イラストがこちらにあります。 【https://www.dropbox.com/s/3j1lwr40klm949i/%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%BA%E3%83%AC%E3%80%80%E8%B3%AA%E5%95%8F.jpg?dl=0】 ※参考イラストでは『次の記事　前の記事のボタン』が崩れている場面においても記事本文下に正常表示されていますが、これは色々試している中で正常な表示になる事もあった位の話で、これらのボタンも位置がおかしく、サイドバーの部分に表示だったりとおかしくなっています。　 試した事は以下です。 (1)cssに記述されている『#main-inner』や『#sidebar』の箇所のwidthやpaddingの数値を変更。 （以前スクリプトを本文に記述していない頃、レイアウト決めで今回と同じようにサイドバーが正常位置に表示されない事があり、その際は単に横幅が足りなかっただけのようで、数値を調整する事で正しい元の位置に表示できましたが、今回は以前のそれとは関係ない模様） (2)htmlの</div>の位置や書き忘れ 原因を調べている段階でこちらのサイトを見つけ、 【https://sagadylan.com/blog-layout-fix/】 今回の原因はコレと同じ原理なのではと色々試してみましたが、何分cssやhtmlに詳しい訳ではないので解決までのイメージがイマイチ理解出来ていません。 とりあえず物は試しとhtmlの怪しそうな箇所に</div>を記入しては戻し記入しては戻しと試してみたりもしました。 今回のレイアウトはlivedoorが用意しているテンプレートを使用していますが、 ちょこちょこ色を変えたりボーダーラインを四隅にひいたりと変更しているので、 知らないうちにDivタグを付け忘れてしまった、或は本来あるべき位置ではなく別の場所に終了タグを置いてしまっているのか… もし解決に必要な情報が他にあれば、回答の際に教えて頂けるとお礼欄にて追記させて頂きたいと思います。

HP作成練習をしています。 http://webkisomondai.jounin.jp/practice_ouyou/drill01.html#menu14 一番下の基本的な3カラムレイアウトその１のフラワーショップのHPなのですが、 右上のご注文方法、プライバシーポリシー、お問合わせのところを右上にするやり方が分かりません。 前にoverflowを使ってできたような気もするのですが使い方もわからなくなりました。一番やりやすい方法があれば教えて下さい。 それと、3カラムの一番右側の列がうまく右側に入らず、フッターの上のところにきてしまいます。bodyとheaderを1000pxの幅で設定し、1つ目は、210、真ん中は580、3つ目は190にして、真ん中と三つ目にfloat:rightを設定しています。 初心者なのでわかりやすく教えていただけると助かります。よろしくお願いします。

お疲れ様です。 横並びのアルバムについて質問です。columnボックスに見出し＜ｈ４＞と画像、説明文の＜ｐ＞が入っています。見出しの文字数と説明文の長さは一定ではないので、column内の要素の位置がそれぞれ違います。 これを画像の頭部分で高さを揃えることはｃｓｓだけで実現できるでしょうか。 見出しと説明文どちらかがなければcolumnにinline-blockを指定してあげればよいのですが。 お知恵を貸していただければと思います。 ※画像の大きさは一定です。 <div class="column4"> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキスト</p></div> </div> </div>

コンテンツを並べるレイアウトについて質問をお願い致します。 2列ずつに写真とテキストを並べるレイアウトを作りたいと考えていますが次の3つの条件を満たしたいです。 1．コンテンツの数は今後増える可能性があり、コンテンツが奇数の場合最後のコンテンツは左の列に配置したいです。 2．説明テキストの行数は一定ではなくコンテンツごとに変わりますが、その場合でも高さのズレを起こしたくないです。 3．スマートフォン（480px以下）で閲覧した場合は、2カラムレイアウトから1カラムレイアウトに切り替えて、1列で表示をさせたいです。 この3つの条件を満たせるcssの方法はありますでしょうか。 現在はFlexboxを使用していますが、もしFlexbox以外で同じレイアウトが可能であるか知りたいと思い質問させていただきました。 よろしくお願い致します。 参考URL：http://muko.hiho.jp/shoshin/

お疲れ様です。 横並びのアルバムについて質問です。columnボックスに見出し＜ｈ４＞と画像、説明文の＜ｐ＞が入っています。見出しの文字数と説明文の長さは一定ではないので、column内の要素の位置がそれぞれ違います。 これを画像の頭部分で高さを揃えることはｃｓｓだけで実現できるでしょうか。 見出しと説明文どちらかがなければcolumnにinline-blockを指定してあげればよいのですが。 お知恵を貸していただければと思います。 ※画像の大きさは一定です。 <div class="column4"> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキスト</p></div> </div> </div>