今回はサイトを綺麗に見せるために、Simplicityを使った背景画像を設定する方法についてご紹介します。
はじめに、背景画像をとる際のおすすめサイト（subtlepatterns.com）を紹介します。そして、サイトの表示を速くする為に画像の圧縮方法についてもご紹介いたします。
設定する前に（背景画像ありとなしの見え方）
背景画像を設定する前に、背景画像がある場合とない場合を比較してみたいと思います。
左が背景画像あり、右が背景画像なしです。小さくて見づらいと思いますので、画像をクリックして拡大した状態で確認してみてください。
どうでしょうか。
背景画像のある方が自然と記事に目がいくかなと思います。
（私だけかもしれません。笑 ）
背景画像の取得先
背景画像の取得についてはこちらのサイトがおすすめです。
英語のサイトですが、シンプルでデザインが豊富でありながら、商用利用可能です。
(余計な会員登録も必要ありません)
公式HP：https://www.toptal.com/designers/subtlepatterns/
背景画像の選び方とダウンロード方法
上記のサイトにアクセスした後、まずはサイトの一番下までスクロールしてください。すると、画像のタグが選択できますので、お好きなジャンルを選択してください。
もし、シンプルな背景がお好きでしたら、LightかPaperのタグがおすすめです。
その後は、お好きなデザインを選んでみてください。
デザインを選ぶ際は画像の上のPREVIEWボタンを押すと、サイトのデザインが変わるため、どんなデザインになるかを実際に確かめることができます。
ボタンを押した後はこんな感じでサイトのデザインが変わります。デザインを確認してから左のDOWNLOADボタンを押下してください。
なお、ダウンロードされたzipファイルを解凍すると、通常サイズと2倍サイズの2枚の画像が入っています。サイトの表示速度のことを考えると、通常サイズの利用をおすすめします。
背景画像をブログにアップロードする際の注意点
背景画像はどのページでも表示される画像であるため、背景画像の容量が大きいとサイト全体の表示が遅くなってしまいます。
そのため、背景画像は圧縮しておくことをおすすめします。今回は「サイトを使った画像圧縮」と「プラグインを使った画像圧縮」の２種類の圧縮方法についてご紹介します。ちなみに私は両方ともやっています。
サイトを使った画像圧縮
「TinyPNG」というサイトにファイルをアップロードするだけでファイルの圧縮ができます。
公式HP：https://tinypng.com/
TinyPNGサイトの使い方
使い方は非常に簡単です。まずは圧縮したいファイルをサイトにドラッグ&ドロップします。
すると、ファイルの圧縮が始まります。
ファイルの圧縮が終われば、右のdownloadボタンから圧縮されたファイルがダウンロードできます。
このファイルは92.6KBの圧縮になりました。パンダも大喜びです。
プラグインを使った画像圧縮
既にファイルをアップロードした方がファイルを圧縮したいとなった場合はWordPressのプラグイン「EWWW Image Optimizer」を使うことをおすすめします。
EWWW Image Optimizerの設定
まずは「EWWW Image Optimizer」をインストールして、有効化してください。
その後、「設定→EWWW Image Optimizer」を選択肢、以下の画面を開いてください。
「Basic Settings」の「Remove metadata」にチェックを入れたら、設定は終了です。
この「This will remove ALL metadata: EXIF and comments」の設定は写真のメタデータであるEXIF情報を削除するものです。
EXIF情報とは写真の付属情報みたいなものです。定義はこんな感じです。
Exifとは、デジタルカメラで撮影した画像データに、撮影条件に関する情報（メタデータ）を追加して保存できる、画像ファイル形式の規格のことである。 Exifでは、撮影した画像データと併せて、撮影した日時やデジタルカメラの機種、絞り値、画素数、ISO感度、色空間、といった情報をまとめて記録することができる。
参考：https://www.weblio.jp/content/Exif
Webサイトにアップロードする際にはこのExif情報は不要となるため、削除することをおすすめです。
EWWW Image Optimizerの使い方
一度、EWWW Image Optimizerを設定すると、それ以降は自動でアップロードする画像を圧縮するようになります。
既にアップロードされたファイルに対して一括で圧縮する方法はこちらです。
まずは「メディア→Bulk Optimize」を選択し、「Import images」ボタンを押してください。
Importが終了すると、もう一度「メディア→Bulk Optimize」を選択してください。
その後、以下の画面の「Start optimizing」ボタンを押してください。
ボタンを押すと、一括圧縮が開始されますので、あとは終了するまで待っておくだけです。（アップロードされている画像の数によっては20〜30分かかることもあります。）
処理が終了すれば、圧縮の完了です。
背景画像の設定方法
最後に背景画像の設定方法ですが、Simplicityでの設定は非常に簡単です。
まず、メニューの「外観→カスタマイズ」を選択します。
次に、カスタマイズの画面で「背景画像」を選択します。
その後、画像を選択すれば、背景画像の設定は完了です。
非常に簡単ですね。笑
一応、サイトのイメージと合っているかを改めて確認した方がよいかと思います。
まとめ
今回は背景画像の取得と設定についてご紹介しました。
サイトのデザインをを考える上で一番重要なポイントは「記事に集中してもらうこと」かと思います。
背景画像のデザインがカラフルすぎると、そちらに目がいってしまい、記事を読んでもらえなくなります。デザインが苦手と思う方は特に、シンプルな感じを目指すのがよいかと思います。（私はとにかくシンプルを心がけてます。笑）
コメント