Wait a moment...

ブログカード風リンクのコードの分析

34327
YUTO
nem0.85xem (1)
266
0
2019-11-05 16:06:02
ブログカード風リンクのコードの分析

 

nemlogへのブログカード風リンクはこのようになっています。

 

このリンクのコードは以下のようになっています。

 

<div class="blogcardfu" style="width:auto;max-width:9999px;border:3px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;">
<a href="https://nemlog.nem.social/" target="_blank" style="display:block;text-decoration:none;">
<span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;">

<img src="https://images.weserv.nl/?w=100&url=ssl:nemlog.nem.social/public/img/ogp_min.png" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;"></span><br style="display:none">
<span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">nemlog|nemlog is blog communication platform which has donation feature by crypt currency nem.</span><br>
<span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;">nemlog is blog communication platform which has donation feature by crypt currency nem.nemlog has tip nem feature to support &amp; sympathize to other usersnemlog was launched to create environment which can be donated nem among NEMbers via blog articles.</span><br>
<span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>

 

このコードについて分析をしてみます。ここでは、必要最低限必要な所を紹介します。

 

(1) このアンダーラインについて

 

ここでは、ブログカード風リンクのコードの見栄えを設定します。つまり最大幅、枠線、背景の色等について設定できます。応用すれば、影を付けたりすることも可能です。

<div class="blogcardfu" style="width:auto;max-width:9999px;border:3px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;">


このアンダーラインでは、ブログカード風リンクの最大幅を設定できます。

このアンダーラインは、枠線の太さを表しています。

このアンダーラインでは、枠線の種類を変えられます。
ここではsolidとなっていますので、囲み枠は実線です。
他に以下のようにコードを変更すると二重線や破線、点線に変更できます。
実線:solid
二重線:double
破線:dashed
点線:dotted


このアンダーラインでは、角を丸くすることができます。pxが大きいほど、丸くできます。

このアンダーライン(margin)では、境界(border)と要素の間の幅を変更することができます。
このアンダーライン(padding)では、境界(border)の外側の余白の幅を変更できます。
※marginとpaddingに関しては、こちらで詳しく説明されています。

このアンダーラインでは、枠線の色を決められます。
このアンダーラインでは、ブログカード風リンクの背景の色を決められます。
※色は16進数で表されたコードになっていますので、自分が求めている色のコードを見つけ、設定をしてください。

 

(2) このアンダーラインについて

ここでは、どこへリンクさせるのかを設定させます。

<a href="https://nemlog.nem.social/" target="_blank" style="display:block;text-decoration:none;">

 

このアンダーラインは、リンク先のURLを示しています。

 

(3)このアンダーラインについて

ここでは、画像について設定しています。画像がいらない場合は省く事もできます。

<img src="https://images.weserv.nl/?w=100&url=ssl:nemlog.nem.social/public/img/ogp_min.png" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;">

 

このアンダーラインは、ブログカード風リンクの右側にある画像があるURLを示しています。

 

(4) このアンダーラインについて

ここでは、ブログカード風リンクの中に書いている題名に関して、フォント(font)の大きさ文字の太さカラー(color)について設定できます。

<span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">nemlog|nemlog is blog communication platform which has donation feature by crypt currency nem.</span>

 

このアンダーラインは、記事の題名を表しています。

 

(5) このアンダーラインについて

ここでは、記事の本文について設定しています。フォント(font)の大きさ文字の太さカラー(color)について設定できます。


<span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;">nemlog is blog communication platform which has donation feature by crypt currency nem.nemlog has tip nem feature to support &amp; sympathize to other usersnemlog was launched to create environment which can be donated nem among NEMbers via blog articles.</span

 

以上より、以下のようにコードをサンプルにすることもできます。

 

画像を付けたい場合 
  • <div class="blogcardfu" style="width:auto;max-width:9999px;border:3px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;">
    <a href="リンク先の記事のURL" target="_blank" style="display:block;text-decoration:none;">
    <span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;">

    <img src="画像のURL" width="100" style="width:100%;height:auto;max-height:100px;min-width:0;border:0 none;margin:0;"></span><br style="display:none">
    <span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">タイトル</span><br>
    <span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;">リンク先の説明</span><br>
    <span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>

     

    ※欲しい画像のURLを習得したい人は、こちらを参考にお願いします。

     

 

画像を付けない場合

<div class="blogcardfu" style="width:auto;max-width:9999px;border:3px solid #E0E0E0;border-radius:3px;margin:10px 0;padding:15px;line-height:1.4;text-align:left;background:#FFFFFF;">
<a href="リンク先の記事のURL" target="_blank" style="display:block;text-decoration:none;">
<span class="blogcardfu-image" style="float:right;width:100px;padding:0 0 0 10px;margin:0 0 5px 5px;">

</span><br style="display:none">
<span class="blogcardfu-title" style="font-size:112.5%;font-weight:700;color:#333333;margin:0 0 5px 0;">タイトル</span><br>
<span class="blogcardfu-content" style="font-size:87.5%;font-weight:400;color:#666666;">リンク先の説明</span><br>
<span style="clear:both;display:block;overflow:hidden;height:0;">&nbsp;</span></a></div>

 

 

ブログカード風リンクは以下のサイトで自動で生成することができます。

しかし、リンク切れになるなど、不測の事態のためにも、ブログカード風リンクのコードの仕組みを知る事は大切かと思いますし、その仕組みがわかるとさらなる応用に繋がるかと思います。

さらなる応用を目指したい人は、こちらの記事を読む事をお勧めします。

CSSに関して、さらに学びたい人はこちらのサイトがわかりやすく説明をしてくれています。

 

この記事を書いた人
NEMのユートピアを目指してるYUTOです!! nemlogでは、イベント情報のまとめ記事や、記事の感想記事を中心に書いています。 nemlogがユートピアになるように、着々と計画中です!! また、NEM HUBもしています。 https://community.nem.io/signup/jxWxyOo3ff/