はてブロテーマ「Avatar」で左にカラム（アイコン、カテゴリ）を出す方法

こんにちは！さやさん（@saya__san_）です。

先日、はてなブログテーマ「Avatar」を出しました！

http://blog.hatena.ne.jp/-/store/theme/17391345971655002963

こちらのブログテーマでは、左にアバターアイコン入り、カテゴリ入りのカラムを追加することでデザインを実現することができます。

デザイン　＞　カスタマイズ（スパナマーク）　＞　三番目のヘッダー

から、下記のコードをコピペで貼り付けてください。

<!-- 追加 -->
<div class="widget-wrapper">
<div class="widget-inner">
<div class="author-name">
<span>author：</span>さやさん
</div>
<div class="avatar-image">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/too_o0/20160919/20160919143516.jpg" alt="さやさん">
</div><!-- ここのsrc=""内に、ご自分のアバターアイコンのURLをいれてください！ -->
</div>

<div class="category-lists-wrapper accbox sp-style-none">
<div class="category-lists-title">
<p>CATEGORY</p>
</div>
<!--ラベル1-->
<label for="label1"><span></span></label>
<input type="checkbox" id="label1" class="cssacc" />
<div class="category-lists accshow">
<!--ここに隠す中身-->
<p class="category-list pullUp">
<a href="#">仕事</a><!-- こちらのhref=""内にカテゴリのURL、仕事と書いてあるところにカテゴリの名前をいれてください -->
</p>
<p class="category-list pullUp">
<a href="#">仕事</a><!-- こちらも上記のようにURLを変えてカテゴリ名をいれてください -->
</p>
<!-- 上記の<p>〜</p>をコピペしていくとカテゴリが増えていきます -->
</div>
<!--//ラベル1-->
</div><!--//.accbox-->
</div>
<!-- /追加 -->

これで左のカラムが反映されます。 

ブログ始めたてで文章がうまくなく申し訳ないです・・・

ご質問・わからないところがありましたら、@saya__san_までDMなりリプなりいただけますと直接お教えすることが可能です。

随時こちらの記事はアップデートしていきます！