ガジェニュー

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

  関連記事

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

世の中は年末年始で忙しいみたいですが、自分はいつもどおり平常運転な毎日です。 ま …

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

2月は28日間ということで他の月より2~3日短いということでさくっと終わってしま …

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

4月も終わり今日から5月ですね。GW前にこの暑さはもはややってられないです。 ま …

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

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

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

最近はこのアクセスまとめすら出すのが面倒になりつつありますが、完全に飽きないかぎ …

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

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

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

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

wpop
WordPress「Popular Posts」で画像が表示されなくなった原因・と修正方法

こちらのブログなのですがWordPressを使用して運用しています。今回は上の画 …

monaca-website-app-tb
Monaca(モナカ)を使ってWEBサイトをそのままアプリにする方法

今回はMonaca(モナカ)というWEBサービスを利用して、今あるWEBサイトを …

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

あっと言う間に6月が通過していきました!もはや2015年の半分を超えているという …

Loading Facebook Comments ...

Message

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