[TOEIC900点を目指すオレのためのブログ]

TOEIC900点を目指すオレのためのブログ

アラカンの老兵SEがTOEIC900点超えを目指す!

やっぱ不具合だったらしい⇒【はてなブログ】何か仕様が変わった?

※英語学習とは関係ないので、本件に関しての追加の投稿はせず、ここをリライトしていこうと思います。

2021/3/31に起こった事象

レスポンシブデザインがおかしい。

いや、おかしいと言うよりは「本来の機能を充足するようになった」というべきか。

私は、このブログをレスポンシブデザイン・モードで設定しています。

レスポンシブデザインってのは「PCでもスマホでも同じ見た目にする」ことを指します。

例えば、CSSを頑張ってカスタマイズしたとします。

レスポンシブデザインモードにしていないと、スマホで見た場合に、苦労して実装したスタイルシートが反映されずモバイルモード共通の見た目になっちゃうんです。

Googleアナリティックスで見ると、PCよりスマホからの閲覧の方が圧倒的に多いので、これは嬉しくない。

で、私は、はてなブログを「PRO」ではなく「素」で使っていますから、ある程度自分の思うような形にするのに、アレコレ余計なカスタマイズを入れているんですね。

まぁ、細かく話すのも面倒なので、気になる方は、以前書いたこちらを。

で、多分、2021/03/31(この事象を発見した日)までは、スマホで見た時に以下のようになっていました。

  1. 自分がカスタマイズしたCSSは反映されている
  2. トップは記事一覧(本来はPROじゃないとできない)*1
  3. PCで見る記事一覧と同様、記事を開かずに一覧からスターを付けられる
  4. 別ブログへのリンクなどサイドバーはPCと同様に表示されている
  5. でも全体的なルック&フィール(アラインや文字の大きさなど)はスマホの画面向けに最適化されている
    (ここが重要)

で、今見ると、1~4 はそのままなんだけど、5. の

でも全体的なルック&フィールはスマホの画面向けに最適化されている

この部分が、完全にPCのブラウザで見た外観になっちゃってましてね。
見にくいったらありゃしない。

端末側の問題かな?と思い、別のスマホ、別のブラウザで見てみても結果は同じ。
試しにテーマを変えてみても同じでした。

うーん、head に入れてるスクリプトがまずいのかなぁ。

まぁ、いずれにせよ、こっち側の設定は何も弄っていないので、はてな側で何らかの変更が入り、それがこっちのカスタマイズとコンパチしなくなった、ってことなんでしょう。

とりあえず、暫しレスポンシブデザインは外しておくことに。(2021/3/31時点)

ここで、あいかーちゃん (id:AIaoko) さんに事の次第をご説明w
ブクマコメありがとうございます!
ここで述べているとおり、最初の変化は、はてな側の仕様が変わったことで起きたもので、私が意図したものではなく、望んでいたものでもありません。あれは、見づらいです。
で、コメントいただいた「戻った」と言うのは、完全に戻ったわけではなくて、一旦、スマホの見た目を『吊るし』の状態にしただけです。これも私が望んでいる姿ではありません。

ようするに、今の私の気分

何してくれちゃったんだよ、はてなさんよぉ。カスタマイズにどれほど工数かけたと思ってんだ、ああん?

って言う感じですねw

なんとなく、はてなブログの中の人に、

「頑張って余計なカスタマイズなんかしてんじゃねーよ。とっととPROにしやがれ」

と言われているような気分…。

収益化は目指さないブログ(←副業厳禁の業種のため)なので、PROにはしないつもりだったんですが、最近「はてなの広告を削除するためだけにPROにしている人」と言うのを結構見かけて、「それはアリかな?」と思い始めていたんですよ。

でも、こう言うことが起きると気分が削がれるよね。

「今、やろうと思ってたのに!」ヽ(#`Д´)ノ

って言いたくなるパターンw

やっていたこと(2021/3/31時点まで)

上記の理由により、レスポンシブデザインは外していますが、以下のようなことをしていますいました。

  • テーマ:Life
  • デザイン設定>カスタマイズ>デザインCSSそこそこ追記
  • 設定>詳細設定>headに要素を追加:ちょこっと追記

繰り返しになりますが、これにより、スマホで見た時に関しては、以下を実現できていました。

  1. 自分がカスタマイズしたCSSは反映されている
  2. トップは記事一覧(本来はPROじゃないとできない)
  3. PCで見る記事一覧と同様、記事を開かずに一覧からスターを付けられる
  4. 別ブログへのリンクなどサイドバーはPCと同様に表示されている
  5. でも全体的なルック&フィール(アラインや文字の大きさなど)はスマホの画面向けに最適化されている
    (ここが重要)

一旦「吊るし」に替えてみよう

で、しばしアレコレ試してみようと思います。

一旦ガラガラポンします!*2

えーと、まずはカスタマイズしたCSSと、headのスクリプトのバックアップを取って、と。
(これ忘れたら泣くよw)

では、以下、自前でカスタマイズせず、「吊るし」に替えていきます。*3
(しばらくの間、頻繁に見た目が変わるかもしれません)

*4

吊るし その1(2021/4/3 11:50)

  • テーマ:Neutral
  • デザイン設定>カスタマイズ>デザインCSSカスタマイズ無し
  • 設定>詳細設定>headに要素を追加:カスタマイズ無し

ふむ、こんな感じか。

このあとは、レスポンシブデザイン対応の公式以外のテーマでいってみます。

吊るし その2(2021/4/3 12:10)

  • テーマ:Minimalism
  • デザイン設定>カスタマイズ>デザインCSSカスタマイズ無し
  • 設定>詳細設定>headに要素を追加:カスタマイズ無し

テーマを公式以外で1番人気の Minimalism と言うのに替えてみました。

うん、これはいいね。
ま、私の場合、ミニマリズムと言うよりはマニエリスムって感じだけどw

レスポンシブデザインでの見た目もいい感じかも。
多分、headのカスタマイズは必要ないな、これ。 ←ウソでした

では、これ以降は、スタイルシートのカスタマイズをチマチマ、少しずつ戻していこうと思います。

改修 その1(2021/4/3 23:05)

  • テーマ:Minimalism
  • デザイン設定>カスタマイズ>デザインCSS概ね戻した
  • 設定>詳細設定>headに要素を追加:戻した

head のカスタマイズはやはり必要でしたな。で、これは戻しました。

スタイルシートの方は、概ね戻したんだけど、目次のところが以前のCSSだと、今のテーマ Minimalism に合わない。
そう言えば、前も Life 用に align や margin をアレコレ調整したんだったっけ。目次は TBD(To Be Determined)と言うことで、しばしデフォルト。
他にも、若干、テーマに合わせて微調整した部分あり。

2021/4/3現在の状態と今後の話

結果、スマホでの見た目は、こうなりました。

  1. 自分がカスタマイズしたCSSは反映されている(外したものあり)
  2. トップは記事一覧(本来はPROじゃないとできない)
  3. PCで見る記事一覧と同様、記事を開かずに一覧からスターを付けられ…ない…
  4. 別ブログへのリンクなどサイドバーはPCと同様に表示されている
  5. でも全体的なルック&フィール(アラインや文字の大きさなど)はスマホの画面向けに最適化されている
    (ここが重要)

最も重要な 5. の「スマホの画面向けに最適化」の部分が戻せたのと、トップが記事一覧にできたので、概ね良しとしておきましょうかね。

3. の「一覧からスターを付けられない」問題については、今回選んだテーマの特性かもしれないし、やはり、はてな側の仕様変更で「そーゆーことはPROにしないとできないようにしたんだもんね」なのかもしれない。
その辺の深掘りは、また追々に。

Minimalism 自体で気になった点、と言うのもあります。

  • <br>タグで<p>タグ並みに隙間が空くじゃねーかw(説明割愛)
  • <strong>タグは効かないみたいね。(説明割愛)
    まー、これは非推奨だからな。でも、はてなブログのエディタは<strong>タグなのでねぇ…
    (追記:さすがに、これは見にくいので、今さっき、サクッとカスタマイズしました)

Minimalism は人気のテーマなのでカスタマイズ例はいっぱいあるけど、この辺を頑張るくらいなら、他のテーマを試してみたいですな。

今後は、

  • 目次のカスタマイズ(前に使ってたCSSをテーマに合わせて微調整)
  • テーマを Life に戻してみたらどうなる?
  • どのテーマに替えてもスマホの記事一覧からスターは押せないのか?

なんて辺りをやって行こうと考えています。
今月の TOEIC が終わってからかな。
余計なことを追記してタグが制限いっぱいなので、今度は別投稿にします。
(余計なタグを消しゃいーだろがw)

まー、しかし、こう言うことやってるとあっと言う間に時間が過ぎるよね。

はてなさんよ、オレの勉強時間を返してくれ!*5

と言うことで、

「今日はこれくらいにしといたるわ」ⓒ池乃めだか

後日談(公式で不具合報告されていた)

公式で不具合である旨、発表していたんですね。

全然気がつかなかったわw

だったら、今戻せば、元に戻るな。

今週末辺りにやってみよう。

後日談その2

今週末辺りにやってみよう。

Minimalism から Life に戻しました。やれやれ。

↓↓↓ブログランキング参加中です!↓↓↓
f:id:pojama:20190314040514j:plainにほんブログ村 英語ブログ TOEICへ 

*1:トップは記事一覧(本来はPROじゃないとできない):これ、もう少し細かい説明が必要だけど冗長なので割愛ねw

*2:ガラガラポン一旦、マッサラにしてやり直すことね

*3:吊るし:これも今日び、使わないかもなぁ。既製品のこと

*4:吊るし:なんかー、この投稿で何度も「つるし」って打っているのに必ず最初の変換が「都留市」になるw
都留市っていったら、これよね。

以下は、私が出かけた時の話。

本筋に関係のない余計なことを書いてしもうたw

*5:オレの勉強時間を返してくれ:言うまでもないけど、これは言い訳。最近、ちょっと無勉気味だったのを今回のインシデントで加速されてしまったのは確かだけど