ガジェニュー

~iPhone/iPad・レビュー・比較・レザークラフト・ネットフリックスとか~

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

       後で読む

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

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

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

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

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

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

SPONSORED LINKS

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

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

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

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

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

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

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

ちなみに、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 , ,

  関連記事

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

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

【アクセス数報告】2014年9月のPVと収益を公開します

今回は初めて、「ガジェニュー」のPVを公開してみようと思います。実際にこうやって …

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

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

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

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

Gush2カスタマイズ~h2タグをカスタマイズします~

今回は「Gush2」のカスタマイズ第2弾です。 自由度が高いサービスだけに結構苦 …

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

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

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

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

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

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

Picasa and Google Plus ExpressからPhoto Express for Googleに変更しました。【WordPressプラグイン】

前に書いたエントリーで利用していたプラグインがGoogleの認証方法の変更によっ …

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

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

Loading Facebook Comments ...

Message

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