「はてな」っぽさ除去、はてなヘッダからアイキャッチ画像まで

はてな臭

さて、先週独自ドメインを取得したのではてなから独立してようやく一人前（full-fledged）と思ってたら、画面上に色々はてなの痕跡が残ってて、まだhalf-fledgedであることが判明。そこで、それらを消そうと、ここのところしばらく悪戦苦闘（struggle）してました。

もちろんページソースを見れば

data-admin-domain="//blog.hatena.ne.jp"
data-blog="insane.hatenablog.com"

こんな感じで丸わかりなのは百も承知。あくまで、見た目上の話です。

しかし、ネット上には独自ドメインに移行する方法は大量に書いてあっても、はてな臭を消す方法は書いてないんですよね（笑） ということで、以下は「はてなfree」を目指し、自分で頑張ってみた記録です。

はてなヘッダー・フッター

ということで、まず上部のはてなヘッダのバーを消すことにしました（フッターも然り）。これは管理画面から設定→アドバンスト→ヘッダーとフッター設定（上図）でできます。

まあ、当ブログには検索経由で来てくださる方が９割なので、殆どがはてなユーザーではないんですよね。そのユーザーに意味のない情報を出すのはやめようということです。

これで、PCからのアクセス時にはてなっぽいもの（？）は画面上表示されなくなったと思います。

スマホ対応

次にスマホです。一番下に出るこれが目の上のたんこぶ（pain in the neck）なんです。powered byとかぶっちゃけ不要な情報じゃないですか。サイトがAWSを裏で使っているからと言って、powered by AWSとか一々出るのうざいですからね。でも私CSSとか分かんないし・・・と調べていくと、なんと「レスポンシブ」なるデザインがあるということがわかりました。PC版と見た目を同じにするデザインらしいです。

レスポンシブテーマの適用

そこで、 テーマ ストア - はてなブログに行って、色々お試しして、 最後に、選んだレスポンシブ対応のデザインをこのブログに適用します。後はレスポンシブ設定をオンにしてスマホ対応するだけ・・・。ってあれ？　どこにresponsiveの設定があるんだ？？　一応一番下っぽいけど・・・

ところで、自分は使う全ての製品は「英語モード」に設定してあります。そうしても特に英語の勉強になるとは思わないけど、たまに意外な発見（serendipity）があったりするのが面白いもので。今回の場合は、それがかえって仇となってしまいます。

はてなの中途半端な英語対応がユーザーに余計な混乱をもたらしたのです！（英語っぽい表現ｗ）

はてなメニュー日本語化

そこで、はてなのメニューを日本語化するため、 トップのはてなまで戻って、右上のプルダウンメニューから言語設定を日本語に変更します。これでようやくレスポンシブの設定場所も正確に分かって（案の定、一番下）、デザインのスマホ対応も無事完了となりました。

良かった。レスポンシブでない子供は居なかったんだ！

って、冗談抜きで、日本語が「レスポンシブ」になっているのなら、英語モードも最低限「responsive」の英単語は使って欲しい・・・。過大な要求じゃないはずです。

日本製プロダクトの英語モード

それにしても、はてなの英語対応は酷すぎますね。ここ以外のメニューも全部日本語と英語のちゃんぽん。中途半端にやるくらいならやらないほうがマシ、まであります。half-assが良い事をもたらすことは滅多にありませんからね。

個人的に、日本製プロダクトの英語モードはもう止めようかしら、と思う今日このごろでした。

アイキャッチ画像

さて、これで終わりかと思ったら、最後の難関がありました。デフォルトのはてなのアイキャッチ画像です。

これはオリジナルのものに入れ替えればいいだけなので、後は画像を作るだけですね。

デザインは、大量の画像をうまく整列して絵を出す技術があるので、それを海外ドラマのポスターでやったらどうかと考えました。

youtu.be

でもよく考えたら、大量の海外ドラマのポスター画像を集めること自体が大変ということが判明し、このアイデアは断念。

次に考えたのが、海外ドラマのポスターを100枚程度集めて背景に並べる案。早速収集し、暗くして判別ができない程度ぼかせば、結構いい感じのものが出来上がりました。

後は、その背景にペイントソフトでブログ名「ドラマの中の英語」を入れるだけなんですが・・・本当に入れるだけなんですよ。でも・・・

実はこれがめっちゃ大変だったんです（笑）

というのも、下記のように自身の記事で引用するパターンと www.serendipity.page

ブログトップページで一覧として表示するパターンと

ツイッターなどで引用されるパターン

記事題名の大文字化ルール - ドラマの中の英語 https://t.co/pKl2gYsJmR

— insanely serendipitous (@drama_eigo) April 25, 2019

の（その他含む）全てで

文字列「ドラマの中の英語」が見切れないようにしないといけない！

からです。ぶっちゃけ、それ無理っすよ・・・（笑）

数時間の格闘です。実は、今回のはてな臭除去で一番時間がかかったのがここでした（笑）

途中は数十回にも及ぶトライアル・アンド・エラー。乾いた笑いしか出ませんでしたが、 文字を中央に中央に小さく小さくしていって

まるで地獄のミサワみたいにして

出来上がったのが以下の作品。この中央集権化はマジで地獄のミサワっぽいよね？（笑）

上記３パターン（自己引用、ブログトップ、ツイッター）は一応クリアしました。ふ、Facebook？なにそれ？（笑）　ファイルサイズは127kbなので、はてなのオリジナル（70kb）よりちょっと重い感じだけど、そこは勘弁して（笑）

背景ポスターは、誰もが一度はやるアダルトビデオのモザイクを目を細めて透かす感じで見るようにすれば、ある程度のドラマは判別可能でしょうか？　でもフレンズだけはどこにあるか分からないと思いますよ（笑）

結局、今回の結論は、

• はてな臭除去は思ったより簡単（プロならね）
• はてなさんは英語モード本当になんとかして（プロならね）
• アイキャッチ画像に文字列は入れるなw

って感じです。

これで見た目上は「はてなfree」になったと思うんですけど、どうでしょうか？ まだ抜けてる箇所あったら教えて下さいね。