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