超絶苦労してはてなでJIN風のボックスを作った話

おつかれさまです

年の瀬です

わたしは仕事や、やらないといけないことが続いててとてもじゃないけどクリスマスって感じじゃないです。友達はボンボコ結婚したり子ども生んだりしてますけどわっちは運がないからな～～～こういう人が徳がないってヤツなんですね。徳ってどう積むわけ？出家？

JINのボックスとは？

話がそれましたが、Wordpressでブログ書いたりするのとても流行っていますね。

サーバーや独自ドメインを借りる金銭的・心理的ハードルはあるものの、自由度が高いためいろんな使い方がありますね。

そんなWordpressには外観のデザインも自分で作ったり、プロが作ったものを使ったり出来ます。そのうちの有料テーマでJINってやつがあるのですが、有名アフィリエイターが作ってて相場よりちょっと高いのに使用する人すごく多いんですね。副業がオープンになった2018年から明らかな素人までもが手を出しています。一時期ストークしかみなかったのに最近はJINをほんとに良くみます。

で、何がそんなにいいかというとデザインが非常に優れています。素人でも、公式HPみたいな仕上がりになります。とくにボックスが使い勝手いい。それでいてSEOにも強い。内容のないペラッペラのド素人ブログでも上位表示されてイラつきさえ感じる。

そんなJINのボックス、WPだけじゃなくてはてブロでも使いたいぞ～～～～～～～～

今日はそんなおはなし

単純にコピペすればいけるか？そんな簡単じゃなかった

JIN買うとテーマ画面からCSSいじれます。

これのボックスだけコピペしたらいけるんじゃない？と思ったら甘かった。

第一関門　jin-icon

JINはfontawesome使ってるんだけど、DL形式なので各自のテーマから読み込みなんだな。

本家font-awesomeにしたらいいんだけど、ちょっと調整が難しかったのでblog-iconに。headに追加したりしないので楽でした。

第二関門　＠media

これはスマホレスポンシブに必須のコードで、端的にいえば各自モバイル端末や環境に応じてサイズ調整してくれるものです。これ、はてなのほうですでに設定済みだから、あとから変に足さなくても良いのです。@mediaは削除で。こいつに無駄に時間とられてましたｗ

第三関門　:afterのパディング

JINアイコンをafter指定でいれているんですね。でも実際の見た目ではボックスのタイトルの前にあるので、本来beforで指定したほうがスムーズだと思うんです。なんかうまくいかんかったんかな？サイズとか。で、afterでコピペのままだと表示めちゃくちゃ崩れるので、クロームでリアルタイムに変化を見ながら位置を細かく調整しました。タイトルもね。時間はかかるけどうまくいったのでOK！めんどくさい方はアイコンナシでもいいと思いますし、かわいいアイコン使いたい方はcolorこだわらなければスムーズに入れられると思います。

そんな苦労して作ったボックスがこれ！ってやりたいんだけど、CSSコードそのまま載せれるタグわかんないから後日のせますｗ