レイアウトが崩れる。

  • 不明 のアバター
    apollostationcard · メンバー ·

    レイアウト関係で大きく困っています。
    良くあるパターンが、LiveWriterで画像の下に文章が来るように編集して投稿したら画像の右などに文章が回り込んでしまう現象です。

    これをダッシュボードで修正しようとして悪戦苦闘しています。
    例えばこの記事ですが、
    http://datuzo.wordpress.com/2012/01/03/お正月のお買い物%e3%80%80フロアチェア/

    ダッシュボードでソファの下にamazletツールで作成したAmazonへのリンクを配置するのが大変でした。
    しかも何故か、改行などをダッシュボードで訂正して更新するとamazletのリンクが消えていたりします。

    下に車の写真が不規則に並んでいますが（これもLiveWriterでは綺麗に並べていましたが、ダッシュボードで編集している不規則な配置になりました。
    縦長の左側の写真の後で改行を入れると配置は直るのですがamazletのリンクが消されてしまいます。

    他の記事でもこの手のトラブルが発生していて修正が大変です。

    また、消防団の小屋の中という記事以降、何故かレイアウトが崩れているようですが、個別に記事を開くとレイアウトは正常です。

    ヘルプが必要なブログは (ログイン中のユーザーにのみ表示) です。

  • 不明 のアバター
    asazuki508 · メンバー ·

    amazletツールで作成したAmazonへのリンクの前後に<div style=”clear: both;”>

  • 不明 のアバター
    asazuki508 · メンバー ·

    　↑　誤って投稿されてしまいました…。

    amazletツールで作成したAmazonへのリンクの前後に<br style=”clear: both;”>を挿入するとうまくいくかもしれません。このタグを挿入すると、文字が右側にまわりこんだりするのを解除することができます。

    しかも何故か、改行などをダッシュボードで訂正して更新するとamazletのリンクが消えていたりします。

    タグの前後関係が崩れているために WordPress.com の自動整形機能にひっかかって amazletのリンクが消されているのかもしれません。レイアウトが崩れている理由もそのあたりが原因かと考えます。

    これもLiveWriterでは綺麗に並べていましたが

    画像を整列させる作業は、Live Writer では行わない方がいいと私は考えています。一番無難なのは、縦に整列させる方法。その他、WordPress.com のギャラリー機能を使う方法、Sky Drive のフォトアルバムを使う方法、Flickr を使う方法（私はやり方を知りませんが、そういうことをしているブログを見たことがあります）、PhotoScape を使って、画像を並べておいて、１つの画像にしてしまう、という方法などがあります。ちなみに私はWordPress.com のギャラリー機能で画像を並べることが多いです。

  • 不明 のアバター
    apollostationcard · メンバー ·

    amazletの件は参考にさせて試行錯誤させて頂きました。
    リンクが無くなるタイミングの一つに、ダッシュボードのHTML編集からビジュアルに切り替えた時になみたいです。

    別にアフィリエイトが欲しい訳じゃないので、WordPressがアフィリエイトを取る形で純正のamazletのようなツールを提供してAmazonにリンクを貼らせてもらえれば嬉しいのですが。
    運営側には是非ご検討をお願いします（貴社の収益もアップしますよ）。

    >ちなみに私はWordPress.com のギャラリー機能で画像を並べることが多いです。

    WordPressのギャラリーを使うと、その記事にある画像全てがスライドショーされるのでそれはそれで不満があったりまします。

    Photoscapeですか。なるほど。
    複数枚の写真を入れる場合は事前にフォトレタッチソフトで１つの画像にして入れる事を検討してみます。

    結局、望み通りに対処出来なかったのでテーブルとリンクでインチキしました。

    <table border="5" rules="none">
    <tr>
    <td>
    <img src="http://datuzo.files.wordpress.com/2012/01/dsc_0007.jpg?w=300" alt="" title="DSC_0007.jpg" width="220" height="165" />
    <td />
    <td>
    <img src="http://datuzo.files.wordpress.com/2012/01/dsc_0001.jpg?w=300" alt="" title="DSC_0001.jpg" width="220" height="165" />
    </td>
    </tr>
    <tr>
    <td>
    <img src="http://datuzo.files.wordpress.com/2012/01/dsc_0005.jpg?w=225" alt="" title="DSC_0005.jpg" width="225" height="300" class="alignnone size-medium wp-image-1573" />
    <td />
    <td>
    <img src="http://datuzo.files.wordpress.com/2012/01/dsc_0008.jpg?w=225" alt="" title="DSC_0008.jpg" width="225" height="300" class="alignnone size-medium wp-image-1571" />
    <td />
    <tr />
    </table>

    フレームの太さを維持したままフレームの表示を消したくて、

    <table border=”5″ rules=”none” frame=”void”>

    だったのですが、何故かframe=”void”が消されてますが、どっちみちフレームが表示されたままです。

    というのもやってみたのですが、フレームに色が付きません。
    有料会員になってスタイルシートを勉強して編集するしかないのでしょうか？

  • 不明 のアバター
    asazuki508 · メンバー ·

    リンクが無くなるタイミングの一つに、ダッシュボードのHTML編集からビジュアルに切り替えた時になみたいです。

    ここのところは当方では確認できていません。どうして消えるのでしょうね。

    WordPressのギャラリーを使うと、その記事にある画像全てがスライドショーされるのでそれはそれで不満があったりまします。

    「include」や「exclude」を使うと、特定の画像だけを表示したり、削除したりすることができます。
    （参照：Gallery — Support — WordPress.com）

    結局、望み通りに対処出来なかったのでテーブルとリンクでインチキしました。

    テーブルを使う方法もあると思います。ただし、このあたりはもう少し私の方でも検討してみないとよくわからないのですが、ちょっと確認してみた限りにおいては、table のタグで border の色などを指定しても、削除されたり、オリジナルのCSSで指定されている色がそのまま反映されたりしているような気がしますので、気軽に使いこなすのはちょっと難しいのではないかと私は思います。また、iPhone や iPad での表示のことも考えると、より一般的なものを使っていたほうが無難（適宜、技術の進化に対応してくれる等）、というのもあるかと思います。

  • 不明 のアバター
    apollostationcard · メンバー ·

    「include」「exclude」、次の機会に試させてもらいます。

    色々とありがとうございました。

  • トピック「レイアウトが崩れる。」には新しい返信をつけることはできません。