こんにちは、今日はブログカード（サムネ付きリンク）のサンプルを紹介します。
デザイン性に欠けますが、機能は果たすので
このまま使ってもいいですし、CSSを付け加えてもいいですね！
htmlタグにstyle属性を直接書いたサンプルが
検索してもなかなか出なくて自分で書いてみようと思って作りました。
ブログカードとは？
 |
『一人カラオケ』に行きたいけど 勇気がないあなたへ！行く方法も！ |
|---|
このような感じです。
このようなサムネ付きでリンクを貼られると
目が留まりますよね！もちろんクリックされることも増えます。
サンプル
<a href=“リンク”>
<table border=“1” style=“border: solid 1px #000000; border-collapse: collapse;”>
<tbody><tr> <td><img alt=“画像が表示されなかったときに表示させるもの”
border=“0” width=“200” height=“134” src=“画像のあるURL”/>
</td><th><span style=“font-size: large;”>タイトル（表示させたい文字列）
</span></th></tr></tbody></table></a>
上のソースに必要なところを加えると
下のような感じになります。
|
『一人カラオケ』に行きたいけど 勇気がないあなたへ！行く方法も！ |
|---|
まとめ
基本的に、WordPressや無料ブログ等にはプラグインというものが存在して
そちらでプラグインを導入したら恐らくとても簡単に「ブログカード」を作ることができます。
一応、FC2ブログでもCSSを使えたりできますが、
テンプレートのCSSはページ全体の枠組みもしているので
下手したらページ全体が崩れますし、
今後の記事や以前の記事に影響する恐れもあります。
このやり方は、今後もそのやり方で決めた！という方のみのほうがよさそうです。
また、記事内(body内)にCSSを書くと
<style type=”text/css”></style>
ですが、このようにしてしまうと
うまくいくかもしれませんが、僕のテンプレートでは
この記事を表示したときのみブログ全体の枠組みが変わってしまって
とても見にくいページになってしまいました。
なので今回は『インラインstyle属性』という方法でサンプルを作ってみました。
<p style=“color: red”>さんぷる</p>
このような感じです。
僕自身この書き方はあまり好きではないですし、
余り推奨もされていません。
なぜなら後から編集する際にとてつもなく面倒くさいからです。
また、作業効率も悪いです。
ですが、このやり方は周りを干渉させることなく
指定したいところのみ変更できるので
こういう場面では役立ちます。
テンプレが調べても出てこない場合は
自分で作ってみてはどうでしょうか！
ではありがとうございました！
コメント