しあわせ情報室

辞書と能率手帳好きが書く、しあわせのための知識がテーマのブログです。

人気記事
中学生 国語辞典 比較 おすすめ
NOLTY 能率手帳1 おすすめ
BMW  アクティブツアラー F45 218i
一流スポーツ選手27人の親の事例集

ブログのデザインテーマを「Minimalism」から「SOHO」に変更 スマホで見やすくするために

はてなブログのデザインテーマを「Minimalism」から「SOHO」に変更しました。

理由はただ一つ、スマートフォンで見たときに、タップしたら開くタイプのメニューでカテゴリーを表示するコレを出したかったからです。

はてなブログ SOHO トグルメニュー

タップすると、左からこの画面が出てきます。

はてなブログ SOHO トグルメニュー

トグルメニューやハンバーガーメニューといわれるものです。

SOHOはこの機能を標準で装備しています。美しい!!!

 

 

これまで使っていたMinimalismでは、グローバルナビゲーション(ナビゲーションメニュー)を長くするとスマホの画面に入り切らず、横にスクロールしないと右端まで見えませんでした。

Minimalism スマホ ナビ

レスポンシブデザインにせず、設定でスマートフォンのデザインをカスタマイズすることも少しやってみたのですが、私には無理でした…。

 

普段パソコンでブログを書いていて、パソコンでの見た目ばかりを気にしていたのですが、よく考えればこのブログのアクセスは約7割がスマホです。

それなら当然、スマホから訪れてくださった方をもっと意識して、よりわかりやすく読みやすくすべき。

そこで、ナビゲーションのメニューが右に隠れてしまうより、トグルメニューの方がいいと判断しました。

ブログ内検索も右上からできて、一石二鳥です。

はてなブログ SOHO ページ内検索

 

作者のSHIROMAさんがカスタマイズをわかりやすく解説してくれているので、これに沿ってグローバルナビを設定します。

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

ヘッダのデザインなどはこれまでMinimalismで設定した内容を踏襲し、SOHOの標準からは、本文と見出しのフォントとサイズやリンクの色を変更しました。

当面これで、様子を見ようと思います。

 

ブログのアクセスに伸び悩むと、やっぱりWordPressじゃなきゃためなのかな…とか、いっそもうやめようかな…とか、ふと思ってしまいます。

でも、はてなブログでできることを全てやりきっているのか!と自問して、一つずつでもやってみることにします。

以上、はてなブログのデザインテーマを「Minimalism」から「SOHO」に変更した、というおぼえがきでした。

 

※デザインテーマを新しくインストールすると、独自に設定したCSSと背景画像が上書きされてしまうのでご注意ください。以下、『はてなブログ Perfect GuideBook 改訂第2版』p76の引用です。

ブログに独自のCSS、背景画像を設定している場合は、テーマストアから新規にテーマをインストールして変更すると上書きされてしまいます。独自にCSSを設定している場合は、CSS、背景画像のバックアップは忘れないようにしてください。 

 

>>>Perfect GuideBookは改訂第2版が出ています。チェックはこちらから!!

 

関連エントリー: