はてなブログのデフォルトの記事埋め込みは、こんな感じ。
(横幅など少しカスタマイズしてますが…)
悪くはないけれど、はてな感。
巷のWordPressみたいな埋め込みにしたい〜！
はてなのデフォルトのデザインをカスタマイズする方法を調べていたら、新たに埋め込み用のブログカードを作る方法があることがわかりました。
CSSを書いておけば、ツールを使ってHTMLにコードをコピペするだけでこんな見た目のブログカードにできるのです。
はてなブログのカスタマイズ参考サイトまとめ
はてなブログのデザインをカスタマイズするのに参考にしたサイトをまとめました。
めっちゃ良くないですか！！！
テンション爆上がりです。
参考にしたサイトはこちら↓
シンプルで使いやすい ブログカードジェネレーター５選 | リモスキ
この記事で下の記事を見つけ、
ブログカード作成ブックマークレットをアップデートしました | The other way round
弊ブログ提供ブログカードのデザイン提案【随時追加】 | The other way round
これらを参考にCSSをいじり、色などを変えていきました。
CSSはごく基本の知識しかないため、納得のいくデザインなるまで、調べたり調整したりで丸一日かかりました…
これをゼロから作れるプログラマーってすごすぎる。
一回作ってしまえばずっと使えるので、やってよかったです。
しかもこれで作った埋め込みは余計な機能がついていないため、動作が早かったりGoogleに評価されやすかったりするんだとか。
ブックマーレット
埋め込みを作るためのコードは、上のサイトで提供されているツールをブックマークし、貼りたい記事上で作動させることで出せるようになっています。
一般的に「ブックマーレット」という、JavaScriptで書かれたプログラムらしいです。
SafariやChromeでは正常に動くようなのですが、私の愛用するブラウザ「Vivaldi」では画面が白くなってしまい、うまく動かせませんでした。
Vivaldiではコマンドチェインに登録することでブックマーレットを使うことができました。
参考：Vivaldiでブックマークレットをアドレスバーの横に設置する｜地下部
ショートカットも設定すれば、貼り付けたい記事をすぐにブログカード用のコードにすることができて便利です。
コードが取得できたら、はてなブログのHTML編集に貼り付けるだけです。
まとめ
少し手間はかかりますが、こんなにかっこいい埋め込みが作れると思うとやる気が湧いてきますよね！
