vanillaice (Akira)

vanillaice (Akira)

html初心者向け記事

悩ましいったらありゃしねー新投稿画面 (´・ω・`)

既に何度か記事にしていますのでザッとの説明ですけれど
新投稿画面は WYSIWYG がデフォルトです

* WYSIWYGエディター = 見たまんま編集 読み方: うぃじうぃぐ

つまり ソースコードの一切が表に出てきません
記事作成中に目にするのは エディターの入力補助によってhtmlが実態変換された後の姿です
それが良い時と 逆に困る時とありませんか (´・ω・`)
えー あるでしょう? (´・ω・`)
画像や動画のサイズを変更したい時 (実寸掲載したくない時) のことを言ってるんですけどもね

htmlというのはwebページを描画するのための言語です
例えば 画像
旧投稿画面だとこうですよね ↓ (クリックで拡大)



htmlソースが下に出ていて上には「リアルタイムプレビュー」で変換後の様子を教えてくれます
(画面の上下は個人設定ですので逆の方もいらっしゃいます)
つまり2段構えで記事を書いていく形式

一方 新投稿画面の方はこう ↓



ソースが出てきませんね (´・ω・`)
双方で「ちょっと画像のサイズ変えたろか…」と思ったとき
旧投稿画面は簡単ですよね
ソース出てるわけなので 該当部分の数字をチョチョっと直すだけ
ところが新投稿画面の方はソースが出てませんので 右上にある「HTML表示」ってのを使うはめになるわけです
するとどうなるか
ってのはもう散々記事にしているので割愛((((笑)

● 元画像のサイズ(実寸)での掲載を避けたい かつ「サムネイルで記事を書く」も気に入らない

こういう時だってあるでしょう
例えば記事内に画像が上下に並んでいて
上にある画像は実寸400×200
下にある画像は実寸600×300
上下の画像の横幅が異なると「統一感が無い」と感じる方も多いので揃えたいところですが
そうなると小さい方のサイズに合わせるってことになりますかね
大きい方に合わせると拡大することになって解像度が落ちますし

縦並びの場合 縦の大きさってのはほとんど気にならないんです
気になるのは「横」
逆に横並びの時は横よりも縦サイズが気になります
それが「統一感」というやつです

サムネイル掲載が選べるようになっていますが
これを選ぶとえらく画像は小さくなりますし GIF動画は静止画になります
それは避けたいというのが人の心情(笑)
結果

① 実寸を画像加工で変更 --- めんどくさいことこの上ない
② 実寸掲載を避け htmlで掲載サイズ変更 --- 楽ちん

この2択になりますね
でも新投稿画面はソース出て来んしな (´・ω・`)


画像サイズ変更はなるべく早い段階で

新投稿画面をHTML表示に切り替えるとhtmlソースが横ひと繋ぎになっていますので 該当箇所を探すのがとっても大変です


サイズの変え方

width
height

という単語を Ctrl+F(Windows)/ Command+F(Mac) キー検索 を利用して探します
画像掲載のソースはこんな ↓

<a href="画像アドレス" target="_blank"><img src="画像アドレス" alt="test1.jpg" border="0" width="900" height="736"></a>


画像を自動リンク設定にしている方は上記のようにアンカータグが付いてます
自動リンクにしていない場合はもっと簡素でこんな ↓

<img src="画像アドレス" alt="test1.jpg" border="0" width="900" height="736">


まずこれを見つけないことにはどうしようもない
そして画像をズラ~っと貼り付けした後だと特定が困難です
なのでなるべく早い段階で修正(笑)

横サイズを基準にしたい場合には 横に希望の数値を入れ
縦のサイズは auto を指定します

<img src="http://blog-imgs-93.fc2.com/v/a/n/vanillaice000/test1s.jpg" alt="test1.jpg" border="0" width="500" height="auto">


一方の値は auto にしておかないと 適当な数字を入れると縦横比が狂ってしまいます
縦横のいずれかに値を入れたら もう一方は必ず auto です
そして htmlでのサイズ指定では単位はつけません (デフォルトはpxです)
意図的にemや%などの単位に変更したい場合を除いては単位なし

この「サイズ指定」ができるだけでも随分と見た目のコントロールが楽になります
新投稿画面を常にお使いの方はhtmlソースに抵抗があるかもしれませんが
元画像を加工するよりは断然楽かと(笑)

画像の実寸は大きめにしておくのが良策だと思います
大きい画像を縮尺掲載するのは良いとして
小さい画像を拡大掲載すると 解像度がガクっと落ちてしまいます
ちなみに私は長辺1000〜1200px程度で揃えています

ってゆーかね
高解像度ディスプレイ時代ですので
これからは大きめ画像の縮尺掲載が基本だと思います

htmlで指定した内容というのは テンプレートを変更した際にも有効ですので
独自クラスなどでのCSS整形よりもおすすめ

関連記事

Comments 0

There are no comments yet.

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
2017.8.8 本日より10日ほど留守にしますのでお返事遅れます。すみません