SOHOを前提にはてなブログのサイトデザインカスタマイズ まとめ

f:id:tinger02:20170812215823p:plain

こんにちは、オンライン心理カウンセラーの小川(@hamidasiblog)です。

 

このたびサイトデザインを一新しました。

 

その際に行ったカスタマイズを備忘録として記録します。

 

ちなみに前提として、ブログのデザインは、SOHOを利用してます。

 

SOHO – テーマ ストア

 

 サイトデザインカスタマイズまとめ

【はてなブログカスタマイズ】ヘッダー画像の余白を詰める&レスポンシブ対応 – はみだしぶろぐ

 

【はてなブログカスタマイズ】行間とフォントサイズをCSSで調整、行間の広がりも対策 – はみだしぶろぐ

 

【はてなブログカスタマイズ】タブメニュー – はみだしぶろぐ

 

SOHO公式カスタマイズ集

デザインテーマ「SOHO」にグローバルナビ(タイトル下のメニュー)を設置 – NO TITLE

デザインテーマ「SOHO」にシェアボタンを設置 – NO TITLE

 

デザインテーマ「SOHO」にフォローボタンを設置 – NO TITLE

※google+のフォローボタンをYoutubeのチャンネルボタンに変えた。

 fa-google-plus fa ⇨ fa fa-youtube

パンくずリスト

はてなブログ公式パンくずリストを階層化してみた – 小さな星がほらひとつ

一つ前のバージョンの方が折りたたまれることなくジャンルが一覧でき、こちらを採用した。

プロフィールを大きく(HTML)で表記

はてなブログカスタマイズ!プロフィールを目立たせてアピール! – One step at a time

上記の形をベースにプロフィールが大きくなるように改良

細かなCSSカスタマイズ 

【はてなブログカスタマイズ】リンクの色を変更 – はみだしぶろぐ

【はてなブログカスタマイズ】太字を水色マーカー化 – はみだしぶろぐ

【はてなブログカスタマイズ】オレンジボタン – はみだしぶろぐ

 

感想

比較的簡単にサイトデザインをカスタマイズできた。

特にグローバルメニューのコードを自動生成する以下ののサイトの出来には驚いた。

 

デザインテーマ「SOHO」にグローバルナビ(タイトル下のメニュー)を設置 – NO TITLE 

 

SOHO自体は非常に新しいテーマであるが、かなり完成度が高く、また初心者向きなテーマと感じた。