この記事には広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売上の一部が還元されることがあります。
こんにちは。マリ（＠damarino_oheya）です！
このブログははてなブログpro
で書いています。（追記＊現在はワードプレスに移転しました）
私ははてなブログ歴2年ですが、はてなブログの良いところはブログのデザインをわりと自由にカスタマイズできるところだと思っています。
以前、今のブログデザインにカスタマイズしたことを記事にしていました。
マリ
この記事では、スマホ版デザインでカスタマイズしたことについてまとめています。
（注意＊ブログデザインをカスタマイズするときは必ずバックアップを取ってからお願いいたします。）
トップページを2列のカード型にする
このブログは、シンプルなデザインで人気のブログテーマ「UnderShirt」を使っています。
UnderShirtのデフォルトではスマホ版は1列表示ですが、それを2列にするためのCSSが公開されています。
余白を小さくしたり無くしたりといったことも丁寧に教えてくださっているのでコピペで憧れの2列のカード型にすることができるんです。（ありがたい〜！）
もちろん1列のままでも素敵ですが、私の場合は1列だとアイキャッチが大きく表示されるのは恥ずかしいし、とにかく2列が良かったので2列表示にしています。
スマホ版を2列にするときのコードに
といったコードが出てきます。
たぶん「{この中}に書いたコードは最大幅が768px以下の時に反映されるよ」 ということだなと思い、スマホ版を2列表示にするついでにそのほかのカスタマイズコードもこの中に書き足し、ちょこちょことスマホ版のカスタマイズをしています。
トップページのカード型をカスタマイズ
スマホ版のトップページ。日付やカテゴリーなどはパソコン版と同じですが、スマホ用にカスタマイズしているのはこちらです。
- 記事タイトル（フォントサイズ小さく）
- 枠と背景色（枠あり・丸みなし・背景色なし）
記事タイトル
パソコン版でのトップページでの記事タイトルのコードはこちらです。
スマホ版はこちら。
行の幅を狭くして、フォントサイズを小さくしています。
マリ
スマホ版だけに反映したいコードは、スマホ版を2列にした時のコードの下{この中}に入れ込みます。
枠と背景色を変える
パソコン版ではトップページのカードの枠を少し丸くしていますが、スマホから見た時は丸みを無くしています。
パソコン版
パソコン版では、背景色あり・カードを白にして色で背景との区別をつけています。
スマホ版
スマホ版では背景色を無くしカードの枠で区別をつけています。
また、パソコン版と同じ背景色だとスマホ表示ではくどくなるので、背景色を白に変更しています。
ナビゲーション
このブログで使っているナビゲーションはこちらの記事を参考にさせていただいています。
こちらのコードを使うと、
- パソコン版は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を入れ込む
それだけでできます。
トップページの文字サイズ変更などから始めると楽しめるかなと思います。
マリ
こちらの記事もどうぞ
はてなブログのヘッダーに細長いテキストリンクを挿入する方法
実は、こちらのスマホ版を初めて見た時に「スマホ版でもトップをカード型に出来るんだ～！？」と思って、マネしました！
結局、私は自力では上手く出来ずプロにお願いしたんですが(^-^;
細かいところまでこだわられていて素敵です！
参考にさせてもらいます(*^^*)
ミユキ様
はてなテーマの「Undershirt」はスマホ版のカード型2列も公開されているので本当にありがたいですよね。
プロにお願い・・・！そんなすばらしい選択肢があるとは思いませんでした〜！
自力でコツコツするのも好きなのでググりながらカスタマイズしています〜！何か参考になれば嬉しいです＾＾
とても綺麗なデザインですね。
メチャ、センスを感じます。
あトん様
素直に嬉しいです〜！コメントありがとうございました！