むぎろぐ

仕事に行きたくないアラサー会社員の雑記ブログ

はてなブログのテーマ「SOHO」はおしゃれなデザインで超おすすめ

f:id:nmugi:20171009145439j:plain

WordPressに負けないおしゃれなテーマ。

 

(2017年10月9日更新) 

本日も当ブログをお読み頂きありがとうございます。

どうも、むぎ(@mugiblog) です。

今回はブログのデザインを「SOHO」に変更したので紹介したいと思います。

 

「はてなブログのテーマSOHOってどんなテーマなの?」

「SOHOってどんなカスタマイズしたらいいの?」

そんな疑問を持つ方の参考になればと思います。

 

ブログのテーマを「SOHO」に変更

この度ブログのテーマを変更しました。以前使っていたテーマは「minimalism」です。以下の記事に詳しく書いているのでぜひ読んで下さい。

関連記事:美しい!はてなブログテーマ「Minimalism」がおすすめです

 

「minimalism」もシンプルかつおしゃれなデザインで気に入っていましたが、WordPress風のデザインに憧れていたのもあり今回テーマの変更に至りました。

今回僕が変更した「SOHO」なら正直WordPressにも負けないおしゃれなデザインになっているんじゃないかと思います。

 

簡単に紹介していこうと思います。

 

「SOHO」を紹介

f:id:nmugi:20170903143447j:plain

引用:SOHO - テーマ ストア

「SOHO」はあのシロマ(id:shiromatakumi)さんが作られたテーマです。シロマさんと言えば同じくはてなブログのテーマ「Brooklin」を作られたことでおなじみですね。

別のブログで使わせて頂きましたが非常に使いやすいシンプルなデザインのテーマでした。

 

それでは「SOHO」を詳しく見ていきましょう。

「SOHO」のデザイン

それではまずデザインから。

PC

f:id:nmugi:20170903140348j:plain

PCから見たデザインはこのように非常にシンプルなデザインです。シェアボタンも主張が強すぎずにいい感じ。

スマホ

このテーマはレスポンシブ対応でスマホのデザインが1番の特徴と言っても良いでしょう。Wordpressの「ストーク」よりもむしろかっこいいと思うのは僕だけではないはず。

f:id:nmugi:20170903140723j:plain

f:id:nmugi:20170903140741j:plain

こんな感じの見た目になります。左上のハンバーガーメニューをタップすると......

f:id:nmugi:20170903140838j:plain

いやーかっこいい

シュッとサイドからメニューが開く感じがもう最高です。

 

「SOHO」はカスタマイズが超楽なテーマ

「SOHO」のデザインがかっこいいのは分かったとして、次はカスタマイズです。実はこのテーマめちゃくちゃカスタマイズが楽なんです。

シロマティさんがあらかじめ用意してくれているこちらのサイト。

「SOHO」カスタマイズページ一覧 - SOHO

f:id:nmugi:20170903141303j:plain

これはほんの一例ですが入力するだけでグローバルメニューの設置のためのコードが生成されます。そのためカスタマイズの知識0でおしゃれなサイトができてしまうんです。いやーシロマさん、ありがとうございます。

「SOHO」のカスタマイズ

当ブログで行ったカスタマイズを簡単に紹介したいと思います。

アイキャッチ画像を使ったフォロー

最近おしゃれなサイトでよくみかけるこれです。

f:id:nmugi:20170903142037j:plain

これはorefolder(id:c-miya)さんのこちらの記事を参考に設置しました。

www.foxism.jp

僕は当ブログをレスポンシブにしているのでPCだけでなくスマホにも反映されます。

リンクの色を青に

「SOHO」ではインストールした時点でリンクの色がなんと金色。これはこれではてなブログではあまり見ないデザインなのでいいんですがちょっと見慣れないので記事内のリンクのみ青色に変更しました。青色と書いたけど紫色っぽく見えるかもしれません。

f:id:nmugi:20170903142644j:plain

画像だと少し分かりづらいかもしれません......すみません。

www.daipanman.com

参考にしたのはだいぱんまん(id:donchan922)さんのこちらの記事。なんとGoogleと同じリンクの色にコピペ一発で変更できます。

*2017年10月9日現在、リンクの色は変更しています。

このカスタマイズはminimalgreen(id:minimalgreen)さんの記事を参考にしました。

design.syofuso.com

グローバルメニューやサイドバーの色は変更する必要がないと感じたため、リンクの色だけ変更しました。

セレクタ毎に分かりやすく書いてあるので初心者の方でも簡単にカスタマイズすることができるはずです。

 タブメニュー

続いてカスタマイズしたのがタブメニューです。

f:id:nmugi:20171009150601j:plain

当ブログでいうとこの部分。タブをクリックもしくはタップすると「新着記事」や「カテゴリー」に切り替えることができます。

設置の方法はゆきひー(id:ftmaccho)さんのこちらの記事を参考に。

www.yukihy.com

そしてCSSをいじるのははみだしぶろぐ(id:tinger02)さんの記事を参考に(というかコピペです。すみません)。

www.kokoro-nayami-soudan.space

「SOHO」のデザインに合うおしゃれなタブメニューになります。

ありがとうございます。

 

他にも細かいところはいじっているところがありますが大まかには以上です。

随時追記していこうと考えているのでぜひ参考にしてみてください。

 

はてなブログテーマ「SOHO」を紹介しました

f:id:nmugi:20170903143641j:plain

今回はブログのテーマを変更したので紹介してみました。「SOHO」はカスタマイズも簡単でおしゃれなデザインにできるという点で非常におすすめのテーマです。

 

テーマ選びに悩んでいるあなたの参考になれば嬉しいです。もし気になった方がいれば下記のリンクからぜひインストールしてみてくださいね。

テーマストア:SOHO - テーマ ストア

 

最後まで読んで頂いてありがとうございました。

それでは、また!