koblog

高校生のWEBデザインブログ

シンプルかつカスタマイズし放題のリンクカードを作ってみた。

サムネイル

はてなブログのリンクパーツといえば、カードみたいなものを思い浮かべると思います。ブックマークが表示できたり、表示が簡単なのでとても便利です。

 

ただカスタマイズが難しかったり動作が重くなったりと、良いことばかりではありません。そこで今回はシンプルかつカスタマイズが簡単なリンクカードの作り方を紹介します。カスタマイズ例は随時更新していくので 、良かったら見てください。

 

はてな純正のリンクカード

koblog.hatenablog.jp

 

これもとても便利なんですが...

よく見かける...見かけすぎるのでもう少しオリジナリティがほしいです。

 

ちなみに上のパーツのコードは下のようになっています。

HTML
<iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="koblog" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fkoblog.hatenablog.jp" frameborder="0" scrolling="no">
</iframe>
<cite class="hatena-citation">
<a href="https://koblog.hatenablog.jp">koblog.hatenablog.jp</a>
</cite>

 

<iframe>を使っているので基本的に個人ではカスタマイズができません。

 *僕が知らないだけでできるかもしれません。

 

オリジナルリンクカード

 

今回の紹介するリンクカードはこんな感じになります。

純正のものと違ってブックマークの数は表示できませんが、カスタマイズし放題なのでデザインにこだわる人には おすすめです。今の所レスポンシブ非対応ですが、今後対応させていきたいと思っています。

 

HTML
<div class="linkcard">
<div class="linkbox">
<img src="sample.jpg" class="linkimage">
<div>
<p class="linktitle">Blog</p>
<p><a class="linkcontent" href="">Link</a></p>
</div>
</div>
</div>

 

CSS
.linkcard {
    width: 400px;
    height: 100px;
    margin: 20px;
    border-radius: 5px;
    background-color: #fff;/*カードの背景色*/
    box-shadow: 0 0 8px gray;
}
.linkbox {
    display: flex;
    }
.linkimage {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px 0 0 5px;
}
.linktitle {
    font-size: 150%;
    padding: 10px 10px 5px 10px;
    color: #222;/*文字の色*/
}
.linkcontent {
    font-size: 70%;
    padding: 0px 10px 0px 10px;
    color: #222;/*リンクの色*/
    text-decoration: none;
}
サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる