小さな(解像度の低い)写真をメイン画像として利用する

全ページの上部に表示する、いわばデザインの一部ともいえる写真を、まめわざでは「メイン画像」と呼んでいます。
メイン画像の推奨サイズは、デザイン雛形の種類によって異なりますが、概ね1,000pxほどがあればきれいに表示されます。
一方で、500px程度ですと、ギザギザが目立って、逆にデザイン性を損なう場合がございます。
この件について問い合わせを何度かいただいておりましたので、今回は小さな(解像度の低い)写真しか用意できない場合の代替案を説明いたします。

解像度の低い写真を使用した例(この例を以下で改善します)

案1)メイン画像を表示させない

まめわざではメイン画像の表示領域(「メイン画像エリア」として表記しています)を表示させない設定が可能です。
メイン画像エリアが無い場合でも、レイアウトが崩れないようにデザインの雛形を作っているため、見栄えを損なうことはありません。
例えば、下記の別案を今後検討される場合でも、一時的に表示させないようにする回避策としてもご利用いただけます。
はじめから元も子もないような代替案ですが、有効な案の1つなので紹介いたします。

メイン画像を非表示にした例

メイン画像エリアを非表示するにする手順

管理トップページの「ページ一覧」の右側で「メイン画像エリア」欄の「編集」ボタンをクリックします。
メイン画像エリアの編集ページに移行し、最下部の「削除ボタン」をクリックします。以上で、メイン画像エリアが消えます。

メイン画像エリアを再表示する手順

同じく管理トップページの「ページ一覧」の右側で「メイン画像エリア」欄の「なし」をクリックします。
画像を登録して保存をすれば、メイン画像エリアを再表示できます。

案1b)メイン画像エリアに画像を配置しない

(案1)のメイン画像エリアを削除した場合のレイアウトにご不満の場合は、メイン画像エリアを「画像なしで使用」することも可能です。
以下のように、メイン画像を削除し、ページを保存することで、背景色のみのメイン画像エリアが表示されます。
メイン画像エリアは、通常のページと同様に編集できますので、見出しブロックを使ってキャッチフレーズを掲載したり、カレンダーやカウントダウンを載せるなど、様々な使い方が可能です。

メイン画像エリア編集ページで、登録済みの画像を削除
メイン画像エリアを画像なしで使用した例

案2)背景色を設定し、メイン画像の表示方法を切り替える

メイン画像を繰り返しにした例
メイン画像を中央に配置した例

メイン画像エリアの編集ページ下部では、登録済みの画像の表示方法を選択できます。
標準(デフォルト)では、「横一杯に引延し」になっており、表示欄一杯にサイズを自動調整して表示されますが、「寄せ」を利用した場合は、表示欄の左右中央・上下中央に画像を設置できます。
また「繰り返し」を設定すると、画像を最大サイズで繰り返し表示します。

案3)メイン画像エリアが小さいデザインを選ぶ

まめわざのデザイン雛形は、各部のサイズがそれぞれ異なります。
中にはメイン画像エリアが小さいデザインもありますので、これを選択することで、画像を変えずに見栄えを向上できる可能性があります。

メイン画像エリアが小さいデザイン雛形を使用した例

デザイン雛形変更の手順

管理トップページの「ページ一覧」の右側で「デザイン」欄の「編集」ボタンをクリックします。
デザイン編集ページに移行し、「もっとデザイン」タブをクリック後、上部で雛形を選択します。
最後に、最下部の保存をクリックしてください。デザインは複数保持することが可能ですので、編集前のデザインを維持する場合は「上書き」のチェックを解除してください。

案4)フリー画像を利用する

現在、インターネット上では様々な無料の画像サイトがございます。
これらのサイトから、コンセプトの合った高解像の写真を借用する方法もございます。
以下のサイトはいずれもフリーで、キーワード検索にも対応したオススメの画像素材サイトです。

案5)写真を撮りなおす

昨今のスマートフォンの普及率、またスマートフォンに付属のカメラの高解像化を考えますと、お持ちのスマートフォンで写真を撮ってしまうことが一番の近道の可能性があります。
もちろん、一眼レフやデジタルカメラで撮影しても構いません。
撮影した写真を、USBケーブルで接続したり、メール添付で送信したり、あるいは共有サービスなどを経て、パソコンに移動し、まめわざにご登録下さい。

番外)グループに画像を設定する(一部の雛形のみ対応)

グループに画像を設定した例

メイン画像は、通常はブロックの「列」の背景として設定されています。
これを、グループの背景に切替えることで画像のサイズがを変更できます。
尚、ほとんどのデザイン雛形で利用できるものの、未対応の雛形もあるため、ここでは番外編として扱います。

グループに画像を設定する手順

メイン画像エリアの編集ページで、下部のメイン画像の登録欄にある「左右に空間(グループに画像を設定)」をチェックします。
未対応のデザイン雛形の場合は、このチェックボックスが表示されません。

以上のように様々な代替案がございますので、小さな写真しかない場合はぜひご検討願います。

2015/11/6