すみませんでした。
この度は本当に申し訳ありませんでした。マジで。いや本当に。
＊＊＊
ブログを少し弄ったことのある方なら、「レスポンシブデザイン」という言葉を聞いたことがあるかもしれません。 いかスポンシブデザインは、たまに効かなくなります。
本記事の後半では「効かなかった、つらい」と「直った、これで」という内容を記載しておりますので、はてなブログでレスポンシブ設定がうまく効かないんだがという方のお役に立てれば幸いです。
前半は謝罪です。
本当にすみませんでした。
ごめんなさい・・・
この日、『力こそパワー』や『CAMPERS』を運営するうぃる氏(id:hrktksm)が新ブログを公開しました。すみませんでした。
その名も『BLADERS』（僕の名前は「せやな」です）
ベイブレードを題材にしたブログです。てか最近周りの大人たちからベイブレードの話をよく聞くんだが、オトナ・ベイブレーダー増えてんか？突然タメ口になってすみません。
狙ってかは分かりませんが、「CAMPERS」の流れを汲んだブログ名かっこいいですね。
実は弊ブログ名「───解放しろ、全てを。」は「力こそパワー」から着想を得ておりまして、その節は大変感謝しております。誠に申し訳ございません。
ブログテーマも同じのを使ったり（こどみす (id:codomisu)さんのCodomisu Flat）、デザインもバレない程度におパクりさせていただいていたんですが、いつしかツイッターでお繋がりになってしまったのでいつ訴えられるか毎日ヒヤヒヤしていました。ごめんなさい。
ちなみに「CAMPERS」も、弊ブログの1カテゴリである「HAMMOCKERS」の命名にて翻案権の侵害と言われても言い返せない程度にパクらせていただいております。よろしくお願いします。すみません。
さて、そんなこんなで新ブログを開設したうぃる氏ですが、なんとそのブログテーマに。なんとそのテーマが。を、テーマで。なんとそのテーマに、僕の作った全てを解放するテーマ『Release All Yourself』を採用していただけました。感謝です。
あまりにも感謝なので射精してしまいました。（すみません）
はてなブログテーマ『Release All Yourself』のトリセツ
テーマがバグった
ところが問題発生です。（ティッシュで拭きました）
はじまりは、ツイッターでのひとつのリプライ。
テーマの方、何か更新加えられました？
— うぃる (@wright_ssvd) August 10, 2019
えっこわい
不穏すぎる。こわい。えっ
こわがる僕の心境を全部書いていたら記事が終わらないので本題に入りますが、ブログのレスポンシブ化が効かなくなっていました。
どうして…？
いや確かにフッタ内のmarginを少し弄りました。でもマージンだけなんです。本当です。8pxくらいの変更です。どうして？
しかし、現にうぃる氏のおブログは絶賛問題発生中です。PC表示は問題ないのですが、スマホで見た時にもブログくんはPCのつもりで表示してしまっているので、全部小さい。
PCの表示をそのままスマホサイズまで縮小した感じを想像してください。それです。小さい。見づらい。
デモブログがこんな状態ですので、テーマ自体の変更の影響っぽいです。。。 pic.twitter.com/usxMYmTbbg
— うぃる (@wright_ssvd) August 10, 2019
▲これです。
いやプロダクトのリリーズ前後というヤバイタイミングで組み込まれているモノを弄るなと。せめて深夜にやれと。マージンだけだと思ってテスト無しで放出するなと。しかもティッシュで拭いても直らない。
というかテーマの変更って即・反映なんですね…新しくインスコし直さないと反映されないとｵﾓﾃﾀ……
しかも30分弄ってみても原因が分からず、前バージョンに戻しても直らない。詰みです。夏コミ2日後にドトールでオレンジジュースをシバきながら3日目の準備をしていた僕の脳からはコミケ成分が消し飛び、そこには一人のCSSを弄る女子高生・ブロガーが誕生していました。あ、こんにちは。女子高生・ブロガーです。
では解決できたので共有します。
＿人人人人人人＿
＞ 突然の解決 ＜
￣Y^Y^Y^Y^Y^Y￣
レスポンシブ化できていない時に確認すること
デザイン設定のレスポンシブデザインにチェック
＞＞デザイン > スマートフォン > 詳細設定のレスポンシブデザインにチェックを入れる
はてなブログでは、PCデザインとスマホデザインを別に設定することができます。
でもまあ基本同じデザインでブログを作ると思うので、ここはデフォルトでチェック入れときましょう。この設定をしないと、PCとスマホが全く別サイトのように表示されるので注意。
メディアクエリの記述がある
メディアクエリを設定することで、「この画面幅の時はフォントサイズは17px、サイドバーは非表示。」みたいな表示を指定することができます。
@media (min-width: 480px){ .gomennasai { font-size: 640px; } }
こんなやつです。
ちなみにこれは「画面幅が480px以上の時にgomennasaiの文字サイズを640pxにする」という意味です。
CSSにレスポンシブ化の記述があるか
これです。これ。マジですみません。
CSSの先頭にResponsive: yesという行を含んだコメントを挿入する
/* Theme: Release All Yourself Author: せやな (id:release_all) Responsive: yes */
言うてテーマを作ったりしない人には関係ない（テーマに最初から記述されている）んですが、これがないとレスポンシブにならない。
ここで注意なのが、CSSを圧縮するとコメントは消し飛ぶということ。
テーマストアにテーマを投稿する時、少しでも容量を減らしたいのでCSSを圧縮しますね。CSS Minifierとかで。
余計なものは消えちゃいます。改行やスペース、もちろんコメントだってそう。
ここが分岐点です。30分もかけてコードをせっせと目視で確認したり、差分ツールにかけたところで、最終的にResponsive: yesを吹き飛ばしていたらそりゃあアレですよね。アレ。泣きそう。
みなさんは気をつけてね。
viewportの設定
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ちなみにはてなブログでResponsive: yesを記述するとどうなるのか。
設定 > 詳細設定 > headに要素を追加にviewportが定義されます。上のヤツですね。<meta name="viewport〜>とかいうヤツ。
どういうことかと言うと、ブラウザに向かって「この端末はこの幅だよ！」という宣言をしているんですね。
これによって、ブラウザは「なるほど、端末の幅は400pxだからこのメディアクエリが適用できるな」となって、最適なデザインを適用してくれるというわけです。
逆に言えば、デザインCSSやテーマCSSに Responsive: yesがなくとも、あらかじめheadに上記を記述しておけばレスポンシブになるということですね。
テーマを設定しないで自分でCSS書いてる人くらいしか使わないと思いますが、一手間減らせるかもしれません。ちなみに僕はこれ書いてます。なぜか忘れましたが、CSSにコメント書きたくなかったのかなあ。デザインCSSは容量制限あるしね。
すみませんでした。
ということで、本当にすみませんでした。
リリース直後に自分のスコープ外で勝手にバグっていた間の心中を想像すると胸が痛みます……。
しかも人のブログでという…
— せやな (@FabyMssgOazer) August 10, 2019
原因不明&応急処置も思いつかなかった魔の30分間は心が2倍速になった…
僕もMacの残充電が10%とかだったのでドトールでおしっこ漏らしかけｔませんでした……。
すみません……。
