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

こんにちは。マリ(@damarino_oheya)です!

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

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

 

以前、今のブログデザインにカスタマイズしたことを記事にしていました。

マリ

PC版デザインのことを書くのに精一杯で、スマホ版のカスタマイズについては触れただけでした。

この記事では、スマホ版デザインでカスタマイズしたことについてまとめています。

 

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

トップページを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を入れ込む

 

それだけでできます。

 

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

マリ

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

こちらの記事もどうぞ

はてなブログのヘッダーにテキストリンクを作る方法

はてなブログのヘッダーに細長いテキストリンクを挿入する方法

4 COMMENTS

miyucho728

実は、こちらのスマホ版を初めて見た時に「スマホ版でもトップをカード型に出来るんだ~!?」と思って、マネしました!
結局、私は自力では上手く出来ずプロにお願いしたんですが(^-^;
細かいところまでこだわられていて素敵です!
参考にさせてもらいます(*^^*)

返信する
damarin

ミユキ様
はてなテーマの「Undershirt」はスマホ版のカード型2列も公開されているので本当にありがたいですよね。
プロにお願い・・・!そんなすばらしい選択肢があるとは思いませんでした〜!
自力でコツコツするのも好きなのでググりながらカスタマイズしています〜!何か参考になれば嬉しいです^^

返信する

コメントを残す

メールアドレスが公開されることはありません。