PR

突然ですが当サイトのマスコットキャラクターが出来ました

WordPress(サイト作成関連)

それがこちらです。

こいつは私の分身というか相棒みたいなものですが――最初はあくまでコメット君というキャラが私の書いた記事にひと言する設定にしようと思ったが現在はもうごっちゃになっていて執筆者である私のコメントなのかコメット君というキャラのコメントなのかよく分からなくなっているが――、

Enjilogというサイト(かの有名な、WordPressのテーマである、STINGERの作者のブログ)を一時よく見ていて、最後のまとめやコメント文のところで出てくる、イラスト画像とセットになっている見出しをヒントにペイント(Windowsに元から入っているお絵かきソフト)で作ったものです。

ああ言う風に見出しの頭にイラスト画像を添えて、イラストのキャラが発言しているみたいに出来たら、テンションが上がってブログの更新も捗るだろうにな、なんて羨ましく思っていたしそれが私のちょっとした夢でもあったのですが実現が難しそうだったので敬遠していました。

けれども今日なんとなしに(これはこの記事作成時点のことである。下書きのままにして公開するのが随分おくれてしまった)、そう言えばこういう感じの見出しが作りたかったんだよな、と思っていると急にある閃きが降りて来て、それをペイントで描いてみたらあっという間に完成したのです(外から見ると難しそうに思えることでも実際に自分でやってみると意外と簡単なことは多い)。この絵は非常に単純だったのとペイントに丁度これに合いそうな丸い図形ツールがあったのも良かった。

これはパクったわけではありませんよ。だってEnjilogのは、吹き出しの中に人がいるんですが私のは、頭を含めた顔全体が吹き出しそのものなんですから!これはもはや新しいアイデアであり、発展系ですね(パクっているとすれば、鉄腕アトムだよ)。

あとは、CSS(スタイルシート)をいじって見出しの横と言うか先頭にこの画像を表示させてやればいいわけで、こういうのはホームページやブログでいじったことがあるのですぐに出来ると思ったのですがあまり覚えてなくて、ネットで調べてどうにか形になった次第です(ここに一番時間がかかった)。

せっかくなのでこういうのを実装したい人のために一応、ソースコードを貼っておきますね(今は、:beforeの疑似要素を使って記述するのが主流のようだが)。

.article h4.comme2 {
background-image: url("https://xxxmethod.blue/wp-content/uploads/……");/* アップロードした画像のURL*/
    background-size: 90px 55px;/* 画像サイズの指定。元のサイズを縮小することでスマホでズームUPしてもぼやけず、綺麗に表示されるようになった。 */
    background-repeat: no-repeat;/* 画像をリピートしない*/
    background-position: left center;/* 画像の開始位置*/
    padding-left:93px;/* ここを画像の横幅より数px大きくするのがポイントのようだ*/
    padding-top:22px;/* テキトーに*/
    padding-bottom:22px;/* テキトーに*/
}

.article h4の後ろに.comme2 と言うclass名を追加しているのは、
.article h4のままだと.article h4が全てこの見出しになるからです。.article h4はそう使わなさそうなので全部このアイコン画像の見出しにしても良いのですが一応、分けて使う時もあるかなと。

ちなみに上のソースコードには、下線に関する記述がありません。なのに画像の下に太めのドット線が引かれていますよね?これは、Simplicity(私の使っている、WordPressのテーマ)のデフォルトである、.article h4のCSSの記述を引き継いでいるためです。

記事に書く時は、

<h4 class="comme2">コメント</h4>

のように書かなくてはならないため、少し手間がかかりますが。

こいつの名前は、ヘルメットみたいな頭をして(帽子をかぶっているのかもしれない)最後にコメントをするので、コメットとします。いくつかの過去記事にも既にこいつを設置しています。こいつの登場でこのサイトの方向性が自分でもより分からなくなって参りましたが、せっかく作ったのでファビコン(ブラウザやタブに表示されるアイコン)もこいつにしておきました。

追記。

このサイトでは、こいつを使うのも面白いかもしれん。ちなみにこいつは自分で作った画像ではなく、こちらのFLAT ICON DESIGNと言うサイトのを使わせてもらっています。このクオリティのものが全て無料で商用利用も可能なんですから今は自分で画像を一から作る必要すらないのかもしれませんね。

コメント

タイトルとURLをコピーしました