皆さん、はてなブログのスマホのデザインは変えていますか？
はてなブログはたくさんのデザインがテーマストアから簡単に設定できるのが便利ですよね。
ですが、⬆で設定したデザインをスマホにも反映させるには、もう1つやることがあるのは知っていますか？
私は最初、
スマホ用のデザインの
設定方法が分かりませんでした!!!
パソコンからデザインを変えても
スマホから見るとデザインはそのまま…
はてなブログを始めてすぐの時は
スマホ用のデザインを変えるのはきっと難しいんだなぁなんて思っていたのです。
私と同じように
変え方がわからない！という理由でスマホのデザインをデフォルトのままにされている方がおりましたら！
簡単に設定できますのでやってみるのはいかがでしょうか🧸
ということで、今回はスマホ用デザインの設定方法について書いていきます。
また、無料版と有料版では表示のされ方が違うのでそれについても併せて説明します。
スマホでの見え方
 |
 |
- デザインを何もいじっていない
- もしくはパソコン表示のデザインは変えたけどスマホ表示についてはよく分からない
そのような状態でしたら、スマホで見た時おそらく上の左側のデザインになっているはずです。
右側がデザインを反映させた画面です。
ブログの雰囲気がガラリと変わりますよね💡
選択したデザインはUnderShirt
スクショは私のサブブログです😊
スマホにデザインを反映させる方法
パソコンで設定する場合
ダッシュボードページから
左の赤丸部分【デザイン】にアクセスする。
【📱】(赤丸部分)をクリックする。
左下にある【🔧詳細設定】をクリック。
レスポンシブデザインにチェックを入れる。
画面左上の変更を保存するをクリックして完了です！
これをクリックしないと設定が反映されないので忘れないよう注意してくださいね。
スマホで設定する場合
Androidでの説明になりますが
画面の上部か下部にある【︙】(①赤丸部分)をタップ。
出てきた欄の【PC版サイト】(②赤丸部分)をタップ。
【デザイン】をタップして『パソコンで設定する』と同様の操作をします。
スマホでも変更を保存するを忘れずにタップしてくださいね。
この操作で、無料版・有料版問わず
スマホでの表示もパソコン版と同じデザインにすることができます。
有料プランと無料プランの違い
ここまでスマホにもデザインを反映させる手順を説明してきましたが
無料版をお使いの方へ注意点があります。
はてなブログ無料版では
トップページに表示される記事を
一覧形式にすることはできません！
有料プランでは
ダッシュボード→⚙️設定→詳細設定
詳細設定からブログのトップページに表示される記事を
- 全文で表示するか
- 一覧で表示するか
を選択できるのですが
無料版では【全文形式】しか選ぶことができないのです🥺
□
全文形式しか選べないとどうなるかと言うと…
スマホでブログを見ると画面いっぱいに最新の記事がドーンと表示されることになります。
 |
 |
左側が一覧形式、右側が全文形式です。
短い記事しか書かないよーという方は気にならないかもしれませんが、長めの記事を書いたり・途中に画像を入れたりすると次の記事に辿り着くまで時間と手間が掛かってしまいます。
これでは読者さんは読んでみたい記事をタイトルから見つけることがきっと難しいですよね💦
色々な記事を読んでもらえず離脱する可能性も考えられます。
こんなことを書いていると
そんな設定をわざわざ勧めるな！
そんなことになるならデフォルトのデザインで十分！
と思われる方も居るかと思います🙇🏻♀️
そこで！
無料版でスマホデザインを適応して、なおかつ！見やすく表示させる方法
もこれから説明します(*･ω･)*_ _)ﾍﾟｺﾘ
無料版でも見やすく工夫する方法
『続きを読む』を使う
記事を書く時に『続きを読む』を設定し
トップページに表示される記事を分割する方法です。
▼【見たまま編集】と【はてな記法】でのやり方です。
トップページに表示させたい文章の下で赤丸部分を押すと『====』が挿入され、続きを読む設定が完了です！
『続きを読む』のデメリット
記事を書くついでにできるのでお手軽ではあるのですが…
記事1つ1つに、個々に設定していく必要があります！
記事が少ししかないのであれば1つずつ編集すればよいのですが何十、何百と記事がある場合、この作業をするのは現実的ではありません！
ということで、
CSSコードで自動的にどうにかできないか考えてみました🧸
トップページの本文を非表示にする
CSSコードで
- トップページに載る記事本文
- ユーザーの名前とID
- 『○日前』のように表示される更新情報
を表示されないようにしました。
記事はタイトルから読むことができ、これで
無料プランでも
擬似的に一覧形式を再現する
ことができました🙌
無料版で自動的に挿入される広告は⇧このようになります。
※広告により見え方が異なる場合があります。
ちょこっと注意点
全文形式を一覧形式のように見せている状態なので、本来の一覧形式のようにサムネイル画像を表示することはできません。
プログラミングすればできるのかもしれませんが、今の私にはわかりませんでした(T_T)
トップページをスッキリさせることはできるので、試してみようかなと思ってくださる方がおられましたら、下のコードを使ってみてね。
CSSコード
ダッシュボード→左欄【デザイン】→🔧マーク→
{}デザインCSSに貼り付けてください。
/* トップページの本文を非表示にする */
.page-index .entry-content {
max-height: 0;
overflow: hidden;
}
/*記事下の一部を非表示にする*/
span.author.vcard{
display:none;
}
span.entry-footer-time {
display: none;
}⇧このコードでは
パソコンで見たときも
スマホで見たときも
どちらも疑似一覧形式で表示されます。
スマホでは疑似一覧形式で表示させて、パソコンで見たときは今まで通り全文形式にしたい場合は下記のコードを使ってください。
/* 【スマホのみ】トップページの本文を非表示にする */
@media(max-width: 767px){
.page-index .entry-content {
max-height: 0;
overflow: hidden;
}
/*記事下の一部を非表示にする*/
span.author.vcard{
display:none;
}
span.entry-footer-time {
display: none;
}
}先頭の@media〜で
スマホのみに適用されるようにしています。
おわりに
あれもこれもと書いていたらだいぶ長くなってしまいました！
文章力もあまり自信がないのでうまく伝えられてるか、不安な部分もありますが💦
スマホデザインの変え方が分からずそのままにしていた方のお力や何かのヒントになればよいなと思います😊
わからないことがありましたらお気軽にコメントくださいね！
お読みいただき、ありがとうございます。
それではまたね🧸◌𓈒𓐍