※英語学習とは関係ないので、本件に関しての追加の投稿はせず、ここをリライトしていこうと思います。
- 2021/3/31に起こった事象
- やっていたこと（2021/3/31時点まで）
- 一旦「吊るし」に替えてみよう
- 吊るし その1（2021/4/3 11:50）
- 吊るし その2（2021/4/3 12:10）
- 改修 その1（2021/4/3 23:05）
- 2021/4/3現在の状態と今後の話
- 後日談（公式で不具合報告されていた）
- 後日談その２
2021/3/31に起こった事象
レスポンシブデザインがおかしい。
いや、おかしいと言うよりは「本来の機能を充足するようになった」というべきか。
私は、このブログをレスポンシブデザイン・モードで設定しています。
レスポンシブデザインってのは「PCでもスマホでも同じ見た目にする」ことを指します。
例えば、CSSを頑張ってカスタマイズしたとします。
レスポンシブデザインモードにしていないと、スマホで見た場合に、苦労して実装したスタイルシートが反映されずモバイルモード共通の見た目になっちゃうんです。
Googleアナリティックスで見ると、PCよりスマホからの閲覧の方が圧倒的に多いので、これは嬉しくない。
で、私は、はてなブログを「PRO」ではなく「素」で使っていますから、ある程度自分の思うような形にするのに、アレコレ余計なカスタマイズを入れているんですね。
まぁ、細かく話すのも面倒なので、気になる方は、以前書いたこちらを。
で、多分、2021/03/31（この事象を発見した日）までは、スマホで見た時に以下のようになっていました。
- 自分がカスタマイズしたCSSは反映されている
- トップは記事一覧（本来はPROじゃないとできない）*1
- PCで見る記事一覧と同様、記事を開かずに一覧からスターを付けられる
- 別ブログへのリンクなどサイドバーはPCと同様に表示されている
- でも全体的なルック＆フィール（アラインや文字の大きさなど）はスマホの画面向けに最適化されている
（ここが重要）
で、今見ると、1～4 はそのままなんだけど、5. の
でも全体的なルック＆フィールはスマホの画面向けに最適化されている
この部分が、完全にPCのブラウザで見た外観になっちゃってましてね。
見にくいったらありゃしない。
端末側の問題かな？と思い、別のスマホ、別のブラウザで見てみても結果は同じ。
試しにテーマを変えてみても同じでした。
うーん、head に入れてるスクリプトがまずいのかなぁ。
まぁ、いずれにせよ、こっち側の設定は何も弄っていないので、はてな側で何らかの変更が入り、それがこっちのカスタマイズとコンパチしなくなった、ってことなんでしょう。
とりあえず、暫しレスポンシブデザインは外しておくことに。（2021/3/31時点）
ここで、あいかーちゃん (id:AIaoko) さんに事の次第をご説明ｗ
ブクマコメありがとうございます！
ここで述べているとおり、最初の変化は、はてな側の仕様が変わったことで起きたもので、私が意図したものではなく、望んでいたものでもありません。あれは、見づらいです。
で、コメントいただいた「戻った」と言うのは、完全に戻ったわけではなくて、一旦、スマホの見た目を『吊るし』の状態にしただけです。これも私が望んでいる姿ではありません。
ようするに、今の私の気分は
「何してくれちゃったんだよ、はてなさんよぉ。カスタマイズにどれほど工数かけたと思ってんだ、ああん？」
って言う感じですねｗ
なんとなく、はてなブログの中の人に、
「頑張って余計なカスタマイズなんかしてんじゃねーよ。とっととPROにしやがれ」
と言われているような気分…。
収益化は目指さないブログ（←副業厳禁の業種のため）なので、PROにはしないつもりだったんですが、最近「はてなの広告を削除するためだけにPROにしている人」と言うのを結構見かけて、「それはアリかな？」と思い始めていたんですよ。
でも、こう言うことが起きると気分が削がれるよね。
「今、やろうと思ってたのに！」ヽ(#｀Д´)ﾉ
って言いたくなるパターンｗ
やっていたこと（2021/3/31時点まで）
上記の理由により、レスポンシブデザインは外していますが、以下のようなことをしていますいました。
- テーマ：Life
- デザイン設定>カスタマイズ>デザインCSS：そこそこ追記
- 設定>詳細設定>headに要素を追加：ちょこっと追記
繰り返しになりますが、これにより、スマホで見た時に関しては、以下を実現できていました。
- 自分がカスタマイズしたCSSは反映されている
- トップは記事一覧（本来はPROじゃないとできない）
- PCで見る記事一覧と同様、記事を開かずに一覧からスターを付けられる
- 別ブログへのリンクなどサイドバーはPCと同様に表示されている
- でも全体的なルック＆フィール（アラインや文字の大きさなど）はスマホの画面向けに最適化されている
（ここが重要）
一旦「吊るし」に替えてみよう
で、しばしアレコレ試してみようと思います。
えーと、まずはカスタマイズしたCSSと、headのスクリプトのバックアップを取って、と。
（これ忘れたら泣くよｗ）
では、以下、自前でカスタマイズせず、「吊るし」に替えていきます。*3
（しばらくの間、頻繁に見た目が変わるかもしれません）
吊るし その1（2021/4/3 11:50）
- テーマ：Neutral
- デザイン設定>カスタマイズ>デザインCSS：カスタマイズ無し
- 設定>詳細設定>headに要素を追加：カスタマイズ無し
ふむ、こんな感じか。
このあとは、レスポンシブデザイン対応の公式以外のテーマでいってみます。
吊るし その2（2021/4/3 12:10）
- テーマ：Minimalism
- デザイン設定>カスタマイズ>デザインCSS：カスタマイズ無し
- 設定>詳細設定>headに要素を追加：カスタマイズ無し
テーマを公式以外で1番人気の Minimalism と言うのに替えてみました。
うん、これはいいね。
ま、私の場合、ミニマリズムと言うよりはマニエリスムって感じだけどｗ
レスポンシブデザインでの見た目もいい感じかも。
多分、headのカスタマイズは必要ないな、これ。 ←ウソでした
では、これ以降は、スタイルシートのカスタマイズをチマチマ、少しずつ戻していこうと思います。
改修 その1（2021/4/3 23:05）
- テーマ：Minimalism
- デザイン設定>カスタマイズ>デザインCSS：概ね戻した
- 設定>詳細設定>headに要素を追加：戻した
head のカスタマイズはやはり必要でしたな。で、これは戻しました。
スタイルシートの方は、概ね戻したんだけど、目次のところが以前のCSSだと、今のテーマ Minimalism に合わない。
そう言えば、前も Life 用に align や margin をアレコレ調整したんだったっけ。目次は TBD（To Be Determined）と言うことで、しばしデフォルト。
他にも、若干、テーマに合わせて微調整した部分あり。
2021/4/3現在の状態と今後の話
結果、スマホでの見た目は、こうなりました。
- 自分がカスタマイズしたCSSは反映されている（外したものあり）
- トップは記事一覧（本来はPROじゃないとできない）
- PCで見る記事一覧と同様、記事を開かずに一覧からスターを付けられ…ない…
- 別ブログへのリンクなどサイドバーはPCと同様に表示されている
- でも全体的なルック＆フィール（アラインや文字の大きさなど）はスマホの画面向けに最適化されている
（ここが重要）
最も重要な 5. の「スマホの画面向けに最適化」の部分が戻せたのと、トップが記事一覧にできたので、概ね良しとしておきましょうかね。
3. の「一覧からスターを付けられない」問題については、今回選んだテーマの特性かもしれないし、やはり、はてな側の仕様変更で「そーゆーことはPROにしないとできないようにしたんだもんね」なのかもしれない。
その辺の深掘りは、また追々に。
Minimalism 自体で気になった点、と言うのもあります。
- <br>タグで<p>タグ並みに隙間が空くじゃねーかｗ（説明割愛）
- <strong>タグは効かないみたいね。（説明割愛）
まー、これは非推奨だからな。でも、はてなブログのエディタは<strong>タグなのでねぇ…
（追記：さすがに、これは見にくいので、今さっき、サクッとカスタマイズしました）
Minimalism は人気のテーマなのでカスタマイズ例はいっぱいあるけど、この辺を頑張るくらいなら、他のテーマを試してみたいですな。
今後は、
なんて辺りをやって行こうと考えています。
今月の TOEIC が終わってからかな。
余計なことを追記してタグが制限いっぱいなので、今度は別投稿にします。
（余計なタグを消しゃいーだろがｗ）
まー、しかし、こう言うことやってるとあっと言う間に時間が過ぎるよね。
と言うことで、
「今日はこれくらいにしといたるわ」ⓒ池乃めだか
後日談（公式で不具合報告されていた）
公式で不具合である旨、発表していたんですね。
全然気がつかなかったわｗ
だったら、今戻せば、元に戻るな。
今週末辺りにやってみよう。
後日談その２
今週末辺りにやってみよう。
Minimalism から Life に戻しました。やれやれ。
↓↓↓ブログランキング参加中です！↓↓↓
