小ネタ

はてなブログデザインまとめ

shu

こんにちは。今日はカナダでも英語でもない、オススメのはてなブログのデザインに関して書いていこうと思います。

去年の12月の終わりに始めたので早いものでもう4ヶ月目突入です。読んでくれてる人にありがとうを届けたいです。(笑)

今回は最近始めた人にこんなアレンジすればブログオシャレになるよーって言うのをまとめました。はてブ始めたばかりで何すればいいかわからない人は参考になればと思います。(すごい簡単なものは避けてます)

テーマストア

このURLをクリックするか

自分のはてブ管理画面のデザインの公式テーマの1番下からストアにいけます。

ちなみに自分が使ってるテーマはこれです。

f:id:sgwshu:20170404234718j:plain

レスポンシブデザイン対応なのでスマホユーザーにも優しい!

他に自分がやってみたいなって思ったテーマはこれです。

見て見てください。次選ぶならこんな感じがいいですね。

ナビゲーションバーをつける

もちろんデザインが気に入ったのとコピペで簡単にナビゲーションバーをつけれる説明があったことがこのデザインの主な設定理由です。読んでコピってください。

ちなみに違う方法(ググって)でナビゲーションバーをつけるって方法もしてみたんですが少しずれたりしたのでやっぱり製作者指定の方法がある方が安心できます。

Add thisで簡単にソーシャルボタンをつける

このサイトを使えば瞬時にソーシャルボタンをつけることができます。

まずは登録

f:id:sgwshu:20170404232554j:plain

次にAdd new toolをクリック

f:id:sgwshu:20170404232624j:plain

(Inlineは前に自分が作ったやつなので初期状態ではここには何もないです)

 するとこうなります。

f:id:sgwshu:20170404234422j:plain

ドロップダウン赤をtoolに青は自分が載せたいシェアボタンの数。そして緑のデザインを使えば文字色とか形を変えれます。

f:id:sgwshu:20170404232812j:plain

Addから追加します。

f:id:sgwshu:20170404233200j:plain

その後下のSave and contenueを押すと

f:id:sgwshu:20170404233413j:plain

コードが出てくるのではてなのダッシュボードに戻ってフッタにコピペ。

この画面の下部にあるInline Share Buttonsのコードをコピーしてシェアボタンを貼りたいとこに貼ります。

例えば、自分の場合は記事上と記事下です。

まぁ大きくhtml/cssに触れた変更はこの3つです。

特にAddthisはすごい簡単でレスポンシブ対応なので是非やってみてください。

ではSee Yaaaa!!!!!

ABOUT ME
sgw
sgw
フロントエンド
カナダのBCITとか言う短大卒業。その後4年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。
記事URLをコピーしました