Migaru-Days

身軽に暮らす、考える。

【カスタマイズ】はてなブログのスマホ版ブログデザインでカスタマイズしたこと

スポンサーリンク

 

このブログははてなブログで書いています。

私ははてなブログ歴2年ですが、はてなブログのいちばん良いところはブログのデザインをわりと自由にカスタマイズできるところだと思っています。

 

以前、今のブログデザインにカスタマイズしたことを記事にしていましたが、スマホ版のカスタマイズについては触れただけでした。

 

今回はスマホ版でカスタマイズしたことについてまとめておこうと思います。

 

(注意*ブログデザインをカスタマイズするときは必ずバックアップを取ってからお願いいたします。)

 

 

トップページを2列のカード型にする

このブログは、シンプルなデザインで人気のブログテーマ「UnderShirt」を使っています。

UnderShirtのデフォルトではスマホ版は1列表示ですが、それを2列にするためのCSSが公開されています。

 

余白を小さくしたり無くしたりといったことも丁寧に教えてくださっているのでコピペで憧れの2列のカード型にすることができるんです。(ありがたい〜!)

blog.rokuzeudon.com

もちろん1列のままでも素敵ですが、私の場合は1列だとアイキャッチが大きく表示されるのは恥ずかしいし、とにかく2列が良かったので2列表示にしています。

 

スマホ版を2列にするときのコードに

といったコードが出てきます。

 

たぶん「{この中}に書いたコードは最大幅が768px以下の時に反映されるよ」 ということだなと思い、スマホ版を2列表示にするついでにそのほかのカスタマイズコードもこの中に書き足し、ちょこちょことスマホ版のカスタマイズをしています。

 

 

トップページのカード型

f:id:damarin:20180902102536p:plain

スマホ版のトップページ。日付やカテゴリーなどはパソコン版と同じですが、スマホ用にカスタマイズしているのはこちらです。

  • 記事タイトル(フォントサイズ小さく)
  • 枠と背景色(枠あり・丸みなし・背景色なし)

 

記事タイトル

パソコン版でのトップページでの記事タイトルのコードはこちらです。

 

スマホ版はこちら。

行の幅を狭くして、フォントサイズを小さくしています。かなり微妙なカスタマイズなので気にならない人はどうでもいいことですね。(笑)

スマホ版だけに反映したいコードは、スマホ版を2列にした時のコードの下{この中}に入れ込みます。

 

 

枠と背景色を変える

パソコン版ではトップページのカードの枠を少し丸くしているのですが、スマホから見た時は丸みを無くしています。

パソコン版

f:id:damarin:20180902162410p:plain

パソコン版では、背景色あり・カードを白にして色で背景との区別をつけています。

 

スマホ版

f:id:damarin:20180903102458p:plain

スマホ版は、背景色を無くしカードの枠で区別をつけています。パソコン版の背景色を使うとスマホ表示ではくどくなる印象がしたので(色的に)白に変更しています。

 

ナビゲーション

このブログで使っているナビゲーションはこちらの記事を参考にさせていただいています。

gakublog.com

 

こちらのコードを使うと、

  • パソコン版は1行に6項目
  • スマホ版は1行に2項目の3行

といったナビゲーションができます。

しばらくはコードをそのまま使わせていただいていましたが、スマホ版は少しカスタマイズして1行に3項目の2行に変更しています。

 

上記サイトのCSSをコピペして使っているのですが、CSSの構成として、

/* ①ヘッダーナビ */
ナビゲーションのCSS(長い)←これが土台 


/* ②ヘッダーナビ  */
/*横幅768px以上に適応*/
@media screen and (min-width: 768px) {
横幅768px以上の時(パソコン)のナビゲーションのCSS(短い)←これがパソコン用 
}

というふうになっているので、①のヘッダーナビにある土台のコードを変えています。 

 

するとこんな感じになります。

f:id:damarin:20180902230736p:plain

 

コードはこちら。

 

かなりめんどくさい作業ですよね。

 

やっとパソコン版デザインができたと思ったら、スマホ版も作らないといけない作業はすごく大変・・でも始めてしまったから今更辞められないという。(涙)

とにかくめんどくさいです!!

 

  

記事内

記事内でパソコン版とスマホ版で変えたのはこちら。

  • 目次を変える
  • 余白を変更

 

目次を変える

目次は、パソコン版では白い背景色ですが、スマホ版では背景色が白だと読みにくい気がするので少しだけグレーの背景色に変えています。

 

目次カスタマイズのコードはこちら。

忘れてましたが、フォントサイズも変更しているようです。

 

 

余白を変更

記事内とサイドバー部分の余白を少し調整しています。記事の外側の余白は加減が難しいところですね。

 

こちらの記事を参考にさせていただいています。

yossense.com

余白や行間・文字間は、インストールしているテーマごとに個性があるのかな?と感じています。素人にはなかなか難しいです。。

 

 

その他

スマホ版でカスタマイズしたそのほかの部分はこちら。

  • ページビュー
  • 上のアレを非表示

 

ページビュー

ページビューはパソコン版とスマホ版、それぞれのデザインに合うようなカラーにしています。

パソコンではこんなかんじ

f:id:damarin:20180903100853p:plain

 

スマホ版はこちら

f:id:damarin:20180903100902p:plain

パソコン版・スマホ版デザインの雰囲気に合わせたい方におすすめです。

 

上のアレを非表示

パソコン版では、はてなブログのグローバルヘッダーを表示していますが、スマホ版では表示していません。

display:none;でかんたんに非表示にできます。

/* 上のアレを非表示 */
#globalheader-container{
display:none;
}

パソコン版でもdisplay:none;にすればカッコいいのですが、私自身が使いやすいのでつけたままにしています。

 

 

まとめ

スマホ版のカスタマイズはとにかくめんどくさいけど、楽しいです。

スマホ版のカスタマイズ方法としては、

 

①このコードを使う

 

②{この中}にスマホ用に使いたいデザインのCSSを入れ込む

 

それだけですね。トップページの文字サイズ変更などから始めると楽しめるかなと思います。

間違ってる!とか、もっと簡単な方法があるよー!というアドバイスがあればぜひ教えてください。

  

 

 

▼このような記事もあります

前回のブログデザインのカスタマイズ記事です。参考にしてくださっている方がちらほらいらっしゃるようで嬉しいです!

www.oheya-migaru.com

 

初めての時のカスタマイズ記事はこちら。現在素人の私の、超新人ど素人時代のカスタマイズです。はてなブログ初心者さんにおすすめです。

www.oheya-migaru.com

 

キーワードで探す