WordPressでブログカードをcssを用いてカスタマイズ!リンクにサムネイル画像を入れる方法、あわせて読みたいリンク作成!

WordPressでブログカードをcssを用いてカスタマイズ!リンクにサムネイル画像を入れる方法、あわせて読みたいリンク作成!

はじめに

こんにちは!

本日はWordpressで書いたブログの記事をかっこよくする

ブログカードをプラグインなしで自作する方法を紹介いたします!!

はじめて、PHPを触る方でも安心、コピペするだけ下記のようなブログカードを作る方方法を紹介いたします!

日本のスマホは高すぎる!楽天モバイル UN-LIMITメリット、デメリット、変更方法含めまとめを紹介!
日本のスマホは高すぎる!楽天モバイル UN-LIMITメリット、デメリット、変更方法含めまとめを紹介!
目次 1. はじめに2. 楽天モバイルをお得に申し込みたい方はこちらの記事!3. auから楽天モバイ […]

↑↑これが簡単に作れます!
ブログカードのメリットは?

SEOの観点、集客の観点でも内部リンクは非常に重要になってきます。テキストリンクではなく、画像付きのブログカードでリンクを表示することで、ブログ内の回遊率UPが期待できます!

サムネイル付きリンク先URLの作り方は、むずかしくありませんが、ワードプレスのFunction.phpに貼り付けなどが必要になります!

今回は私がネットで落ちているものから、改良を加えてスマートフォンでもきれいに表示がされるようにいたしました!

また別タブで表示もしたかったので、そちらの設定も追加いたしました!

※ゆかブログさん、macoblogさんのすばらしい記事を参考にさせていただきました。

この記事のブログカードの特徴

1. コピペで簡単!

2. プラグインいらず!

3. ショートコードで一発で挿入できる!

4. あわせて読みたいリンク付き!

5. 続きを読むボタンも実装!

6. スマートフォン&PCに最適化したデザイン!

プラグインいらず自作ブログカード・リンクカードのメリット

プラグインを使わずに直接Function.phpとCSSをいじり自作ブログカードを作るメリットは

ずばり ブログが重くならない

点になります。プラグインを利用してしまうと、どうしてもブログのスピードが遅くなってしまうので、自作できるものは自作していただくのをおすすめいたします。

WordPressでブログカードを作る方法

今回のブログカードはあわせて読みたいロゴと、続きを読むロゴ付きになります。

パソコンとスマートフォンでの表示例は下記になっております!

PC:アイキャッチ画像、ブログタイトル、目次を自動で引用しています。

スマホ:アイキャッチ画像、ブログタイトルのみでスッキリとした見た目に仕上がっております。

wordpress-blog-card-design-css1

ブログカードを自作する手順

 

  • functions.phpにコードを挿入
  • 追加CSSにCSSを追加
  • Addクイックタグを用いるとさらに便利に

①ブログカードのコードをfunction.phpに挿入

まずは、テーマのfunctions.phpを編集しましょう。

注意

必ずfunction.phpの内容はバックアップをとりましょう!

wordpress-blog-card-design-css2

外観→テーマエディター→右のTheme Functionsの順になります。

上述していますが、必ずバックアップはとっておきましょう。

挿入箇所は ?> の前に下のあわせて読みたいリンク付きのブログカードのphpコードをコピペしましょう。

wordpress-blog-card-design-css3

下記コードになります。

②追加CSSにCSSをコピペする

下記コードがブログカードのデザインを決めるCSSになります。

すべてコピーしていただいて、追加CSSもしくはテーマエディターのCSSへ追記をお願いします。CSSの追加方法がわからない方は下記記事をご参考にください。

ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは?
ワードプレスのテーマの追加CSSの使い方、編集、カスタマイズする方法を紹介!追加CSS、テーマエディターの違いは?
目次 1. はじめに 2. ワードプレスのテーマエディターを利用してCSSを編集する方法 3. Wo […]

③作成したブログカードをショートコードで挿入する

次に、実際につくったブログカードをWordpressの記事の中に挿入をしましょう。

非常に簡単になります。

上記のショートコードを記事に貼り、ここに記事リンクに飛ばしたいリンク先URLをテキストで入れるだけで完成になります!

wordpress-blog-card-design-css4

ただ、いちいちショートコードを手入力で入れるのは手間ですよね・・・

そんなときはワードプレスのプラグインAddQuicktagを使うとワンクリックで

ブログカードのショートコードを貼り付けすることができます!

WordPressでよく使うタグ,自作ショートコードを簡単に挿入する方法!すぐにタグを出せるAddquicktagの使い方を紹介!
WordPressでよく使うタグ,自作ショートコードを簡単に挿入する方法!すぐにタグを出せるAddquicktagの使い方を紹介!
目次 1. はじめに 2. AddQuicktagを使う! 2.1. プラグインAddQuickta […]

いちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方
created by Rinker

最後に

いかがでしたでしょうか?

ブログカードのデザインを変えるだけでも、ユーザー様の回遊率は大きく変わります!

他のWordpress、ブログ執筆に関しての記事は下記で紹介しております!

WordPressに関する記事はこちら

またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください!

TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
TechAcademy(テックアカデミー)のプログラミング無料体験の内容・評価、メリットからできることを紹介いたします!
目次 1. はじめに 2. TechAcademyとは? 2.1. 運営会社 2.2. TechAc […]

おまめの余談

モバイルバッテリーでパソコンが充電できるのご存知でしょうか?
USB PD(45W)ポートがあるAnkerの下記
モバイルバッテリーですとパソコンの充電も可能の
超超超高性能になります!
さらにPC充電用のコードもついているため
こちらを購入するだけまる1日外でパソコン、スマホ生活ができてしまいます!

Anker PowerCore+ 26800 PD 45W (26800mAh 2ポート 超大容量 モバイルバッテリー)【PSE認証済 / Power Delivery対応 / USB-C入出力ポート / USB-C急速充電器付属】iPhone / iPad / Android 他各種対応
created by Rinker

人生が変わるかも?本気でプログラミング教室に関して解説しております。


知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ!

 

 

WordPressカテゴリの最新記事