attention admin about comments trackbacks you may also like

【複数の画像を一括で挿入できるようになりました】という新機能アナウンスがありました

2020年03月11日
FC2ブログのあれこれ
5
Information

テンプレートの審査に妙に時間がかかっているときは大抵新機能導入やシステム変更中 (´・ω・`)

【ブログ】複数の画像を一括で挿入できるようになりました

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-alignbottom のままにしておき、img要素(これが画像です) への margin-bottom: 数値px で指定するのが望ましいですね。毎回同じ余白にしたい場合はスタイルシートに、その都度作成するなら style属性 を利用します。いずれかの方法で画像の「下」に余白をつけておくと良いと思います。

style属性 を利用する場合は htmlタグを扱えるモード でないといけませんので、旧投稿画面ならばWYSIWYG(高機能エディター)以外、新投稿画面ならばHTMLモードをそれぞれ利用することになります。

小さい画像

後続の画像と横幅を足して記事横幅よりも小さい場合は横に並びますが 左右の余白は発生しません。

【パソコンでの様子】

そして どのデバイスから見ても横に並ぶとは限りません。

【スマホでの様子】

ここを理解していないとちょっと使いこなしが難しいかもしれませんね。まず横の余白ですが、最も簡単なのは画像の右横にカーソルを入れて 半角スペース を打つことです。おすすめはしませんが簡単。少しテクニカルな方法を取るならばやはり margin-right: 数値px を指定。横の余白の場合縦余白と違い style属性 で行うのがベター。

並びを制御したい場合は以下の記事を参照のこと。

レスポンシブテンプレートで画像を横に並べる方法

レスポンシブデザインテンプレートでの画像の横並べがちょっとコツが要るんですね (´・ω・`) htmlコード的コツと併せて 思考のコツ も必要です。今回は画像の並列htmlソースコードをいくつか提案しようと思います。...

まとめ

便利は便利なんですが「横」の並びに注目したときにやはりなかなか思い通りにいかないなぁ、という場面も巡ってくるかもしれませんね。といってもFC2が悪いわけでなく物を横に並べるというのは元々そういう性質なのでどうしようもない。自身の理解とスキルを育てるしか (∵`)

とはいえ作業の簡略化は歓迎できるのではないでしょうか。あとはマウスドラッグによる画像サイズ編集が可能になるとかなり直感的になるのかなぁ、と。特に他サービスから移転された方にとっては必要かもしれませんね。

というわけで新機能についてのちょっとした説明でした。

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(5)

There are no comments yet.

深緑の女魔術師

2020/03/12 (Thu) 18:41

これは便利!

深緑の女魔術師です。

毎回2、30個ほどの画像載せてたので、
名前などで絞って一括選択からの一括挿入は、
私的にめちゃくちゃ便利で感動です。
(1個ずつクリック挿入で稀に抜けもあったし…)

言われなきゃ気づか鳴ったので、
有益な情報ありがとうございます。

ってことで、
公式のブログは見ないとダメ?

以上です。

Akira

2020/03/12 (Thu) 22:22
vanillaice (Akira)

To 深緑の女魔術師さん

こんばんは ('0')/

2〜30の手順を1まで減らせれば時短効果バツグンですね(笑)
はい。公式ブログはできるだけ目を通した方が良いと思います。といっても言葉足らずだったり、アナウンスなし、なんてことも ^^;

hige

2020/03/13 (Fri) 17:16

これ旨くいかない

便利になったと思ったのですが、これまずいですねぇ。
色々やったのですが、ファイル名の順に記事に貼付けられません。

もうちょっと確認してみますが。
それでもダメなら、FC2に問い合わせします。

hige

2020/03/13 (Fri) 21:11

追伸:検証結果

「複数ファイル挿入」で、どのような不具合が出ているか。
まず、環境設定→ブログの設定→投稿設定→画像の枠 で「何もせず」に設定しておくと画像の img タグの中に border 属性は記入されないことになってますが、「複数ファイル挿入」で画像を挿入すると border="0" (HTML5ではなくなった属性)が入ってしまいます。

次のテストは私がアップロードしたファイルの20200227001~20200227020迄の連番ファイルで行いました。
アップロードされたこのファイルは下から昇順に並んでおり、アップロード日付時刻も下から昇順です。

画像の挿入順序はアップロードされた画像リストの左端の□にチェックを入れた順序となるようです。
ところが -〃-001 から順番に -〃-020 まで選択して「複数ファイル選択」を行うと
-〃-001 から -〃-009 までは昇順に記事に挿入されるのに、-〃-10 から -〃-20 は降順に挿入されてしまいます。
明らかなバグですね。

最後に思ったのですが、記事に挿入するファイルを選択するのに、shiftキーを押しながら2ヶ所を選択するとその間のファイルも一挙に複数選択するという方法には対応していません。つまりチェックマークをひとつずつ全て入れなければならない。
なので、ファイルをひとつずつ選択して記事に挿入する方法と手間があんまり変わらない。

最初はすげー便利そう! と 思ったのですが、これはなくてもいいかな と

以上、同じ内容をFC2カスタマーにおくってみます。

Akira

2020/03/13 (Fri) 21:45
vanillaice (Akira)

To higeさん

higeさん、こんばんは ('0')/
私の方でも検証してみますね。並び順が選択順であるのは正解というかそうでないといけないので、shiftの複数選択についても「順序」の明示が必要ということになるから使えないのは仕方ないのかなぁ、と思います。

とはいえその選択順序に従わない、というバグがあるってことですよね。アカンやん(笑)
とにかく調べてみますー (o'ω')ノ

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧