Web
Analytics

雨のち晴れ

思った事をノンジャンルで綴ります

雨のち晴れ

MENU

リンクのブログカードをおしゃれにする3つの囲み枠をご紹介♪

はてなブログ以外の方も

ブログカードをおしゃれに囲むカスタマイズをご紹介します

こんにちは。いつもブログを見ていただいてありがとうございます!

今回はブログカスタマイズで、3つの囲み枠についてご紹介させていただきます。

私も使っているはてなブログのリンク用ブログカードを囲むおしゃれな枠になります。

こんな感じです。

参考にさせていただいたのは、サルワカさんのサイトです。

では、早速ご紹介していきます!

ブログカードをよりおしゃれに

おしゃれなブログカードは目立つので便利です

ブログ記事を書いていく中で、自身のブログの過去記事を貼って内部リンクを作ったり、参考にしたブログの外部リンクを貼ったりすることはありませんか?

はてなブログで実装されているブログカードはこんな感じですが 

meipapa.info

 ここに、少しの作業を加えるだけでこのような感じになります。

いかがでしょうか?

普通のブログカードよりもおしゃれで目立ちますよね。

結構簡単に設定できますので、是非使ってみてください。

Font Awesomeのコード

前回の「更新記事を自動で表示するカスタマイズ」と同じように、Font Awesomeのコードを設置する必要があります。

設置の方法に関してはこちらの記事にも載っていますが、もう一度載せておきます。

次のコードをコピーしてください。

これを、headの部分に貼り付けます。

場所は、ダッシュボードから設定詳細設定

f:id:meipapa0219:20200503173225p:plain

 そこから下にスクロールすると「headに要素を追加」とありますので、そこに貼り付ければ完了です。

f:id:meipapa0219:20200808205843p:plain

デザインCSSに貼るコード

3つの囲み枠がありますので、デザインCSSには必要に応じてコピペで貼り付けてください。

まずは、自分の過去記事を紹介する「あわせて読みたい」の枠

CSS

次に参考にさせていただいた記事を紹介する「check!!の枠

CSS

最後に私が他の方の記事を紹介したい時につかう「こちらもおすすめ」の枠

CSS

最初はテキストリンクを囲むために使っていました。

このような感じです。

ブログカードを囲むだけであれば、コードに不要な部分もあるかと思いますが、ご了承ください。

次に記事に差し込む方法をご紹介します。

HTMLで貼り付けするコード

まず、「あわせて読みたい」の枠を作ってみます。

過去記事を貼り付けた後、「HTML編集」をクリックします。

リンクカードは過去記事でも他人のブログでもどちらでも構いません

その後<p><iframe class="embed-card embed-blogcard"~始まる部分で<p>の部分を

<p class="emphasize-link-tab"><iframe class="embed-card embed-blogcard"~に変更します。

 pタグの部分を変更するだけです

これでOKです。この状態ではこのような感じになります。

後は、私がカスタマイズしている部分ですが、ブログカードの下に表示されるリンク

ブログカード下のリンク部分を消します

私はこれが必要ないと思うので、消しています。消す部分は後半にある<cite>~</cite>の部分です。

cite部分を消します

これで、このようになります。

さらに、右側の余白部分が気になりますので、ここを調整します。

私のブログはテーマが「Under Shirt」でサイドバーを使っていますので、横幅の最大をデフォルトの500pxから650pxに変更すればちょうど良い感じになります。

max-whithの部分です。

max-whithの部分を650pxに変更します

これでキレイに表示されると思います。

画面を小さくしても、このように自動で小さく表示されるので見やすいです。もちろんスマホ画面でもレスポンシブデザインで設定していれば綺麗に表示されます。

 

他の「check!!枠や「こちらもおすすめ」枠に関しても、リンクカードを埋め込んだ後に、それぞれ最初に<p class="emphasize-check-tab"><p class="emphasize-osusume-tab">を付ければ囲み枠を作ることができます。

いつも写真を使わせていただいているカワルンさんのサイト

同じく写真を使わせていただいているKAZさんのサイト

しゅんまるさんには寄稿記事をいただきました

このようにおしゃれに使うことができます。

さいごに

さいごにまとめます

ブログカードを囲む3つの枠、いかがでしたでしょうか?

デフォルトのブログカードよりはおしゃれですよね。

私が導入したのは1ヶ月前ぐらいですので、少しずつ過去記事のブログカードも囲っていこうと思っています。

私は自分の記事には「合わせて読みたい」を使っていてますが、「check!!と「こちらもおすすめ」の枠はほとんど同じかなと思いますので、必要に応じて使い分けてみてください。

この連休中にマスターしてくださいね。

最後まで読んでいただいて、ありがとうございました。