5分でカスタマイズ完了！スマホ表示をPC版と同じにする方法【はてなブログ】
記事に訪問して下さり誠にありがとうございます。
この記事は "5分でカスタマイズ完了！スマホ表示をPC版と同じにする方法【はてなブログ】"についてお話していきます。この記事は約5分ほどで読み終わります。
1.はてなブログをスマホ表示でみると？
はてなブログで12記事を書いたロバちゃん（皆様のおかげでここまで書くことが出来ました、ありがとうございます）。さて、自分のウェブサイト”Life of donkey”をスマホ検索すると。。
このように”PC版とは全く異なるデザインで表示”されていました。せっかくPCでデザインカスタマイズしたのにスマホ版では違うデザインだと萎えますよね。 これは詳細設定のレスポンシブルデザインを適用することでスマホでも同様デザインに変更できます。
Google Consoleの結果を見ると、やはりスマホからの検索が多いので、デザイン変更する価値は十分にあると思います。そのことを踏まえて私のブログもPC版と統一しました。
今回は、スマホ版のデザインをPC版と統一する方法にて伝えていきます！
2. スマホ版をPC版デザインに変更する方法！
- Hatenaブログのダッシュボードをクリックし、デザインのタブをクリック。
- ３つあるタブの中から”スマートフォン（スマホ型のアイコン）”を選択し、そこにある詳細設定をクリック。するとレスポンシブルデザインのタブが出てくるので、チェック欄にチェックを入ます。
これで完了なのですが注意点があります！
- レスポンシブルデザインそのまま利用するとスマホ版の文字が小さくて読めないです。
これを踏まえて記事を書くときは全体の文字の大きさを変更することを強くおすすめします。
解決方法として私が行っていることは、
- デザインCSSより文字の大きさを17ptに変更する。
具体的なやり方について説明します。
ここに打ち込むソースなのですが、
.entry-content {
color: #000000;
font-size:XXXpx;
}
としてください。XXXはフォントの大きさを決めてください。私の場合、17と入力して使用しています。
【雑談】
この記事を書いている時、この曲を聞いていました。小学生の頃からパンクが好きです。
今回はスマホ表示をPC版と同じにする方法について書かせて頂きました。他にもはてなブログ初心者向けに、googleconsoleへの登録方法・カスタムURLの書き方についても書きました！ぜひぜひチェックしてください。
最後まで読んでいただき本当にありがとうございます。 Prrrffff（ロバの鳴き声）
