ガジェニュー

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

  関連記事

adsense-page-level-ads-tb
AdSense(アドセンス)の新しいページ単位の広告の提案が来たので設定してみた

今日AdSense(アドセンス)の管理ページを見ていたらこんな表示が ということ …

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

さて、12月ということで、いつもの報告をやっていきます。前回までの結果は下記から …

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

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

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

simages_011615_064354_PM
【STINGER5カスタマイズ】AdSenseをiPhone6/6s Plus対応のレスポンシブにカスタマイズ。

久々のSTINGER5のカスタマイズ記事です。まぁ、厳密に言うとGoogle A …

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

今日は節分ですね。まぁ、興味もないのでただの2016年2月3日(水)という日で日 …

images
WordPressのセキュリティ強化!2段階認証を設定しよう!

つい最近の出来事ですが、年金基金から色々と情報の流出が問題となりましたね。担当者 …

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

GW真っ最中ですね。 とりあえず前半に軽く旅行に行ったので後はのんびり「Hulu …

sum1
【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ

今回はSTINGER5にRAKUISHI.COMさんが公開しているWordPre …

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

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

Loading Facebook Comments ...

Message

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