Hexo + Icarus リンクカードを設定する

2020-10-30

software

リンクカードを貼りたい

リンクカード、ブログカードなどと呼ばれるものをブログに貼りたかった。
下に貼ってあるようなやつ。

DXキラッCHU作ってみた！

DXキラッCHUミラクルキラッツのマスコットキャラクターキラッCHU。アニメでは動くがプリズムストーンで販売しているキラッCHUは動かない。動かすには自分でDX…

普通にURLを貼るよりかっこいい。

• 1. hexo-tag-link-preview
• 2. hexo-tag-link-previewの使い方
• 3. CSS修正
  • 3.1 枠を作る
  • 3.2 画像を小さくする
  • 3.3 色々調整する

1. hexo-tag-link-preview

hexo-tag-link-previewというプラグインを使う。
下のリンク先で詳細が説明されている。

hexo-tag-link-preview

Embed a link preview on your Hexo article.. Latest version: 1.4.0, last publishe…

さっそくリンクカードを活用していく。

2. hexo-tag-link-previewの使い方

1. インストール

1	npm install hexo-tag-link-preview

2. config.ymlの設定

config.yml(テーマごとのやつじゃなくてroot直下にあるやつ)に下みたいな感じに書く。

1 2 3

linkPreview: className: link-preview descriptionLength: 80

3. 記事にリンクカードを貼る

〇〇.mdに下のようにリンク先のアドレスを書く。

1	{% linkPreview https://circleken.net/2020/09/post23/ target:_blank rel:nofollow %}

4. できる

できた。

---

---

できてない。
表示がおかしい。

このサイトはHexoのIcarusというブログテーマを使っている。
多分Icarus固有のCSSがなんか干渉して表示がおかしくなってる。

頑張って直す。

3. CSS修正

テーマの下のsource/css/style.stylを書き換える。

3.1 枠を作る

現状のリンクカードは枠が無くてカード感がない。
以下のようにlink-area(このクラス名はさっきconfig.ymlで設定した)の周りにbox-shadowを使って枠を作る。

1 2 3 4 5

.link-area box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)

するとこうなる。

---

---

枠ができた。

3.2 画像を小さくする

現状のリンクカードは画像が記事の幅いっぱいに表示されている。
以下のように.og-imageの横幅を親クラスの20%に適当に決定する。

1 2 3 4 5 6 7

.link-area box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2) .og-image width: 20%

するとこうなる。

---

---

リンクカード感がでてきた。

3.3 色々調整する

色々調整した結果こんな感じになった。

---

---

だいぶそれらしくなった。

最終的にstyle.stylはこのようになった。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.link-area box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2) margin 1rem 0rem 1rem 0rem padding: 1rem 1rem 1rem 1rem .og-image width: 20% float: left .descriptions margin-left: 25% .og-title font-weight: bold .og-description margin 1rem 0rem 0rem 0rem font-size: 80%

タグ CSS, Hexo, Icarus