はてなブログの【写真をタイル状に並べる】をFC2でやってみよう

複数の写真を横一列に並べて貼り付けられるようにしました - はてなブログ開発ブログ

記事編集画面（PC版）の編集サイドバーにある「写真を投稿」タブから写真を貼り付ける際に、複数の写真を横一列に並べて貼り付けられるようにしました。これにより、簡単な手順で複数の写真をタイル状に並べることができます。

staff.hatenablog.com

もちろんFC2では「自動で」とはなりません。残念ながら。
自動にするならFC2がエディターの機能として実装してくれないことには。
ただこの手のレイアウトCSSメソッドというのはお決まりですので、それを紹介します、という記事です。
はてなさんと同じ内容かは知りません (´・ω・｀)
でも大抵こんな感じだろう、と。
そもそも全く同じである必要もないわけだけど。

サンプル

まずはサンプルです。

こんな感じですね。
はてなさんではこれをドラッグ&ドロップで簡単にできるわけです。
くどいですがFC2にこの機能はありません。

実際に使う前の準備と仕様などの説明

html及びCSSのソースコードが必要です。
雛形をZIPファイルで掲載しますのでDLしてください。
html内容はテキストファイルとして入れてあります(.htmlだと開いた時に変換されてしまうので)

.txt 拡張子のファイルは 記事を書く際に記事内容として貼り付けます。
テンプレートに貼り付けるのではなく、使いたい時に使いたい記事の編集画面で利用する、ということです。

.css 拡張子のファイルは テンプレートの「スタイルシート」(管理画面下段) の末尾に貼り付けます。
こちらはテンプレートへの貼付けです。

ZIPファイル

Download

上記アイコンをクリックDL後は解凍(ダブルクリックでできます)し、フォルダ内のそれぞれのファイル内容を開きます。

• ブラウザで開く場合にはブラウザの画面にドラッグ&ドロップで放り込む
• html専用エディターで開く

いずれかの方法になるかと思います。

注意点

独自クラス ですので、テンプレートを変更された際にはCSS内容が 無効化 されます。
html内容は記事に直接書きますので残りますが、デザインが失われます。
テンプレート変更の際は CSS内容の移植 をしてください。

テンプレートにレスポンシブを採用していない方 は、スマートフォン専用版で同一作業(テンプレートへのCSS内容追加)をする必要があります。
スマホ版を放置しないようお願いします。
レスポンシブの方は一度で済みます。

特徴

レスポンシブ対応 です。
そのため、画面幅が狭くなっても画像は折り返しません ので、あまり無茶な数を並べないよう注意してください。
多くても横並び5点ぐらいかなぁ、と思います。
実際の様子は当該記事でブラウザ幅を狭くしてご確認ください。

画像のサイズ揃えは不要です。
その代わり 画像の一部見切れが発生します。
寸足らずは起こりませんが、見切れは起こります。
綺麗に並べることが第一目的のレイアウトですので、
「画像が全部表示されない…。」
と苦にするならば最初から使わないという方向で。
デフォルトでは画像を横長で表示するようにしてあります。
ですから縦長画像については見切れ分が多くなります。
縦長画像の配置についてはCSS内容のガイダンスに従って縦横比を変更してください。

実際に使ってみよう

デフォルトのhtml内容は画像2点並びになってます。

<div class="box"><img src="" alt=""></div>

これが画像1点分ですので、並べたい枚数分複製をしてお使いください。
4点横並びにしたいのであれば、上記内容が4つ要ります。

画像のアドレスは src属性に、代替テキストは alt属性にそれぞれ入れてください。

<div class="box"><img src="ここに画像アドレス" alt="ここに代替テキスト"></div>

alt属性は必要であれば入れてくださいね。
不要だからといってalt属性自体を削除したりせず、内容なしの状態(デフォルトの状態)のままにしておいてください。
画像検索を意識するのであればalt属性は必須ですが、検索に関心が無い場合・適切な説明が見つからない場合には無理に入れる必要はありません。

新投稿画面 をお使いの方は、HTMLモードに切り替えた後、html内容をそのまま貼り付けて編集してください。
編集後は元のモード(WYSIWYG)に戻しても問題ありません。

旧投稿画面をお使いの方は

• 改行の扱い「自動」
• 改行の扱い「HTMLタグのみ」

の2手に別れるかと思います。
前者の場合には htmlソース内の改行は全て取り除いてください。
後者の場合にはそのままお使い頂けますが、記事内容の全てに改行タグが必要となります。

まとめ

使用報告等不要ですので自由にお使いください。

しかしあれですね。webサービスというのはどんどん「簡単であること」に向けて努力が進められている。
簡単なこと・直感的であることイコール「正義」みたいな。
それはそれで良いと思いますが、htmlを書けない人は今後ますます増えていくだろうなぁ、と感じます。
でも別に書けなきゃいけないわけでもない。
大勢の方にとっては簡単に高度なことができる方がありがたいわけで。

FC2も新機能などリリースラッシュですが(SSL化を補足するものが多いが)、はてなさんのプロ会員向けサービス開発は目を見張るものがある(笑)
この機能は全会員向けのようですけどもね。
はてな運営は独特なムードがありますよね。
それはまた別の機会に。