ライターAKIRAが在宅ワーカーを応援するブログ

在宅ワーカーの方たちが成功できるような情報を発信するブログです!

はてなブログをスマホ対応のデザインに変更!その方法を詳しく紹介

スマホに対応したデザインへ変更

私のブログは、あまりスマホ対応されていないデザインでしたが、今回スマホ対応のデザインに変更したので、その方法を紹介します!

スマホでサイドバーを表示させる方法!

レスポンシブデザインを確認

はてなブログは、スマホに対応してくれるブログなのですが、1つ問題がありました。それは何も設定していないと、スマホだとサイドバーが表示されなかったのです。

そこで色々と調べてみたら「デザイン」の「スマートフォン」で「レスポンジブデザイン」をチェックする必要があります。

しかし、ここをチェックした場合にPCで表示されるデザインが縮小された状態で、スマホに表示される時があるのです。

そのようなブログは、スマホで見ると操作しづらくなります。しかし、2つの設定をすると、スマホに対応して操作しやすくできる方法があるのです。

 

1.下に書いた通りの事をする必要があります。

テーマのCSSの先頭にResponsive: yesという行を含んだコメントを挿入する

はてなブログテーマ制作の手引き - はてなブログ ヘルプ

2.レスポンジブデザインに対応したデザインテーマを設定する。 

 

 私は、この設定を読んで色々と試行錯誤していたのですが、分かりませんでした。そこでGoogleで検索していたら、ブロガー仲間の「もっち」さんが、その方法について紹介していました。

happylife-tsubuyaki.hatenablog.com

さらに、もっちさんはレスポンジブデザインに対応した物まで詳しく紹介していたのです!

happylife-tsubuyaki.hatenablog.com

もっちさんのお陰で、スマホ対応のデザインに出来ました。本当にありがとうございました。私はもっちさんが紹介していたデザインテーマの中から

「レスポンジブルー」という物を選びました。以前よりもスッキリとしたデザインになって、気に入ってます。さらに画像の外枠にグレーの線が付くのですが、これはありがたいですね。

なぜなら、画像とブログの背景が白でも、画像の境界が分かるからです!

文章を隠す機能!

文章を隠して見やすいデザインを達成

このレスポンジブデザインにしたら、新たな問題が発生します。それはスマホで記事の文章が、全て表示されるのです。スマホではサイドバーが表示されるのはずっと下のほうにあるので、サイドバーにたどりつくまで時間をかけてしまう事になるのです。

そこで、記事を折りたたむ方法をインターネットで調べてみたら、ありました。それでは、私のブログの記事を例に紹介します。

 

文章が見える記事

文章を再表示させた画像

この「リーダー論で学ぶ!メンバーを励ます重要性」という記事が、全ての文章が表示されている状態です。タイトル・1つ目の画像・リード文を表示して、本文を隠します。

 

橋みたいなマークをクリック!

続きを読むというマークをクリック

まず、ここから隠したいという所へカーソルを移動します。その後に橋みたいなマーク(続きを読む)というものをクリックしましょう!

 

点線が表示!

点線が表示された画像

点線が表示されたのが分かるはずです。点線が表示されて空白行が出来たら、お好みで削除するか、そのままにして記事を更新しましょう!

 

文章が隠れます!

文章が隠される事を確認した画像

記事が更新した画面を見たらリード文の次から「続きをよむ」と表示されて、本文が隠れましたね!

この続きをクリックすれば、本文が表示される仕組みになっています。スマホで見るとすぐ下にサイドバーが表示されるようになっています。そして嬉しい誤算だったのですが、PCの画面でも、こちらの設定のほうがスッキリして操作しやすくなりました。

スマホ対応にした驚愕の理由!

スマホに対応したブログを作成した重要な事実

私が、いきなりブログをスマホ対応にしたのは、最近購入した「スマホ客を呼び込む 最強の仕掛け」という本を読んだからです。

この本では2015年4月時点で、PCによるネットユーザーは5100万人で、スマホによるネットユーザーは4832万人で拮抗していた事を知りました。この事から、ブログを深夜の時間帯に奇襲攻撃なみにブログのデザイン変更を完了させた訳です。

以前から、私のブログを見ていた方は「あれ?凄くデザインが変わったな」と思ってくれたでしょう(思ってもらわなくては困ります)。