iiie

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

影付き白ボックスをヘッダーorサイドバーで使う方法【gram】

f:id:gorislog:20190407194632p:plain

 

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

 

gramsample.hatenablog.jp

 

 

影付き白ボックスを設置

gramの記事一覧や記事表示部には影付きの白ボックス内に内容を表示するようにしています。

 

その影付き白ボックスをヘッダーやサイドバー(gramではフッター扱いになりますが)で使用するための方法です。

 

使い方

影付き白ボックスのCSSは既に格納されているので追加で記載する必要はありません。

 

htmlを貼り付けたい部位に追記するだけです。

 

<div class="whitebox">
<div class="whiteboxi">表示したい内容</div>
</div>

 

『表示したい内容』の部分に掲載したい画像やテキストを記入します。

googleアドセンスを追加したい場合などにも使用できます。

 

また、記事一覧表示の際と同様、2つ以上のwhiteboxを追加した場合、992px以上のPCビューの場合には2列表示、992未満の場合には1列表示へ変更されるレスポンシブ対応なボックス表示となります。

 

二つ以上の要素を追加する場合の記述例

<div class="whitebox">
<div class="whiteboxi">
表示したい要素1
</div>
<div class="whiteboxi">
表示したい要素2

</div>

</div>

 

今回追加するhtml例

<div class="whitebox">
<div class="whiteboxi">
<a href="http://blog.hatena.ne.jp/-/store/theme/17680117127077295762">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/g/gorislog/20190428/20190428174720.png" width="100%">
<p>
<center><b>- テーマストアで"gram"をインストールする -</b></center>
</a>
</div>
</div>

 

ヘッダー(タイトル下)に影付き白ボックスを追加する場合

f:id:gorislog:20190429090135p:plain

 

  • デザインより、カスタマイズ(スパナマーク)を選択
  • ヘッダーをクリック
  • タイトル下をクリック

 

f:id:gorislog:20190429090149p:plain

  • 広がった領域へ上記のhtmlをペースト
  • 画面に表示されたことを確認し、変更を保存する

 

 

フッター(サイドバー)に表示する方法

f:id:gorislog:20190429090218p:plain

 

  • デザインより、カスタマイズ(スパナマーク)を選択
  • サイドバーをクリック
  • モジュール追加をクリック

 

f:id:gorislog:20190429090229p:plain

 

  • 開かれたボックスより、『HTML』を選択
  • タイトルを未記入で、広いエリアにhtmlを入力
  • 適用をクリック

 

f:id:gorislog:20190429090241p:plain

 

  • 要素が追加されたのを確認する
  • 変更を保存する

 

各種アドセンスや、紹介したいコンテンツ・リンクなどを、統一感のあるデザインで表示するために追加しました。