ガジェニュー

~iPhone・格安スマホとか~

サイト内リンクをブログカード風にカスタマイズ!【WordPressカスタマイズ】

       後で読む

2回連続でWordPressのカスタマイズのお話です。

今回はサイト内リンクを画像付きで綺麗に貼ることができる「ブログカード」を導入しましたので備忘録がてら書いています。

こちらを実装したことによって下記のように綺麗にサイト内リンクを貼ることができるので、他のページも見てもらいやすくなるかなと。

chatlike-css-tb
今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いています。 他のサイトを参考にさせて

結構このカスタマイズ備忘録シリーズが増えたのですが後々見返すことができて大助かりのパターンも多いので重宝しています。

では早速見ていきましょう。

SPONSORED LINKS

サイト内リンクをブログカード風にして見やすくPVアップを目指す。

まぁカスタマイズ!と偉そうに書きましたがほとんど先輩方のコードを丸々使わせていただいています。

こちらのサイトのコードを利用させてもらいました。ありがとうございます。

URLを記入するだけ!Wordpressに内部ブログカードを実装するカスタマイズ方法

phpの知識はさっぱりですが書いてあることはなんとなく理解できるのでちょっとしたカスタマイズなら意外となんとかなったりします。

こちらに書いてあることをやれば、本文中にURLを入れ込めば下記のような表示がされるようになりました。

adobe-post-1
皆さんはブログのアイキャッチ画像やサムネイルの画像を作るときはどうやっていますか? 私の場合は面倒なのでアイキャッチの画像をそのま

ちなみに、URLベタ打ちでもいいらしいのですが、URLでリンクを貼る形で自分は入れ込んでいます。

もし、表示がうまく行かなかった場合でも最低リンクは残りますしね。

自分のサイト向けに変更した点は下記の点です。

//取得した情報からブログカードのHTMLタグを作成
$tag = '
<div class="blog-card">
<div class="blog-card-thumbnail"><a href="'.$url.'" class="blog-card-thumbnail-link">'.$thumbnail.'</a></div>
<div class="blog-card-content"><div class="blog-card-title"><a href="'.$url.'" class="blog-card-title-link">'.$title.'</a></div>
<div class="smanone"><div class="blog-card-excerpt">'.$excerpt.'</div></div></div>
<div class="blog-card-footer clear"><span class="blog-card-date">'.$date.'</span></div></div>';

「.$excerpt.」の部分が本文からの抜粋に当たる部分です。

PCなどの横幅が広い時には綺麗に収まるのですが、画面の小さなスマホでの表示の際に収まりが悪いということで、stinger5に元々あるスマホ表示の際に非表示になる「smanone」というクラスを追加して見ました。

これにより、スマホ表示の際はサムネイル+タイトルの表示になりスマホでの視認性が改善できたと思います。このブログの70%がスマホからアクセスですのでより見やすくするための工夫はどんどんしないとね。

blogcard-custamize-1.png PCの際の表示はこんな感じで

blogcard-custamize-2.png スマホの時はこんな感じになります。抜粋の文字を削ったので下に間延びしてしまうことがなくなりました。

実際にウィンドウのサイズを変更するか、スマホで見てもらうとどんなふうに変化するかが見れますのでやってみてください。

CSSでのデザイン調整は少しだけして下記のようにしました。カードのサイズ・リンクカラー等をちょろっとだけ変更ですね。

/************************************
** ブログカードのスタイル
************************************/
.blog-card{
  padding:12px;
  margin:0 auto 10px auto;
  border:1px solid #ddd;
  word-wrap:break-word;
  max-width:90%;
  border-radius:5px;
}

.blog-card-title a{
  font-weight:bold;
}

あとはそのまんま使わせてもらっている形ですね。

まとめ

WordPressのいいところは使っている人がかなり多く、カスタマイズの記事を書いてくれる先輩方が多いため自分のようなチョットかじった程度の輩でも色々なことができるのが魅力ですね。

最近はサムネイルの画像とかも少し綺麗に作れるようになってきたのでこれで少しでもPVが上がるといいなぁと思いつつ導入しています。

一時期落ち着いていた、カスタマイズ熱もまた上がってきたので色々といじってみてまた書きたいと思います。

てな感じで

 - WEBサイト運営, WordPress , ,

  関連記事

sum-adsence
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

今回は、メインのブログを「STINGER3」から、レスポンシブデザイン対応の「S …

icon_1r_192
【アクセス数報告】2015年9月のPVとアフィリエイトの収益とか

10月に入ったと思ったら、昨日は真夏のような日差しと暑さでちょっとグダってしまい …

accessreport201602-tb
【アクセス数報告】2016年1月のPVとアフィリエイトの収益とか

3月ですね。 今年は初めて青色申告と確定申告をやってみましたが意外と簡単にできま …

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

accessreport201603-tb
【アクセス数報告】2016年3月のPVとアフィリエイトの収益とか

だいぶ暖かくなってきて暖房もいらない季節になりました。 花粉症人はつらい時期だそ …

sum
【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法

今回は「で発生した問題の解消のエントリーになっています。何度やってもうまく行かな …

accessreport201607-tb
【アクセス数報告】2016年7月のPVとアフィリエイトの収益とか

 8月です。7月は久々に週5でフルタイム勤務をしたということでかなり疲れましたが …

images_110914_024007_AM
【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気 …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です