内部リンクのブログカードを作成しました。プラグインなしです。「続きを読む」などのボタンもつけたりアニメーションもかけたりしました。
♥ 見たいところを押してね♪ 戻るのは【最初から↑】♥
完成デモと実装計画
完成デモです。
実装計画は次のとおりです。
- ブログカードがリンクだとわからない女子もいるかもと「続くを読む」のボタンを設置します。一工夫してアイコン付きで!
- そのままだとつまらないので、マウスオーバーした際にアニメーションをかけます。
- ショートコードは使わずurlのみでブログカードにします。
- ドメイン名の表記やレイアウトなど、その他もろもろ調整。
今回ベースとした内部リンクのブログカードのソースコード
今回、ベースとしたのは寝ログさんのソースをベースさせてもらいました。ありがとうございます。(*´∇｀*)
(ちなみに上記のような外部リンクも作りましたよ。)
やっぱりurlだけが決め手でしたね。このブログカードを使いたくてSimplicityを使っている方もいるのではないでしょうか。
ショートコードは後々のメンテナンスまで考えると極力使いたくありません。
というわけで寝ログさんのコードをちょっといじらせてもらいました。
ショートコードを使わない理由
プラグインのショートコードは使っても、Wordpressのテーマのショートコードは使ったことがありませんね。ショートコードを使うとテーマを乗り換えるとき大変です。
正規表現などを利用して一括置換のプログラミングを考えるのがちょっと面倒いですよね。そのあたりスキルがあって面倒じゃない人は使ってもいいかもしれませんが。
日付を消す
まずいらないものから削っていきます。あたし的に日付はいらないので消します。
$dateの部分ですね。
新しいタブで開く
新しいタブで開くようにします。
target="_blank"このコードは画像リンクと文字リンクに追加すればいいだけです。簡単です。
ドメイン名を取得してurlを表示
urlを表示したかったため追加します。phpでドメイン名を取得してurlを表示します。
$domain = "http://".$_SERVER["HTTP_HOST"];
echo $domain;
続きを読むを追加
ここからはオリジナリティをだしていきます。オリジナリティってほどじゃないかもしれませんが、私なりの工夫が大事です。
スマホでもリンクとわかるように「続きを読む」を追加してみます。
<a href="'.$url.'" class="blog-card-more" target="_blank">続きを見てね<i class="icon-up-hand"></i></a>
あたしはアイコンもつけましたよ。Font Awesomeです。Font Awesomeは入っていないと表示されないため、Font Awesomeのことは別途調べてくださいね。タップしましょう！なので手のアイコンにしました。
抜粋の文字数も調整しました。最後に「…」をつけてディティールにこだわります。
ブログカードのHTMLタグを作成を改変
まとめるとこんな感じになりますね。
$domain = "http://".$_SERVER["HTTP_HOST"];
//取得した情報からブログカードのHTMLタグを作成
$tag = '<div class="blog-card"><div class="blog-card-thumbnail"><a href="'.$url.'" class="blog-card-thumbnail-link" target="_blank">'.$thumbnail.'</a></div><div class="blog-card-content"><div class="blog-card-title"><a href="'.$url.'" class="blog-card-title-link" target="_blank">'.$title.'</a></div><div class="blog-card-excerpt">'.$excerpt.'…</div></div><div class="blog-card-footer clear">'.$domain.'<span><a href="'.$url.'" class="blog-card-more" target="_blank">続きを見てね<i class="icon-up-hand"></i></a></span></div></div>';
やっぱりurlのみでいけるのはいいですね。
ブログカードにアニメーションを追加
cssも一工夫します。ブログカードをグラデーションのアニメーションもかけましたよ。
.blog-card:hover {
animation: gradation 1s .5s;
animation-fill-mode: forwards;
}
@keyframes gradation {
0% { background-color: #a6d7d2; }
100% { background-color: #fa969f; }
}
ブログカードのCSS
CSSで装飾します。
/************************************
** ブログカードのスタイル
************************************/
.blog-card{
padding:12px;
margin:10px 0;
border:1px solid #ddd;
word-wrap:break-word;
max-width:100%;
width:474px;
border-radius:5px;
background-color: #a6d7d2;
}
.blog-card-thumbnail{
float:left;
}
.blog-card-content{
margin-left:90px;
line-height:120%;
}
.blog-card-title{
margin-bottom:5px;
}
.blog-card-title a{
font-weight:bold;
text-decoration:none;
color: #1e50a2;
text-decoration: none;
}
.blog-card-title a:hover {
color: #1e50a2;
text-decoration: none;
}
.blog-card-excerpt{
color:#333;
font-size:90%;
}
.blog-card-footer{
font-size:70%;
color:#777;
margin-top:15px;
}
a.blog-card-more{
font-size:150%;
font-weight: bold;
color:#333;
margin: 0 10px;
padding: 10px;
border-radius: 3px;
background-color: rgba(255,255,255,0.8);
}
.clear{
clear:both;
}
.blog-card:hover {
animation: gradation 1s .5s;
animation-fill-mode: forwards;
}
@keyframes gradation {
0% { background-color: #a6d7d2; }
100% { background-color: #fa969f; }
}
本当はもうちょっといろいろとやった方がいいかもしれませんが、ひとまずよしとしておきましょう。
（パワーアップ)リボンを追加
現在のブログカードははてブやリボンも追加しています。もちろん、追加でコードを書いています。気が向いたら記事にするかもしれません。
ブログカードの画像の縦横比が崩れる
画像がない場合はもちろん、画像がある場合でも縦横比が優先度の問題からか崩れる場合があります。プラグインのRegenerate Thumbnailsで画像を再生成したら修正されました。
おまけ、ブログカードとテキストリンクのクリック率は単純にデザインの問題
ブログカードとテキストリンクのクリック率はテキストリンクの方が上という人もいますが、単純にデザインの問題だと思いますね。
デザインがわかりにくればクリックされにくいのは当たり前です。視認性はブログカードの方が上な気もしますので、デザインさえ間違えなければ問題ない気がしますね。
IT系の多くの人はブログカードをリンクとして認識していますが、インターネットに疎く、ブログカードを知らない人はリンクと認識していません。
昔ながらのテキストリンクは下線があるから、クリックされやすい、というのは昔ながらの習慣といえるでしょう。
IT系のサイトならいいのですが、うちは女子系のサイトです。
ブログカードはクリックされにくい問題があります。素人さんはブログカードというものをそもそもリンクだと認識していない可能性がありますからね。でも、そこで止まったら発展はありません。(*´∇｀*)
単純に数値を比較するSEOの発想ではなく、昔ながらの習慣をどうデザインして発展させていくのは大事かも。
このデザインの工夫をしてからわりと「続きを読む」などが普通にクリックされることをヒートマップ等でも確認できました。
あとはクリック率よりもあたし的にはかわいいか好みが大事なので、そんなには気にしていません(*´∇｀*)
コメント