＃036　WordPressのブログカードをカスタマイズ

イントロダクション

今日はブログカードとやらを改修してみようと思います。

ちなみにブログカードというのは、↓の画像のようにリンク先をタイトルやアイキャッチ画像等を使って解りやすく表示した何かカッコイイ枠組みの事を指すようです。

正直、現在のブログカードでも特に困っていないのですが、一応の知識として一通りの改修はした方が良いとの事ですので、とりあえずやってみたいと思います。

ブログカードのカスタマイズ

さて。具体的なカスタマイズ方法ですが、毎度おなじみCSSの追記が必要となります。

※ここ暫くやってませんでしたので、ちょっと忘れかけているのは内緒です。

まあ、とりあえずどんな風に変更するのかを実際に作業しながら考えていきましょう。

まずはブログカードの枠を太くして、色を青系にしてみました。（↑上記画像参照）

あとは説明文や、右下にある投稿日なんかもいらないような気がするので消しましょう。（↑上記画像参照）

なんかスペースが空きすぎて寂しくなったので、タイトルのフォントを大きくして色を変更。右下に『続きを読む』の表示を追加しました。（↑上記画像参照）

う～ん。とりあえずはこんなもんでしょうか。欲を言えばもうちょっと装飾をしたいんですけどね。

ってな事を師匠に言ってみたら、Cocoon用のブロックエディタを使ってブログカードを作れば左上にラベルという名の装飾が付くとの情報が。

ええっ！　そんな機能があったんですか！？　初耳なんですけど？

……って、よく考えたら普段使いするブロックエディタ以外は9割近く使った事ありませんでしたからね。知らなくてもしょうがないような気がします。

じゃあ、さっそく試してみるとしましょう。

ブロックの追加からCocoonブロックの『ブログカード』を選択します。（↑上記画像参照）

あとは、リンクしたいURLを入力したら最後に右側の設定から追加したいラベルを選択します。（↑上記画像参照）

で、完成したブログカードがこちらとなります。（↑上記画像参照）

おお、確かに左上にラベルが表示されますね。

初期のブログカードよりも格段にシンプルで見やすくなりましたし、暫くはこちらの方を使っていこうかと思います。（その内、改修するかも知れませんが）

※追記。もう少し改修したものが下記の記事となります。

参考にさせて頂いたサイト様一覧

今回追記したCSS

/* ブログカード枠カスタマイズ */
.blogcard{
	border: 2px solid #00bfff !important
}
.blogcard-title{
	font-size: 1.3em;
	color: #dc143c
}
/* ブログカード説明文消去 */
.blogcard-snippet{
display:none;
}
/* ブログカード内部リンク続きを読む追加 */
.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #00bfff; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}
/* ブログカード外部リンク続きを読む追加 */
.external-blogcard::after{
	content: '外部リンク \00bb'; /* 外部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #00bfff; /* 外部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 外部リンク右下枠の文字色 */
	border-radius: 2px;
}
/*ブログカード ラベル背景色カスタマイズ*/
.blogcard-label::after {
color: #ffffff !important; /*ラベル文字色*/
}
.blogcard-label.internal-blogcard-label {
background-color: #00bfff !important; /*内部リンクのラベル背景色*/
}
.blogcard-label.external-blogcard-label {
background-color: #000000 !important; /*外部リンクのラベル背景色*/
}

今回の経費＆記事作成時間

……今回は休養期間中の息抜き的な記事の筈だったんですけど、気が付けば結構な時間を費やす羽目になってしまっています。

何なら、イラスト修行よりも頭を使った分、消耗が激しい気すらしていますわ。

まあ、一応ブログカードも完成しましたし、使った事のないブロックエディタなんかの存在も解りましたので良しとしておきましょう。

もう当分の間は修正する予定もありませんしね。

では、恒例の累計出費＆記事作成時間を発表して今回は終わりにしましょう。

最後まで読んでくださった方はありがとうございました。

この投稿をInstagramで見る

神音の社(@shionnoyashiro)がシェアした投稿

※リライト作業済みの記事です。