このブログははてなブログproで書いています。
はてなブログの良いところの一つはブログのデザインをわりと自由にカスタマイズできるところです。
この記事では、スマホ版デザインでカスタマイズしたことについてまとめています。
（注意＊ブログデザインをカスタマイズするときは必ずバックアップを取ってからお願いいたします。）
トップページを2列のカード型にする
このブログは、シンプルなデザインで人気のブログテーマ「UnderShirt」を使っています。
UnderShirtのデフォルトではスマホ版は1列表示ですが、それを2列にするためのCSSが公開されています。
余白を小さくしたり無くしたりといったことも丁寧に教えてくださっているのでコピペで憧れの2列のカード型にすることができるんです。（ありがたすぎる！）
もちろん1列のままでも素敵ですが、私の場合は1列だとアイキャッチが大きく表示されるのは照れるし、とにかく2列が良かったので2列表示にしています。
スマホ版を2列にするときのコードに
といったコードが出てきます。
たぶん「{この中}に書いたコードは最大幅が768px以下の時に反映されるよ」 ということだなと思い、スマホ版を2列表示にするついでにそのほかのカスタマイズコードもこの中に書き足し、ちょこちょことスマホ版のカスタマイズをしています。
トップページのカード型をカスタマイズ
スマホ版のトップページ。日付やカテゴリーなどはパソコン版と同じですが、スマホ用にカスタマイズしているのはこちらです。
- 記事タイトル（フォントサイズ小さく）
- 枠と背景色（枠あり・丸みなし・背景色なし）
記事タイトル
▼パソコン版でのトップページでの記事タイトルのコードはこちらです。
▼スマホ版はこちら。
行の幅を狭くして、フォントサイズを小さくしています。
かなり微妙なカスタマイズです。気にならない人はどうでもいいことでしょう。
スマホ版だけに反映したいコードは、スマホ版を2列にした時のコードの下{この中}に入れ込みます。
枠と背景色を変える
パソコン版ではトップページのカードの枠を少し丸くしていますが、スマホから見た時は丸みを無くしています。
パソコン版
パソコン版では、背景色あり・カードを白にして色で背景との区別をつけています。
スマホ版
スマホ版では背景色を無くしカードの枠で区別をつけています。
また、パソコン版と同じ背景色だとスマホ表示ではくどくなるので、背景色を白に変更しています。
ナビゲーション
このブログで使っているナビゲーションはこちらの記事を参考にさせていただいています。
（2024年追記＊記事がなくなっていました）
こちらのコードを使うと、
- パソコン版は1行に6項目
- スマホ版は1行に2項目の3行
といったナビゲーションができます。
しばらくはコードをそのまま使わせていただいていましたが、スマホ版は少しカスタマイズして1行に3項目の2行に変更しています。
上記サイトのCSSをコピペして使っているのですが、CSSの構成として、
/* ①ヘッダーナビ */
ナビゲーションのCSS（長い）←これが土台
/* ②ヘッダーナビ */
/*横幅768px以上に適応*/
@media screen and (min-width: 768px) {
横幅768px以上の時（パソコン）のナビゲーションのCSS（短い）←これがパソコン用
}
というふうになっているので、①のヘッダーナビにある土台のコードを変えています。
するとこんな感じになります。
コードはこちら。
てかこれ、かなりめんどくさい作業ですよね。
やっとパソコン版デザインができたと思ったら、スマホ版も作らないといけない作業はすごく大変・・でも始めてしまったから今更辞められないという。（涙）
カスタマイズって、とにかく面倒です。でも楽しくてやめるわけにはいかない。。。
記事内
記事内でパソコン版とスマホ版で変えたのはこちら。
- 目次を変える
- 余白を変更
目次を変える
目次は、パソコン版では白い背景色ですが、スマホ版では背景色が白だと読みにくい気がするので少しだけグレーの背景色に変えています。
目次カスタマイズのコードはこちら。
フォントサイズも変更しています。
余白を変更
記事内とサイドバー部分の余白を少し調整しています。記事の外側の余白は加減が難しいところですね。
こちらの記事を参考にさせていただいています。
余白や行間・文字間は、インストールしているテーマごとに個性があるのかな？と感じています。素人にはなかなか難しいです。。
その他
スマホ版でカスタマイズしたそのほかの部分はこちら。
- ページビュー
- 上のアレを非表示
ページビュー
ページビューはパソコン版とスマホ版、それぞれのデザインに合うようなカラーにしています。
パソコンではこんなかんじ
スマホ版はこちら
パソコン版・スマホ版デザインの雰囲気に合わせたい方におすすめです。
上のアレを非表示
パソコン版では、はてなブログのグローバルヘッダーを表示していますが、スマホ版では表示していません。
display:none;でかんたんに非表示にできます。
/* 上のアレを非表示 */
#globalheader-container{
display:none;
}
パソコン版でもdisplay:none;にすればカッコいいのですが、私自身が使いやすいのでつけたままにしています。
まとめ
というわけで、スマホ版デザインのカスタマイズについてまとめてみました。
カスタマイズは大好きだけど、とにかく面倒なのに楽しくて。。。ついつい時間を忘れてしまいます。
スマホ版のカスタマイズ方法としては、
①このコードを使う
{この中}にスマホ用に使いたいデザインのCSSを入れる
これだけでできます。
トップページの文字サイズ変更などから始めると楽しめるかなと思います。
