人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

HTML編集のあれこれ(8)/ エキサイトブログ

2016年 09月 19日
画像配置のためのエキサイト特殊コードは、独特のふるまいをします。 通常編集画面で文字行と画像との配置を調節しようとしても、なかなか思い通りにならないのは、新管理画面のマイナス点と言えるでしょう。

HTML編集のあれこれ(3)では、画像周囲での文字入力時の注意点を扱いました。 今回は、周囲の文字列との行間隔の調節について調べました。


先ず画像を文字列の中に配置(中央配置)します。 下図はHTML編集で、特殊コードを文字列の間に埋め込んだところで、文字列との間に改行などを入れない様にしています。

HTML編集のあれこれ(8)/ エキサイトブログ_b0174191_19321738.png

下は、これを通常編集で見たところ(通常編集A)で、前方の文字列の次行に画像が置かれ、後方の文字列は画像の次次行に置かれていることが判ります。

HTML編集のあれこれ(8)/ エキサイトブログ_b0174191_10313926.png

通常編集の画像は、システムデフォルトでは幅上限を400pxに圧縮され、上下マージンを15pxに指定されています。 上図でマージンを表示したのが下図で、画像下側にグリーンの1行が開けられているのが明確になります。

HTML編集のあれこれ(8)/ エキサイトブログ_b0174191_10314496.png

これらは通常編集画面の図で、このソースをブラウザに表示させると、文字列と画像は上下に接した状態です。(プレビューA)

試しに、画像の周囲の改行を BackSpace で削除すると(赤枠の部分)下の状態に出来ます。

HTML編集のあれこれ(8)/ エキサイトブログ_b0174191_19551576.png

しかし、一旦HTML編集を開き再び通常編集に戻ると、下の様に元の状態に戻ってしまいます。

HTML編集のあれこれ(8)/ エキサイトブログ_b0174191_19575565.png

これは、全く最初の状態と同じで、プレビューすると下の様な状態です。(プレビューA)

HTML編集のあれこれ(8)/ エキサイトブログ_b0174191_19594100.png

画像と文字列との間隔が無いレイアウトが良い場合は、通常編集で適当に画像の周囲の改行を減らしておけば、自然にこの様な結果になります。

最初はHTML編集によって文字列の間に画像を挿入する形で始めました。 しかし通常編集で、文章を書きながら画像を追加し、改行をみだりに使用せず、その後ろにまた文章を書くという作業でも、同様にプレビューAの結果となります。


さて、このままでは少し窮屈に見えるので、画像と文字列との間に1行を開けたいという場合が多いものです。 しかし、これがなかなか思い通りになりません。 先に書いた様に、この特殊コードの周りでは、改行を消しても復活する場合があり、下手をすると<center>タグが出てしまいます。 この振る舞いを上手く避けるとストレスなくレイアウト調節ができます。

文字列と画像の間に1行の空白行を置いた表示となるのは、通常編集では下図の様な状態です。(通常編集とHTML編集を往復しても、この様になる事が必要) 最初(通常編集A)の画像と比べると、画像の上下で空白行(改行)が確かに1行ずつ多くなっています。

HTML編集のあれこれ(8)/ エキサイトブログ_b0174191_20201570.png

通常編集でこの様な状態に編集しようとすると、上側の赤行の追加は簡単に出来ますが、下側を赤行2行にしてHTML編集に行って戻ると、3行になっていたりする事が良く起こります。 まるで翻弄される様で、やりなおしにいらだってしまいます。

思い通りにならない時は、HTML編集で特殊コード周辺の改行配置のパターンを、定型通りに編集してしまうのが、一番確実です。 私は、これをけっこうします。 下図は、一番綺麗に清書した状態ですが、私はこれを定型として頭に入れています。

HTML編集のあれこれ(8)/ エキサイトブログ_b0174191_20302622.png

●改行コードの配置パターンを決めておき、HTML編集でレイアウト調節する。

しかし、通常編集で編集して、なるべくHTML編集に行きたくないというのも人情です。 色々調べると、空白行を入れる際に、下図の場所にカーソルを置いて改行を入れると良い様です。 他の場所で改行を入れたり減らしたりすると、失敗の確率が増えます。

HTML編集のあれこれ(8)/ エキサイトブログ_b0174191_20390375.png

●通常編集でレイアウト調節する場合は、文字列の直近で改行を入れる。(あるいは減らす)

他にも良い方法があるかもしれませんが、実際に色々と試して特殊コード周辺での編集テクニックに慣れてしまうのが、一番だと思います。

下図は上記の方法で、画像と前後の文字列の間に空白行を入れたブラウザ表示の状態です。

HTML編集のあれこれ(8)/ エキサイトブログ_b0174191_21144764.png



エキサイト新管理画面の編集操作の実用的なマニュアルを以下に纏めています。曖昧だった編集画面のふるまいが判ると、編集能力が確実に向上します。




by Ataron | 2016-09-19 20:44 | PC環境(ハード/ソフト) | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。