The other way round

ARTICLE PAGE

FC2「新投稿画面」利用者で画像サイズにお悩みの方向け記事

author photo

Byvanillaice (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

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
利用上のお願い (3)
ご質問の前に (2)
よくあるご質問 (1)
FC2不具合情報 (15)
割と重要なお知らせ (34)
テンプレート (68)
ブログ内限定配布 (6)
リリーステンプレート早見表 (1)
テンプレート固有機能説明 (1)
配布終了・旧作 (5)
テンプレ不具合・修正など (57)
カスタマイズ (90)
SNS (5)
FC2ブログのあれこれ (21)
webのあれこれ (8)
装飾枠 (3)
装飾枠使い方とお願いごと (1)
雑記 (32)
洋楽 (103)
50 Cent (1)
Akon (1)
All American Reject (1)
Amy Winehouse (1)
Andain (1)
A Perfect Circle (1)
Aura Dione (1)
Balint Adam (1)
Billy Talent (1)
Bliss (1)
Boyce Avenue (1)
Breaking Benjamin (3)
Breathe Carolina (1)
Catfish And The Bottlemen (0)
Damien Rice (2)
Danny Elfman (1)
Dave Matthews Band (1)
David Lee Roth (1)
Death Cab For Cutie (1)
Diary Of Dreams (2)
Digital Summer (1)
Disturbed (3)
Drowning Pool (1)
Eminem (1)
Five For Fighting (1)
Flo Rida (2)
Fort Minor (1)
Get Scared (2)
Goodnight Nurse (1)
Gotye (1)
Hoobastank (1)
InMe (1)
Ivy (1)
Jamiroquai (3)
Jeniffer Lopez (3)
Jet (1)
Kelly Clarkson (1)
Kelly Sweet (0)
Kula Shaker (1)
Late night almuni (4)
Led Zeppelin (1)
Lenny Kravitz (0)
Limp Bizkit (3)
Linkin Park (1)
Lorde (1)
Lou Reed (2)
Magic! (1)
Maroon 5 (1)
Michiko (1)
Mindless Self Indulgence (1)
Mindy Gledhill (0)
Miss Jane (1)
Muse (2)
N.E.R.D. (1)
Nickelback (1)
Nirvana (1)
Oasis (1)
Panic! At The Disco (1)
Papa Roach (1)
Pharrell Williams (1)
Radiohead (1)
Rage Against The Machine (1)
Red (1)
Red Hot Chili Peppers (3)
Rhye (2)
Rumer (1)
Sade (1)
Sarah Brightman (1)
Shakira (1)
Sixpense None The Richer (0)
Soulja Boy (1)
Steven Cooper (1)
Sting (1)
Sum 41 (2)
Taio Cruz (1)
The Fratellis (0)
The Pretty Reckless (1)
The Weepies (1)
Three Days Grace (1)
Tom Waits (2)
Travie McCoy ft. Bruno Mars (1)
TRUSTcompany (1)
Ty Stone (1)
U2 (1)
Westlife (1)
未分類(個人的テスト等) (48)