Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

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

f:id:sgwshu:20170404090824j:plain

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

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

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

テーマストア

このURLをクリックするか

テーマ ストア - はてなブログ

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

 

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

Innocent - テーマ ストア

f:id:sgwshu:20170404234718j:plain

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

 

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

ZENO-TEAL - テーマ ストア

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

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

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

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

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

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

まずは登録

f:id:sgwshu:20170404232554j:plain

次にAdd new toolをクリック

(Inlineは前に自分が作ったやつなので初期状態ではここには何もないです)f:id:sgwshu:20170404232624j:plain

 するとこうなります。

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!!!!!