iiie.nagoya

物づくりと生活、"経験"を記事へ

”シームレス画像”を使って背景にこだわる【gram】

f:id:gorislog:20190407194632p:plain

 

はてなブログテーマ『gram』のカスタマイズ記事です。

 

gramsample.hatenablog.jp

 

 

シームレスパターンとは

シームレスパターンは「つなぎ目のない」と訳せるように、画像と画像を真横に配置した場合に、画像がつながっているようにみえる画像パターンの事です。小さな画像を連続し、大きく表示できるので画像の読み込み量も少なく、おしゃれにできる画像アイテムです。

 

大きな画像を使用した背景の場合、背景画像よりも解像度が大きければ画像が途中で切れてしまう可能性がありますし、画像を背景固定する必要がでてきます。

シームレスパターンの場合、連続して表示されるだけなので画像固定をする必要が無く、スクロールをしても自然な背景で表示されます。

 

『シームレスパターン』や『シームレス画像』で検索すれば、商用フリーの背景画像サイトなど様々でてくると思いますが、僕がおすすめなのは以下のサイト。

 

www.transparenttextures.com

coliss.com

 

Transparent Texturesの画像はシームレスパターンでありながら、透過処理されている画像です。

透過処理された画像の場合、背景に色を指定すると色の上に透過画像が載せられるので、さまざまな背景にアレンジすることができます。

 

※商用フリーと紹介されていますが、Transparent Textures側に記載を見つけれなかったので、問題視された場合この記事は削除されます。

 

ダウンロードの仕方

 

f:id:gorislog:20190501092005p:plain

 

  • ページの中から好きなパターンを探す
  • 探す際、左側のカラーボックスで『#ffffff』を記載するのがおすすめ(gramは薄色になるようカラーを選択しているので、濃い色背景を指定するとイメージが湧き辛いと思います)
  • 欲しいシームレスパターンの右下にある『Download』をクリックして保存する

 

設定

 

f:id:gorislog:20190501091841p:plain

 

  • デザインより、カスタマイズ(スパナマーク)を選択
  • 背景画像をクリック
  • 画像アップロードより、参照をクリックして、ダウンロードした画像をアップロード

 

f:id:gorislog:20190501092249p:plain

  • 画像をアップロードすると、テスト画面に反映される
  • 変更を保存する

 

画像+色でアレンジ

f:id:gorislog:20190501092329p:plain

 

  • デザインからカスタマイズ(スパナマーク)を選択
  • 背景色をクリック
  • 色を選択
  • テスト画面に反映されたら変更をする。

 

はてな公式に用意されている背景色以外で指定したい場合はCSSより変更が可能です

CSSでの指定をする場合は以下の記事を参考にしてください。

 

www.iiie.nagoya