daito's diary

写真のこと、身の回りのこと

はてなブログのデザインを「SOHO」に変更してみた

 ようこそ、daito's diaryへ
このたびブログのデザインを変更してみました。
とはいっても、一覧から選んでインストールボタンを押すだけなんですけどね。
今回選んだテーマは「SOHO」です。
カスタマイズも行いましたので、備忘録も兼ねて書いていきたいと思います。
 

SOHOの特徴

カスタマイズが超簡単
シンプルなデザイン
スマホのデザインにこだわり
画像の表示にこだわり
という風に紹介されていて、好みのタイプでしたのでインストールしました。
SOHOデモサイト
「SOHO」ってどんなテーマ?
以前使用していたテーマもシンプルなデザインでしたが、SOHOはさらにシンプル。
色使いもほとんどありません。
 

カスタマイズの実践

カスタマイズが超簡単とのことですので早速取り掛かってみましょう
カスタマイズ一覧サイト

グローバルナビゲーションの設定

マウスオーバーさせると、アンダーラインが左から右へにょきっと伸びて、ちょっとおしゃれな感じです。
こちらはコードジェネレーターが設置されているので簡単に設定できます。
既存コードを書き替える手間がなくてほんとに便利です。
指示通りに入力していくとコードが生成されます。
そのコードを支持された場所にコピペするだけです。
ほんとに簡単です。
 

フォローボタンの設定

モノクロのおしゃれなアイコンが使用されています。
こちらも指示通りに進めていきましょう。
利用するSNSを選択できるのがとても便利です。
それぞれのSNSのIDを入力すればこちらもコードを生成してくれます。
こちらも指示された場所に生成されたコードをコピペです。
 

シェアボタンの設定

こちらもフォローボタン同様モノクロのアイコンです。
こちらはコードがすでに出来上がっていますので、指示された場所へコピペするだけです。
シェア数の表示のされ方もおしゃれです。
shiromatakumiさん、すてきなテーマの開発、ありがとうございます。

ほかのカスタマイズ

英数字フォントの変更
記事内の画像をカスタマイズ
この2つは行いませんでした。
いずれ近いうちに設定したいと思います。
 

ページTOPに戻るボタンの設置

あくあのーとさんで公開されているコードをコピペしただけです。

nohack-nolife.hatenablog.com

コードの公開、ありがとうございます。
 

カエレバ・ヨメレバのカスタマイズ

色々試した結果、roughlogさんのカスタマイズがしっくり来ました。

rough-log.com

roughlogさんありがとうございます。
 
iPhone・iPadでもレイアウトが崩れることなく、ボタンがきれいにレイアウトされます。
SOHOは色使いが控えめなので、リンクボタンが目立ちます。
こちらもコードを指定の場所にコピペするだけです。
7netの色をグリーン系に変更しました。
セブンイレブンってなんかグリーン系っていうイメージなんですよね。
 
さて、以上が私のカスタマイズ内容です。
コードを張り付ける場所が何か所もありますので、最初は戸惑うかもしれません。
一挙にカスタマイズするのではなく、1日ひとつずつやっていく方がよいかもしれません。
慌てずゆっくりと進めていきましょう。
慌てるとコードのコピーが足りなくて、動かないなんてこともあります。
っていうか私がやらかしました。
 
こうして手間をかけずにカスタマイズができるのは、コードを公開してくださっているみなさんのおかげです。
ほんとにありがとうございます。
インターネットってほんとにいいもんですね!
ではでは。
 
少し勉強しようかな。