読者です 読者をやめる 読者になる 読者になる

クサイダー速報

違うネタバレ専用サイトに移転しました どこかは言えない

ちょっとサイドバーを弄ってみたよ、という話

オススメ記事

ちょっとサイドバーに細工を加えたので紹介していきます。

f:id:narutonetabare:20140423002810p:plain

 お気付きの方もいらっしゃるかも知れませんが、PC版のサイドバートップにアイコンを追加してみました!

f:id:narutonetabare:20140505073020p:plainf:id:narutonetabare:20140505073028p:plain

TwitterRSSのアイコンを追加しました。

簡単にですが、導入方法を説明します。

HTML

まずは、アイコンの追加です。サイドバーの一番上に、以下のHTMLを書いて保存して下さい。

<div id="subscriptions"> <a href="http://netabare4you.hatenablog.com/feed"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/narutonetabare/20140505/20140505073028.png" alt="Subscribe to RSS Feed" title="Subscribe to RSS Feed"></a>

 

<a href="http://twitter.com/Netabare4You" target="_blank" title="Follow me on Twitter!"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/narutonetabare/20140505/20140505073020.png" title="Follow me on Twitter!" alt="Follow me on Twitter!"></a>    </div>

 赤字の部分を、各自のRSSや、TwitterのURLに変更して下さい。 また、青字の部分は画像へのリンクです。 そのまま使用していただいてよろしいですし、お好みの画像に変えていただいても結構ですよ〜

CSS

サイドバーの上に隙間を開けるには、以下のCSSを一番下に追加して下さい。

#box2 {

 margin-top: 63px;

}

#subscriptions{

position: relative;

top: -256px;

}

 これで、サイドバー上部に隙間が63px空きます。

赤字の部分はお好きなように調整して下さい。

アイコンを上に動かさなくてはならないので、青字の部分も適切に変更して下さい。

 

ざっとでしたが、サイドバーをカスタマイズした件についてまとめてみました。

読んでいただき感謝します!

 

シェアありがとうございます