iiie.nagoya

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

【'19/07/13】
当ブログで使用しているカスタマイズテーマ『riseup』をテーマストアで公開しました。はてなブログを使用している方なら無料でインストールすることが可能です。(はてなProでの利用を推奨しています)

詳細は以下のページに記載しています。
https://www.iiie.nagoya/entry/2019/07/13/210356

ブログテーマページはこちら
http://blog.hatena.ne.jp/-/store/theme/17680117127217464048

ページ背景(画像・色)を簡単に設定する【gram】

f:id:gorislog:20190407194632p:plain

 

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

 

gramsample.hatenablog.jp

 

背景色を指定する(簡単)

 

はてなブログのデザイン内にある『背景色』を選択することで、背景色が変わります。

 

f:id:gorislog:20190501080938p:plain

 

  • デザインより、カスタマイズ(スパナマーク)をクリック
  • 背景色をクリック
  • 指定したい背景色を選択(薄い色がおすすめです)

 

f:id:gorislog:20190501081242p:plain

 

  • 背景色が反映される
  • 変更を保存で完了

 

背景色を指定する(CSS)

CSSで指定することによって、上記の簡単指定の中にある色以外の色を指定できます。

カラーコードで指定できるので、様々な色に変更できます。

 

追加するコードは

body{

   background-color: #ededed;

}

 

カラーコードを変更すれば、様々な背景色に指定できます。薄い色がおすすめです。

 

www.colordic.org

 

f:id:gorislog:20190501083003p:plain

 

  • デザインより、カスタマイズ(スパナマーク)を選択
  • デザインCSSをクリック
  • 表示された白い領域をクリック

 

f:id:gorislog:20190501083050p:plain

  • 表示された領域にCSSを追加
  • テストページに背景が反映される
  • 変更を保存する

 

カラーコードを改変してコピー&ペーストするだけなので、簡単かと思います。

 

背景画像を指定する

gramはCSSで背景画像を指定していないので、はてなブログの『背景画像』で簡単に指定できます。また、画像をアップロードして差し替えも簡単にできるので、簡単にできるカスタマイズとしておすすめです。

 

f:id:gorislog:20190427222550p:plain

 

  • デザイン画面より、カスタマイズ(スパナマーク)を選択
  • 『背景画像』クリック
  • 画像をアップロード、もしくは公式の画像を選択する

 

f:id:gorislog:20190427222817p:plain

 

  • 選択すると背景が変わる
  • 変更を保存する

 

CSSで指定する必要がないので、簡単にカスタマイズできます。