ガジェニュー

~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 , ,

  関連記事

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

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

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

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

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

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

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

sum1015
サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「Sha …

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

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

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

sum1014
【STINGER5カスタマイズ】サイドバーにプロフィール設置

今回はSTINGER5のカスタマイズのお話です。サイドバーにプロフィールを追加し …

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

2016年ということですが個人的には何も変わりません。 西暦上の年数が1年増える …

Loading Facebook Comments ...

Message

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