コーディングふぇすてぃばる

うつ病ニート→貯金0 コーディングのお仕事してます!

【コピペ】はてなブログテーマ「Minimal Blue」にナビゲーション(カテゴリ)を出す方法

こんにちは。さやさんです。

 

先日、はてなブログのテーマ「Minimal Blue」を公開しました。

Minimal Blue - テーマ ストア

 

このテーマで、ナビゲーションバー(カテゴリ)を出す方法をご紹介します!

コピペして、カテゴリのURLや名前をお好きなものに差し替えるだけでOKです。

 

<!-- ここから追加 -->
<div class="navigation-lists-wrapper pc-style-none"><!-- PC用の表示のタグです、スマホ表示では消えます。 -->
<ul class="navigation-lists">
<li class="navigation-list">
<a href="#" class="navigation-link">プロフィール</a><!-- href="#"の""内にカテゴリのURLを入れる。「プロフィール」は実際に表示される文字 -->
</li>
<li class="navigation-list">
<a href="#" class="navigation-link">仕事</a>
</li>
<li class="navigation-list">
<a href="#" class="navigation-link">HTML</a>
</li>
</ul>
</div>

<div class="accbox sp-style-none"><!-- スマホ用の表示のタグです、PC表示だと消えます。 -->
<label for="label1"><span></span></label>
<input type="checkbox" id="label1" class="cssacc" />
<div class="accshow">
<p>
<a href="#">プロフィール</a><!-- PC版と同じようにURLとカテゴリ名を入れてください。 -->
</p>
<p>
<a href="#">仕事</a>
</p>
<p>
<a href="#">HTML</a>
</p>
</div>
</div>
<!-- /ここまで追加 -->

 

このタグの挿入場所

デザイン > カスタマイズ(スパナアイコンのタブ)> ヘッダ > タイトル下

 

に上のコードを挿入してください。

挿入すると右のデザインプレビューにナビゲーションが反映されると思います。

 

以上となります!

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

こんにちは!さやさん(@saya__san_)です。

 

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

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

 

f:id:too_o0:20180617161006j:plain

 

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

 

デザイン > カスタマイズ(スパナマーク) > 三番目のヘッダー

 

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

 

<!-- 追加 -->
<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なりリプなりいただけますと直接お教えすることが可能です。

 

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

さやぽよのプロフィール

はじめまして!さやぽよ(@saya__poyo)です。

 

この度ブログを始めました!

まずは自己紹介からさせていただければと思います。

 

 

生い立ち

島根県で生まれて、転勤族だったので各地を転々としていました。

主にいたところは広島県です。

酔っ払うと広島弁が出る東京だとイタイやつです。

今は東京の豊島区に住んでいます。


性格

結構ネガティブなくせにやりたいことに対しては猪突猛進でポジティブ。

あんまり人には興味がない。

仕事歴

多摩美術大学 情報デザインコース卒業

LINEでUIデザイナー

ベンチャーでUI・Webデザイナー

うつ病になって1年間ニート

フリーランスになろう!と思ったけど

デザイナー・ライター・ハンドメイド作家やろうとして失敗

貯金0

エンジニア就職してギリギリ生活中

 

好きなこと

HTML、CSSJavascriptといった、コーディングです!!
現在フロントエンドエンジニアとして会社で仕事してます。

 

嫌いなこと

集団行動(3人以上になるともう話せない…)。
ディスカッション
通勤電車に乗ること。

 

将来の夢

おいしい空気を吸って、おいしい食べ物を食べて、落ち着いて暮らせるところに住むこと。
貯金を増やすこと。

このブログを通じて、仕事が増えたりとか友達が増えたらいいなとか思ってます!
どうぞよろしくお願いいたします!!