HTMLとCSSだけで作れる
ブログカードをブログに設置しようと色々な方法を調べたのですが、どれも外部プラグインが必要だったりと自分のブログだけで完成しないブログカードでした。
外部のブログカードは提供元の名前が入っていることもあり、シンプルで簡潔なブログカードが欲しいと思っていた私には納得いきませんでした。
納得いかないなら、自分で作ってしまえと調べるとPHPという言語が使えないと自分では作れないということだったのですが、使えなくても作りたいと思ってHTMLとCSSだけでブログカードを作ろうと考えました。
そして完成したのがこちらです。
初心者がブログで稼ぐのは難しい。3か月で1円も稼げない。
「初心者 ブログ 稼ぐ」で検索すると、初心者でもブログで稼げます！ブログで稼ぐ方法を教えます！というブログが沢山あります。こういうブログを見ていると、自分でも稼げそう、この人ができたんだから次は私も稼いでやるぞ！という気持ちになりま...
https://kasemuzu.blogspot.com
このブログカードは、HTMLとCSSだけで作っています。
実際に私が作れたので、ブログカードはHTMLとCSSだけでも作れるということが証明できます。プラグインは必要ありません。
ブログカードのHTMLコードを紹介
まずは、ブログカードのHTMLコードを紹介します。
HTMLは、ブログカードに写真を入れたりタイトルを入れたり記事内容を入れるために書きます。
<div class="BlogCard">
<img alt="画像の説明文" height="画像の縦幅" src="画像URL" style="float: left;" width="画像の横幅" />
<b>
記事タイトル
</b><br />
<div class="BlogCard_content">
記事内容</div>
<div class="BlogCard_url" style="clear: left;">
ブログURL</div>
<a href="記事URL"></a>
</div>こんな感じです。
画像URLは自分で使っている画像のURLを調べて入力してください。heightとwidthは画像のサイズです。私の場合は、縦幅が80、横幅が120で設定しています。
記事タイトルは太字にしています。
記事内容は、画像の縦の幅からはみ出さない程度に文字を選んで入れるときれいになります。記事内容を。以外の途中で切りたいときは...を入れるときれいに見えます。
ブログURLは必要な人だけ作ってください。ブログカードにブログURLがなくても良いという人は、
<div class="border_url" style="clear: left;">ブログURL</div>を消してください。最後に、ブログ記事のURLを入力してください。これがないと、リンクできません。
こんな感じで、ブログカードに書く内容を作ります。そして、CSSでブログカードの形を整え、カード全体がリンクになるようにします。
ブログカードのCSSを紹介
CSSでブログカードのスタイルを作っていきます。
.BlogCard {border: solid 1px #aaaaaa;padding: 10px;position: relative;}
.BlogCard a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.BlogCard_content {font-size: 14px;}
.BlogCard_url {font-size: 12px;}
.BlogCard a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.BlogCard_content {font-size: 14px;}
.BlogCard_url {font-size: 12px;}
.borderには、ブログカードの枠などブログカード全体に関わることを書いています。
.border aは、リンクの仕方です。ブログカード内だったらどこを選択してもリンク先に行けるようにしました。
.border_setumeiは、記事内容の説明のフォントサイズを14pxにしました。
.border_urlは、ブログURLのフォントサイズを12pxにしました。ブログURLがなくても良いと思う人は削除してください。
これで、ブログカード完成です。
このブログカードの欠点
HTMLとCSSだけでブログカードは完成しましたが、このブログカードには2つの欠点があります。
ブログカード内の内容は、自分で入力しなければいけない。
ブログカードのHTMLやCSSはコピペして使った貰って良いのですが、HTML内に書く画像URL・タイトルなどは自動で取得できないので書かないといけないといけません。
少し面倒に感じるかもしれません。
他の人のブログをリンクできない。
他の人のブログから画像を持ってくることは、画像の転載になるのでしてはいけません。それに、このブログカードでは、タイトルはともかく記事内容を転載して紹介しているということになるのと思います。
なので、他の人のブログをこのブログカードでリンクしない方が良いです。もし、このブログカードを使ってトラブルになっても私は責任をとれませんので、自己責任でお願いします。
