はてなブログのブログタイトルのところにCSSでトレードマークを表示する

今YY-BBSが熱い！！！！（えっなんで？？？？？？）

理由はさっぱりわかりませんが、私の周りでYY-BBSが空前の大ブームになっています。

発端は例によってておくれインフルエンサーの@Akkiesoftさん。

akkiesoft.hatenablog.jp

要はあれですね。
個人用HP*1によくあった掲示板CGIってやつですね。

それを@Akkiesoftさんが戯れにインストールしたところ、インターネットに幼少期とか青春とかを捧げたおっさん達にぶっ刺さったということみたいです。

あっという間にスレにはギコ猫やしぃが溢れ、※未承諾広告が妖艶な光を放ち、アクセスカウンターのキリ番申請が飛び交うと言う、当時の野暮ったくも熱量のあるインターネットが再現されました。なんだこれ？

まぁいいや。そんな中で始まった遊びの一つが「相互リンク」でした。

「相互リンク」と言うのは、小さい「バナー」と呼ばれる画像に自分のHPのリンクを付けたものをお互いのHPに置いて、友情と言うか絆と言うか目に見えない何かを確かめ合うと言うあれです。

f:id:moguno:20210129012144p:plain

僕も昔は「Friday Blue」「NECO SYSTEM」「ウサギ畑で囲まれて」など数々のHPを立ち上げバナーをこしらえてきました。
僕もぜひ「もぐてっく」のバナーでこの流れに乗りたい！
そう思ってExcel *2を立ち上げてハタと気づきました。

あれ？「もぐてっく」ってどんなバナーにすればいいんだ？

昔のHPって大抵「タイトル画像」と言うものがあったので、バナーはその縮小版を基本にすればよかったのですが「もぐてっく」のタイトル部には「もぐてっく」と言うテキストしかありません。

これはゆゆ式 *3事態です。

一刻も早く「もぐてっく」のタイトル部を装飾してバナー素材を作らないと時代に乗り遅れる・・・！

と言うわけで首記の技を編み出すに至ったわけです。

まずはいい感じのロゴ探し ⇒ 最強感のある素材サイトが！

まずはロゴマークにする素材を探します。

「フリーアイコン」

で検索したところ、最上位にめっちゃクールな素材集サイトを発見。

icooon-mono.com

モノトーンのかっこいいアイコンがこれでもかと登録されています。
使用許諾もゆるゆるなので安心して使えますね。

さて問題は何のアイコンにするかですが、

f:id:moguno:20210128234434p:plain

このおっさんがウサギを自称していることから、ウサギにすることにしました。

f:id:moguno:20210128234556p:plain

選んだのは左下のこの子。

f:id:moguno:20210128234707p:plain

下半分はアゴなのか体なのか。
捉えどころがないところが、いかにも「もぐてっく」と言ったところ。

この子を「ネルソン君」と名付けて、勝手に「もぐてっく」の公式キャラクターにすることにしました。

なおこのサイト。他の素材集サイトとWeb同盟*4を結んでいるらしく、使いやすそうな各種素材が一生困らないレベルの分量で落ちてる感じになってます。

f:id:moguno:20210129025057p:plain

こんなんとか。

f:id:moguno:20210129025315p:plain

こんなんとか。

f:id:moguno:20210129025249p:plain

はい、先生がエントリを書き始めて本題に入るまで1370文字かかりました。

と言うわけで、はてなブログのダッシュボードにある「デザイン」から「デザインCSS」を流し込んでいきます。

f:id:moguno:20210128235121p:plain

まずはネルソン君をはてなフォトライフにアップロードして、あらかじめ画像のURLをコピーしておきます。

次に以下のCSSを適用します。

#title a {
    background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/moguno/20210127/20210127030131.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 1.2em;
}

背景画像としてネルソン君を繰り返しなしで表示。
本文を1.2em右にずらしてタイトルとネルソン君がかぶらないようにする。

その結果がこちら！

f:id:moguno:20210128231455p:plain

うひゃあ！可愛い。大成功です。
調子にのってエントリータイトルにもネルソン君を配備します。

.entry-title-link {
    display: table-cell;
    background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/moguno/20210127/20210127030131.png);
    background-repeat: no-repeat;
    background-position: 0px;
    background-size: 2em;
    padding-left: 2.5em;
    vertical-align: middle;
    height: 2em;
}

f:id:moguno:20210129025716p:plain