vanillaice (Akira)

vanillaice (Akira)

はてなブログさんの機能パクりというか。
まぁ、パクリ…(笑) つってもweb上では当たり前にあるレイアウトですが、やろうと思った(紹介しようと思った)のははてなさんの機能紹介を見たからなのである意味パクりかもしれんな (´・ω・`)

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

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

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

サンプル

まずはサンプルです。

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

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

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

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

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

ZIPファイル

file

上記アイコンをクリック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化を補足するものが多いが)、はてなさんのプロ会員向けサービス開発は目を見張るものがある(笑)
この機能は全会員向けのようですけどもね。
はてな運営は独特なムードがありますよね。
それはまた別の機会に。

関連記事

Comments 4

There are no comments yet.
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/10/11 (Wed) 02:35 | EDIT | REPLY |   
Akira  
To 画像タイル表示の件 内緒さん

おはようございますー ( ゚Д゚)ノ

nowrapは初期値ですので、何も書かなければ自動的にnowrapです。
flexは難しくはないけど覚えることが多すぎて大変という感じですよね ^^;

> 1枚だけの行を追加したい時〜

このhtmlを利用した時の特徴というのは
・縦横比が固定される(デフォルト 横幅:縦幅 = 1:0.65)
これですね (´・ω・`)
ですから1枚だけ掲載の直前にもタイルがあって、その画像群と縦横比を合わせたいと思うのであれば使ってください。

もうひとつ考慮すべきなのは「画像の原寸」です。
1枚だけという場合には記事画面いっぱいに横幅が自動設定されます。
Pianissimoは最大幅が770pxですので、それ以上の原寸(横幅)があるのならば問題ないと思います。
770pxに満たない場合には拡大されることになりますのでおすすめできない。

FC2は特に何もしなくても画像は掲載できます。
ただhtml構文的にはimgはpの子要素あるいはfigureで囲うのが望ましいです。
そういった定義云々を度外視して、それでもdivやpなどで囲う時というのは
「画像の位置合わせを行いたい時」が一番多いかと思います。
imgだけで位置合わせというのはdisplayプロパティの値変更をしない限り無理ですので、divで挟むとしたら位置合わせかなぁ、と思います (´・ω・`)
そして位置合わせが発生するのは画像が記事の横幅「以下」の場合だけですので、やはり原寸ないし掲載サイズの考慮ですよね。

ということで、上記内容諸々お考えの上でどうぞ。

2017/10/11 (Wed) 09:27 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/10/11 (Wed) 10:24 | EDIT | REPLY |   
Akira  
To 画像タイル表示の件 内緒さん(完了のご報告)

はい。こちらこそいつもありがとうございます

2017/10/11 (Wed) 16:32 | EDIT | REPLY |   

Leave a reply

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