この記事が気に入ったらシェアしてください

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

この記事が気に入ったらシェアしてください

Simplicityを使った背景が綺麗なサイトを作る方法

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

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

スポンサーリンク
広告

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

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

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

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

どうでしょうか。

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

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

背景画像の取得先

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

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

subtlepatternsのwebサイト

公式HP:http://subtlepatterns.com/

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

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

もし、シンプルな背景がお好きでしたら、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感度、色空間、といった情報をまとめて記録することができる。

参考:http://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のカスタマイズで背景画像を選択する画面

非常に簡単ですね。笑

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

まとめ

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

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

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

スポンサーリンク
広告

この記事が気に入ったらシェアしてください

もし良かったらフォローしてください

スポンサーリンク
広告