AFFINGER5で内部リンクを貼る「ブログカード」の作り方

r5

サンダー

AFFINGER5ユーザーの方、ブログカードは使用していますか？

AFFINGER5はWordPressテーマで、今回紹介する「ブログカード」や、その下の「光るボタン」などもショートコード一発で作成出来てしまいます。

※ショートコードとは、ボタン作成などの関数を各括弧[　]で囲った短いコードです。

見て頂くと分かるように、「ブログカード」は、アイキャッチ、投稿タイトル、投稿本文の抜粋を表示してくれるので、ブログの回遊率を上げてくれます。

「AFFINGER5」ユーザーの方で、まだ「ブログカード」使用した事がない方は是非お試しください。

※投稿当時のバージョンは、20190125バージョンです。

ブログカードの作り方

AFFINGER5で「ブログカード」を作成するには、【カード】というショートコードをクリックします。

そうすると、下記のようなショートコードが表示されると思います。

				
				

										

						

																																													
						

															
Raspberry Pi Pico 2Wで始めるIoT電子工作・Pythonデータ分析入門 第2回環境構築・Lチカ編
							
															

									
前回の第1回記事では、Raspberry Pi Pico 2Wの基本的な特徴と必要な機材について解説しました。 https://thunderblog.org/electronic_work/rasp ... 
								
																						
続きを見る
													
					
				
				
				

項目についてそれぞれ説明します。

それぞれ何を入力すれば良いか説明していきます。

「id=」は投稿IDを入力

「id=」の後にはWordPressの投稿IDを入力します。

投稿IDはどこを見れば良いかというと、投稿一覧に表示されるID欄に書かれている数字を入力します。

上記の「Sample(投稿ID=2757)」をブログカードで紹介したい場合、「id=2757」と入力します。

なお、WordPressの投稿数が増えてくると、投稿一覧画面から投稿IDを確認するのは大変になると思います。

WordPressの投稿一覧をExcelで開く方法を説明した記事があるので、こちらを参照してください。

Excelで投稿タイトルや投稿IDを管理できるのはとても楽チンです。

「label=""」はブログカード左上ラベルに表示する文字

「label=""」は、ブログカード左上のラベルに表示する文字です。

表示したい文字はダブルクオテーション(”）の間に記入します。

上記のサンプルでは「label="とっても便利！"」としています。

name=""はブログカードに表示するタイトル

「name=""」はブログカード内に表示するタイトルです。

好きなタイトルを記入しても良いですが、無記入の場合はリンクした投稿タイトルが表示されます。

元々の投稿タイトルでも良い場合には無記入（name="")で良いでしょう。

bgcolor=""はブログカード左上ラベルの背景色

「bgcolor=""」はブログカード左上ラベルの背景色です。

数値は16進数で入力します。

HTMLやCSSにおいて、色情報の値は「#FFFFFF」と表される数値です。

HTMLやCSSにおける16進数については、こちらで説明しているので、興味がある方はこちらもご覧ください。

16進数が良く分からないという方へ、こちらのリンクボタン作成アプリを利用して、カラーコードを取得する方法を説明します。

リンクボタン作成アプリで色情報を簡単に取得

リンクボタンの背景色が上から赤色、緑色、青色になっています。

それぞれスライドバーを動かして好みに色になるように調整してください。

サンプルが小さくて見にくい場合は、上下の余白を10px程度、displayを「block(=1行表示)」にすると見やすくなります。

完成したら、「【ボタンサンプル表示】色情報」の右に表示されている数値をコピペします。

color=""はブログカード左上ラベルの文字色

「color=""」はブログカード左上ラベルの文字色です。

この色情報もリンクボタン作成アプリ記事などから数値を入力してください。

readmore=""はもっと読むボタンの表示ON/OFF

readmore=""はもっと読むボタンを表示するかどうかの設定値です。

表示する場合は"ON"、表示しない場合は無記入で「readmore=""」としてください。

サンプルコードとサンプル表示

最後にサンプルコードとサンプル表示を例に挙げます。

このブログカードをするためのコードは下記のようになります。

				
				

											
オススメ！
										

						

																																													
						

															
リンクボタン作成アプリ
							
															

									
あなたはリンクを貼るときにどのような表示にしていますか？ 私は自作していましたが、手間がかかるので、もっと簡単にリンクボタンを作りたいなと思いました。 なので、作っちゃいました！   ＣＳＳ ... 
								
																						
続きを見る
													
					
				
				
				

それぞれ表にまとめると下記のようになります。

AFFINGER5ユーザーの方はぜひお試しください！