mitopi はてなブログ版

肩こりのお悩み中心にアラサー女子の興味あることまとめます。

はてなブログのスマホ用テーマはレスポンシブ対応しているテーマじゃないとできない?デザイン→スマートフォンでアクセントカラーと詳細設定をしてみた

さて、今回ははてなブログスマホ用デザインテーマについての設定を見ていきたいと思います。

デザインテーマ「Fresh Green」はレスポンシブ対応していない欠点がある

①ダッシュボードの[デザイン]を選択

f:id:EnjoyFreeApp:20170702081209p:plain

スマートフォンを選択

f:id:EnjoyFreeApp:20170702081225p:plain


本日は、はてなブログスマホ用のデザインテーマを設定します。

と、書きたかったのですが、スマホ用おのデザインテンプレートってないんですね…

たしかFC2とかではスマホ用のテンプレ設定できたのですが…

はてなブログは詳細設定には「レスポンシブデザイン」チェックボックスしかないです。

f:id:EnjoyFreeApp:20170702081441p:plain

レスポンシブデザインって、IT関係の用語でよく使われていますが、こういう意味らしいです↓

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、デスクトップパソコンや携帯電話といった幅広いデバイスのいずれに対しても、外観や操作方法が最適化された (リサイズ、パンニング、スクロールを最小限にし、読みやすく、ナビゲーションしやすい) サイトを制作するためのウェブデザインの手法。

引用元 Wikipedia https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3

 

はてなブログのデザインテーマには、このレスポンシブに対応しているテーマとそうでないテーマがあり、今気に入って使っている「Fresh Green」で試しに「レスポンシブデザイン」をONにしてみたところ、この通り。

f:id:EnjoyFreeApp:20170702082140j:plain

スマホのページがパソコン用のレイアウトで表示されてしまいました。

ちなみにこちらは、元に戻した時のスマホの表示です↓

f:id:EnjoyFreeApp:20170702082157j:plain

だから、レスポンシブデザインのデザインテーマを勧めるブロガーさんが多いんだ、と一人で納得していたのですが、スマホは白地のデザインのままでもいいと思って変えないことにしました。

 

他に何か、スマートフォンで設定できないかなぁとみていたところ、上部に「アクセントカラー」っていうのがありました。

これはすぐ編集できそうだと思って、変えてみました。

まずはアクセントカラー初期設定を確認してみました。

f:id:EnjoyFreeApp:20170702082736p:plain

初期設定は黒なんですね↓

f:id:EnjoyFreeApp:20170702083347j:image

次にアクセントカラー茶色に変えてみました。

f:id:EnjoyFreeApp:20170702082739p:plain

このようにスマホの画面左上部「Hatena Blog」の文字色が茶色に変わったことがわかります。

 f:id:EnjoyFreeApp:20170702083402j:image

 

と、いうことでスマホ用のデザインテーマの編集は断念しましたが、スマホの設定のアクセントカラーは簡単に設定できました。