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

ABOUTこの記事をかいた人

うつで2度の休職を経験後、3年ほどは就労できていたが、追突事故にあい、うつが再発、再度休職し、首には後遺障害が残存したが保険金は弁護士基準でゲットした♪ ブログでは「精神障がい者が人生を豊かにするブログ」をテーマに精神疾患に関する情報を発信。無料オンラインサロン主催