Simplicityを使ってサイトを綺麗に見せるための背景画像の設定方法

Simplicity
SponserLink

今回はサイトを綺麗に見せるために、Simplicityを使った背景画像を設定する方法についてご紹介します。

 

はじめに、背景画像をとる際のおすすめサイト(subtlepatterns.com)を紹介します。そして、サイトの表示を速くする為に画像の圧縮方法についてもご紹介いたします。

SponserLink

設定する前に(背景画像ありとなしの見え方)

背景画像を設定する前に、背景画像がある場合とない場合を比較してみたいと思います。

左が背景画像あり、右が背景画像なしです。小さくて見づらいと思いますので、画像をクリックして拡大した状態で確認してみてください。

subtlepatternsから取得した背景ありのサイト背景なしのサイト

どうでしょうか。

背景画像のある方が自然と記事に目がいくかなと思います

(私だけかもしれません。笑 )

 

背景画像の取得先

背景画像の取得についてはこちらのサイトがおすすめです。

英語のサイトですが、シンプルでデザインが豊富でありながら、商用利用可能です。
(余計な会員登録も必要ありません)

 

subtlepatternsのwebサイト

公式HP:https://www.toptal.com/designers/subtlepatterns/

 

背景画像の選び方とダウンロード方法

上記のサイトにアクセスした後、まずはサイトの一番下までスクロールしてください。すると、画像のタグが選択できますので、お好きなジャンルを選択してください。

もし、シンプルな背景がお好きでしたら、LightかPaperのタグがおすすめです

subtlepatternsで背景画像の選び方とおすすめタグ

 

その後は、お好きなデザインを選んでみてください。

デザインを選ぶ際は画像の上のPREVIEWボタンを押すと、サイトのデザインが変わるため、どんなデザインになるかを実際に確かめることができます。

subtlepatternsのWebサイトでpreviewを見る方法

 

ボタンを押した後はこんな感じでサイトのデザインが変わります。デザインを確認してから左のDOWNLOADボタンを押下してください。

subtlepatternsのWebサイトでpreviewボタン押下後

なお、ダウンロードされたzipファイルを解凍すると、通常サイズと2倍サイズの2枚の画像が入っています。サイトの表示速度のことを考えると、通常サイズの利用をおすすめします

 

背景画像をブログにアップロードする際の注意点

背景画像はどのページでも表示される画像であるため、背景画像の容量が大きいとサイト全体の表示が遅くなってしまいます

そのため、背景画像は圧縮しておくことをおすすめします。今回は「サイトを使った画像圧縮」と「プラグインを使った画像圧縮」の2種類の圧縮方法についてご紹介します。ちなみに私は両方ともやっています。

 

サイトを使った画像圧縮

「TinyPNG」というサイトにファイルをアップロードするだけでファイルの圧縮ができます。

ファイル圧縮ができるTinyPNGのサイト

公式HP:https://tinypng.com/

 

TinyPNGサイトの使い方

使い方は非常に簡単です。まずは圧縮したいファイルをサイトにドラッグ&ドロップします。

TinyPNGのサイトに圧縮したいファイルをドラッグ&ドロップする

 

すると、ファイルの圧縮が始まります。

TinyPNGのサイトにファイルをアップロードした後のファイル圧縮中

 

ファイルの圧縮が終われば、右のdownloadボタンから圧縮されたファイルがダウンロードできます。

TinyPNGのサイトから圧縮が終わったファイルをダウンロードする

このファイルは92.6KBの圧縮になりました。パンダも大喜びです。

 

プラグインを使った画像圧縮

既にファイルをアップロードした方がファイルを圧縮したいとなった場合はWordPressのプラグイン「EWWW Image Optimizer」を使うことをおすすめします。

 

EWWW Image Optimizerの設定

まずは「EWWW Image Optimizer」をインストールして、有効化してください。

その後、「設定→EWWW Image Optimizer」を選択肢、以下の画面を開いてください。

EWWW Image Optimizerの設定画面

 

「Basic Settings」の「Remove metadata」にチェックを入れたら、設定は終了です。

EWWW_Image_Optimizerの設定画面で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」ボタンを押してください。

EWWW Image Optimizerの使い方

 

Importが終了すると、もう一度「メディア→Bulk Optimize」を選択してください。

その後、以下の画面の「Start optimizing」ボタンを押してください。

EWWW Image Optimizerで一括圧縮する方法

 

ボタンを押すと、一括圧縮が開始されますので、あとは終了するまで待っておくだけです。(アップロードされている画像の数によっては20〜30分かかることもあります。)

EWWW Image Optimizerで一括圧縮中

処理が終了すれば、圧縮の完了です。

 

背景画像の設定方法

最後に背景画像の設定方法ですが、Simplicityでの設定は非常に簡単です。

 

まず、メニューの「外観→カスタマイズ」を選択します。

wordpressのメニューからカスタマイズを選択する方法

 

次に、カスタマイズの画面で「背景画像」を選択します。

simplicityにおける背景画像の選択

 

その後、画像を選択すれば、背景画像の設定は完了です。

simplicityのカスタマイズで背景画像を選択する画面

 

非常に簡単ですね。笑

一応、サイトのイメージと合っているかを改めて確認した方がよいかと思います。

まとめ

今回は背景画像の取得と設定についてご紹介しました。

サイトのデザインをを考える上で一番重要なポイントは「記事に集中してもらうこと」かと思います。

背景画像のデザインがカラフルすぎると、そちらに目がいってしまい、記事を読んでもらえなくなります。デザインが苦手と思う方は特に、シンプルな感じを目指すのがよいかと思います。(私はとにかくシンプルを心がけてます。笑)

SimplicityWordPressブログ運営

関連おすすめ記事

宜しければシェアをお願い致します
運営者プロフィール
jin

妻と娘の3人で暮らしています。
「お金、時間、そして家族を大事にしたい」と考えるパパにとって、少しでもプラスになれたらいいなと思って情報発信しています。宜しくお願い致します。

jinをフォローする
ぱぱたす(PaPa+)

コメント