2019-09-21こんにちは。マリ(@damarino_oheya)です!このブログははてなブログproで書いています。(追記*現在はワードプレスに移転しました)私ははてなブログ歴2年ですが、はてなブログの良いところはブログのデザインをわりと自由にカスタマイズできるところだと思っています。以前、今のブログデザインにカスタマイズしたことを記事にしていました。マリPC版デザインのことを書くのに精一杯で、スマホ版のカスタマイズについては触れただけでした。この記事では、スマホ版デザインでカスタマイズしたことについてまとめています。(注意*ブログデザインをカスタマイズするときは必ずバックアップを取ってからお願いいたします。目次を変える余白を変更その他ページビューパソコンではこんなかんじスマホ版はこちら上のアレを非表示まとめトップページを2列のカード型にするこのブログは、シンプルなデザインで人気のブログテーマ「UnderShirt」を使っています。UnderShirtのデフォルトではスマホ版は1列表示ですが、それを2列にするためのCSSが公開されています。余白を小さくしたり無くしたりといったことも丁寧に教えてくださっているのでコピペで憧れの2列のカード型にすることができるんです。(ありがたい〜!)blog.rokuzeudon.comもちろん1列のままでも素敵ですが、私の場合は1列だとアイキャッチが大きく表示されるのは恥ずかしいし、とにかく2列が良かったので2列表示にしています。スマホ版を2列にするときのコードにといったコードが出てきます。いうことだなと思い、スマホ版を2列表示にするついでにそのほかのカスタマイズコードもこの中に書き足し、ちょこちょことスマホ版のカスタマイズをしています。トップページのカード型をカスタマイズスマホ版のトップページ。日付やカテゴリーなどはパソコン版と同じですが、スマホ用にカスタマイズしているのはこちらです。記事タイトル(フォントサイズ小さく)枠と背景色(枠あり・丸みなし・背景色なし)記事タイトルパソコン版でのトップページでの記事タイトルのコードはこちらです。行の幅を狭くして、フォントサイズを小さくしています。マリかなり微妙なカスタマイズです。気にならない人はどうでもいいことでしょう。スマホ版だけに反映したいコードは、スマホ版を2列にした時のコードの下{この中}に入れ込みます。枠と背景色を変えるパソコン版ではトップページのカードの枠を少し丸くしていますが、スマホから見た時は丸みを無くしています。パソコン版パソコン版では、背景色あり・カードを白にして色で背景との区別をつけています。スマホ版スマホ版では背景色を無くしカードの枠で区別をつけています。パソコン版と同じ背景色だとスマホ表示ではくどくなるので、背景色を白に変更しています。ナビゲーションこのブログで使っているナビゲーションはこちらの記事を参考にさせていただいています。gakublog.comこちらのコードを使うと、パソコン版は1行に6項目スマホ版は1行に2項目の3行といったナビゲーションができます。コードをそのまま使わせていただいていましたが、スマホ版は少しカスタマイズして1行に3項目の2行に変更しています。{横幅768px以上の時(パソコン)のナビゲーションのCSS(短い)←これがパソコン用}というふうになっているので、1のヘッダーナビにある土台のコードを変えています。するとこんな感じになります。めんどくさい作業ですよね。パソコン版デザインができたと思ったら、スマホ版も作らないといけない作業はすごく大変・・でも始めてしまったから今更辞められないという。(涙)マリカスタマイズって、とにかく面倒です。記事内でパソコン版とスマホ版で変えたのはこちら。目次を変える目次は、パソコン版では白い背景色ですが、スマホ版では背景色が白だと読みにくい気がするので少しだけグレーの背景色に変えています。目次カスタマイズのコードはこちら。忘れてましたが、フォントサイズも変更しているようです。記事内とサイドバー部分の余白を少し調整しています。記事の外側の余白は加減が難しいところですね。こちらの記事を参考にさせていただいています。yossense.com余白や行間・文字間は、インストールしているテーマごとに個性があるのかな?と感じています。素人にはなかなか難しいです。その他スマホ版でカスタマイズしたそのほかの部分はこちら。上のアレを非表示ページビューページビューはパソコン版とスマホ版、それぞれのデザインに合うようなカラーにしています。パソコンではこんなかんじスマホ版はこちらパソコン版・スマホ版デザインの雰囲気に合わせたい方におすすめです。上のアレを非表示パソコン版では、はてなブログのグローバルヘッダーを表示していますが、スマホ版では表示していません。display:none;でかんたんに非表示にできます。*/#globalheader-container{display:none;}パソコン版でもdisplay:none;にすればカッコいいのですが、私自身が使いやすいのでつけたままにしています。まとめというわけで、スマホ版デザインのカスタマイズについてまとめてみました。カスタマイズは大好きだけど、とにかく面倒なのに楽しくて。時間を忘れてしまいます。スマホ版のカスタマイズ方法としては、1このコードを使う2{この中}にスマホ用に使いたいデザインのCSSを入れ込むそれだけでできます。トップページの文字サイズ変更などから始めると楽しめるかなと思います。マリ間違ってる!とか、もっと簡単な方法があるよー!というアドバイスがあればぜひ教えてください。2018-09-03ミユキ様はてなテーマの「Undershirt」はスマホ版のカード型2列も公開されているので本当にありがたいですよね。2018-10-18とても綺麗なデザインですね。コメントをキャンセルメールアドレスが公開されることはありません。雑記Aboutマリ身軽に暮らす日々のことを書いています。育児中だからこそシンプルな暮らしで楽するヒントを綴ります。長所を知って好きな自分を知ろう!私の長所100個一覧にしてみた。