画像はコンテンツのかなめ!画像ブロックを改善しました

画像はホームページの最重要コンテンツの1つです。
例えばホテル予約サイトを利用している際、画像を見るためだけに公式サイトを探す人もいるでしょう。
まめわざでは、写真を綺麗に見せるために画像ブロックにこだわってきましたが、このたび「画像の装飾」機能を大幅にリニューアルし更に自在な表現が可能になりました。
ここでは使用例や新機能のポイントを解説します。

新しい雛形の使用例

以下は雛形の一部です。このように雛形を選ぶだけでも様々な表現が可能です。

シンプルな枠付き

画像の中に丸めたテキスト

春について立春・雨水・啓蟄・春分・清明・穀雨は春の二十四節気です。
夏について立夏・小満・芒種・夏至・小暑・大暑は夏の二十四節気です。
秋について立秋・処暑・白露・秋分・寒露・霜降は秋の二十四節気。
冬について立冬・小雪・大雪・冬至・小寒・大寒は冬の二十四節気です。

真ん中にアイコンをつけたボタン風

テキストを上に配置して説明書き風

春について立春・雨水・啓蟄・春分・清明・穀雨は春の二十四節気です。
夏について立夏・小満・芒種・夏至・小暑・大暑は夏の二十四節気です。
秋について立秋・処暑・白露・秋分・寒露・霜降は秋の二十四節気。
冬について立冬・小雪・大雪・冬至・小寒・大寒は冬の二十四節気です。

縦列配置の「画像+見出し+文章」セット

春について立春・雨水・啓蟄・春分・清明・穀雨は春の二十四節気です。
夏について立夏・小満・芒種・夏至・小暑・大暑は夏の二十四節気です。
秋について立秋・処暑・白露・秋分・寒露・霜降は秋の二十四節気。
冬について立冬・小雪・大雪・冬至・小寒・大寒は冬の二十四節気です。
春について立春・雨水・啓蟄・春分・清明・穀雨
夏について立夏・小満・芒種・夏至・小暑・大暑
秋について立秋・処暑・白露・秋分・寒露・霜降
冬について立冬・小雪・大雪・冬至・小寒・大寒

小さめの丸い画像+枠+矢印のボタン風

画像ブロックの使い方

写真をアップロード

画像ブロックの使い方は変わっていません。
「画像をアップロード」からファイル選択、または「URLからコピー」でネット上の画像を設置できます。「+追加」から無制限に画像を登録できます。

自動でタイトル行ができる文章欄

「文章」欄に入力した内容が画像に付記されます。
1行目はタイトルとして2行目以降と異なる装飾ができるので「見出し+文章+画像」のセットとして利用できます(1行目と2行目の境界には改行が必要です)。

画像ブロックの装飾

並列数

今回のリニューアルにより、画像は枚数に合わせて無制限に並列表示されるのが標準となりました。
装飾メニューの「並列数」では、この並列数をコントロールできます。
また、スマートフォン(縦持ち)では標準で縦列表示するようになりましたが、「スマホでも並列」のチェックによってこれをコントロールできます(横持ちの場合は通常、並列が維持されます)。

1列の例

春について立春・雨水・啓蟄・春分・清明・穀雨は春の二十四節気です。
夏について立夏・小満・芒種・夏至・小暑・大暑は夏の二十四節気です。
秋について立秋・処暑・白露・秋分・寒露・霜降は秋の二十四節気。
冬について立冬・小雪・大雪・冬至・小寒・大寒は冬の二十四節気です。

2列の例

春について立春・雨水・啓蟄・春分・清明・穀雨は春の二十四節気です。
夏について立夏・小満・芒種・夏至・小暑・大暑は夏の二十四節気です。
秋について立秋・処暑・白露・秋分・寒露・霜降は秋の二十四節気。
冬について立冬・小雪・大雪・冬至・小寒・大寒は冬の二十四節気です。

3列の例

春について立春・雨水・啓蟄・春分・清明・穀雨は春の二十四節気です。
夏について立夏・小満・芒種・夏至・小暑・大暑は夏の二十四節気です。
秋について立秋・処暑・白露・秋分・寒露・霜降は秋の二十四節気。
冬について立冬・小雪・大雪・冬至・小寒・大寒は冬の二十四節気です。

4列の例

春について立春・雨水・啓蟄・春分・清明・穀雨は春の二十四節気です。
夏について立夏・小満・芒種・夏至・小暑・大暑は夏の二十四節気です。
秋について立秋・処暑・白露・秋分・寒露・霜降は秋の二十四節気。
冬について立冬・小雪・大雪・冬至・小寒・大寒は冬の二十四節気です。

縦横比

写真はカメラによって縦横比が異なります。これをワンクリックの選択だけで自在に設定できます。また、使い勝手の良い丸や正方形もご用意しました。

元のサイズ
(元の縦横比)

正方形

デジカメ
(4:3)

スマホ
(16:9)

スマホ縦
(9:16)

画像と文章の配置

今回のアップデートにより、文章は標準で画像の下に表示されるようになりました。
この他、「テキストの位置」欄で選択することで、

  • 画像の中に文字を入れる
  • 画像の上に文字を配置する
  • 画像の左右に文字を配置する
  • 左右交互、上下交互に配置する

といった選択肢が増えました。

説明文と画像の横幅を調整

画像の入れ物に対する画像のサイズを調整できるようになりました。
これにより、説明文の横幅と画像の横幅をコントロールできます。

画像付きリンクボタン

moreや矢印などを設置できるようになりました。
これにより画像付きリンクボタンが簡単に作成できます。

影と白枠

影と白枠はもともと設定が可能だったものの分かりづらかったため、大幅に簡素化し、ワンクリック化しました。

文章の折返し

文章の折返しを禁止し「・・・」として丸めることで、文章の領域を調整できます。
画像の中に文章を配置する場合などに便利です。

ページの目次・ブログの目次などの装飾を画像ブロックの装飾と統合

選択したページの目次を表示する「ページの目次」や「ブログ表示」の目次などの各種目次(お客様の声の目次・周辺スポットの目次・不動産物件表示の目次)を上記と同じように装飾できます。

リニューアルによる廃止

下記の装飾が廃止されました。

  • 左右2列に1:2、2:1、1:3、3:1で配置する画像レイアウト
  • 画像を斜めにするレイアウト
  • 画像を重ねるレイアウト

画像の編集に関するヘルプ画像の装飾に関するヘルプも刷新しましたので、ご利用の際はご参考ください。

2016/4/21