テンプレートの審査に妙に時間がかかっているときは大抵新機能導入やシステム変更中 (´・ω・｀)
【ブログ】複数の画像を一括で挿入できるようになりました
FC2 (fc2.com) をご利用いただき、誠にありがとうございます。この度、FC2ブログ (blog.fc2.com) においてご要望いただいていたファイルの一括挿入ができるようになりました。...
機能名称としては 複数ファイル挿入 及び 複数サムネイル挿入 ということのようです。
「複数ファイル(or サムネイル)挿入」の目的
要は複数枚の写真をブログ記事に掲載したい場合に
① ツールアイコンクリック
↓
② 画像選択(1枚)
↓
③ 「この画像で(or サムネイルで)記事を書く」をクリック
この作業を枚数分繰り返す(5枚なら掛けることの5回)
繰り返しが面倒やんけ、ということですよね。そこで今回新たに導入された機能を用いると
① ツールアイコンクリック
↓
② 画像選択(複数枚)
↓
③ 「複数ファイル(or サムネイル)挿入」をクリック
5枚でも10枚でもこの3工程で完結
作業の短縮化・効率化のための機能です。画像掲載数が多く、特に連続して掲載したい方にとっては便利ですね。連続でなくとも掲載が予想される画像を前もって表示させてから文章を書き入れるとか。使い方によってはなかなか便利な機能ではないでしょうか。
どんな表示形態になるのか
実際にこの機能を利用するとどうなるか、についてです。FC2お得意の テンプレートによって異なる になるのですが、記事横幅よりも大きな画像が掲載されたときに画像が記事から はみ出す あるいは 右側が見切れる(表示カットされる) という類のテンプレートはもうお話になりませんので今回は無視します。それらを無視するとどのテンプレートでも大体同じ形態です。
大きい画像
3枚掲載するとして、後続の画像と横幅を足して記事横幅を超える場合は横に並びませんので、縦に並ぶことになります。これ単純な物理法則です。そして 画像同士の上下の余白 については テンプレートの画像に関する vertical-align指定 に依存します。
【vertical-align: baseline】--- ブラウザデフォルトスタイル
【vertical-align: bottom】--- 弊テンプレートの指定はこちら
違いがわかりますでしょうか。baseline の方は画像間に少し余白があり、一方 bottom の方は余白なしてぴったりくっついています。
画像の上下というのは離すよりもくっつけるほうが難しいんですね。離すのは <br> による改行(旧投稿画面の改行の扱い「自動」及び新投稿画面の場合はEnterキー押下するだけ)でも余白は作れますが、元々ある余白を取り除くのは困難です。困難といってももうここで正解出てますから、vertical-align の値を変更するだけです。
ただし <br> 改行コードによる余白作成はおすすめしません。方針を変更したくなったときにこの <br> の取り除きあるいはmarginでの操作などが非常に困難だからです。画像間に余白を取りたい場合はvertical-align は bottom のままにしておき、img要素(これが画像です) への margin-bottom: 数値px で指定するのが望ましいですね。毎回同じ余白にしたい場合はスタイルシートに、その都度作成するなら style属性 を利用します。いずれかの方法で画像の「下」に余白をつけておくと良いと思います。
style属性 を利用する場合は htmlタグを扱えるモード でないといけませんので、旧投稿画面ならばWYSIWYG(高機能エディター)以外、新投稿画面ならばHTMLモードをそれぞれ利用することになります。
小さい画像
後続の画像と横幅を足して記事横幅よりも小さい場合は横に並びますが 左右の余白は発生しません。
【パソコンでの様子】
そして どのデバイスから見ても横に並ぶとは限りません。
【スマホでの様子】
ここを理解していないとちょっと使いこなしが難しいかもしれませんね。まず横の余白ですが、最も簡単なのは画像の右横にカーソルを入れて 半角スペース を打つことです。おすすめはしませんが簡単。少しテクニカルな方法を取るならばやはり margin-right: 数値px を指定。横の余白の場合縦余白と違い style属性 で行うのがベター。
並びを制御したい場合は以下の記事を参照のこと。
レスポンシブテンプレートで画像を横に並べる方法
レスポンシブデザインテンプレートでの画像の横並べがちょっとコツが要るんですね (´・ω・｀) htmlコード的コツと併せて 思考のコツ も必要です。今回は画像の並列htmlソースコードをいくつか提案しようと思います。...
まとめ
便利は便利なんですが「横」の並びに注目したときにやはりなかなか思い通りにいかないなぁ、という場面も巡ってくるかもしれませんね。といってもFC2が悪いわけでなく物を横に並べるというのは元々そういう性質なのでどうしようもない。自身の理解とスキルを育てるしか (∵`)
とはいえ作業の簡略化は歓迎できるのではないでしょうか。あとはマウスドラッグによる画像サイズ編集が可能になるとかなり直感的になるのかなぁ、と。特に他サービスから移転された方にとっては必要かもしれませんね。
というわけで新機能についてのちょっとした説明でした。
There are no comments yet.