はてなブログのテーマをレスポンシブ対応のMinimalismに変更。

このブログのデザインテーマをレスポンシブ対応のMinimalismに変更。

変更にあたって行った作業の備忘録。

１．レスポンシブデザインにチェック

デザイン ⇒ スマートフォン ⇒ 詳細設定

「レスポンシブデザイン」にチェックを入れる。

f:id:art2nd:20190211232155j:plain

２．スマホも記事一覧の対象にする（headのスクリプトを修正）

設定 ⇒ 詳細設定 ⇒ headに要素を追加

ブログのトップページを記事一覧にするためのスクリプトでスマホを対象外にしている箇所をコメントアウト。

<script>
//if (!navigator.userAgent.match(/(Android|iPhone|iPod|Windows Phone)/)) {
	if (location.href == 'https://2ndart.hatenablog.com/') {
		location.href = 'https://2ndart.hatenablog.com/archive';
	}
	if (document.title == '記事一覧 - 晴歩雨描') {
		document.title = '晴歩雨描';
	}
//}
</script>

Minimalismの標準のままでは、ブラウザの横幅を小さくした時に、メインのカラムの幅が広がりすぎてデザインが崩れる。

ネットを検索したら以下の記事が見つかったので、参考にさせてもらい対策。

以下、上記記事を参考に設定した事。

３．デザインCSSを変更

デザイン ⇒ カスタマイズ ⇒ ｛｝デザインCSS

上記記事にあるold.cssを、以下のgithubにコピーして使用。デザインCSSでimportしているcssを以下に変更。

@import url("https://ok2nd.github.io/hatena-css/minimalism-20170618.css");

４．metaタグでviewport設定

設定 ⇒ 詳細設定 ⇒ headに要素を追加

以下のmetaタグを追加。

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />

【2/12追記】

５．<figure>の横マージンを0pxにする

上記minimalism-20170618.cssでは、<figure>の横マージンが40pxになっているので、これを0pxに変更したものに置き換え。

デザイン ⇒ カスタマイズ ⇒ ｛｝デザインCSS

@import url("https://ok2nd.github.io/hatena-css/minimalism-20170618-c1.css");

以上。

【4/30追記】

６．CSSをgithubではなく、はてなブログのテーマストアにアップロード

githubが永久に保証されるかどうか不明なので、はてなブログのテーマストアにアップロードする。

テーマストア - はてなブログ

で、「新しいテーマを投稿」をクリックしてアップロード。とりあえず、非公開。

デザイン ⇒ カスタマイズ ⇒ ｛｝デザインCSS

を確認すると、以下のようになっている。

/* <system section="theme" selected="17680117127095289072"> */
@import url("https://blog.hatena.ne.jp/-/theme/17680117127095289072.css");
/* </system> */

viewportの設定は、そのまま残す。