【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!CSSコピペでOK

Cocoon ブログカードカスタマイズブログ
  • ブログカードに「続きを読む」の文字を入れたい
  • 抜粋する文字を消して、タイトルのみにしたい

Cocoonを使っていてブログカードを使用できるようになったはいいものの、

自分の好みとちょっと違うなぁ…

と感じてしまいましたので、いろいろ調べてブログカードを自分の好みの形にカスタマイズしました!

カスタマイズ後のブログカードの画像
ブログカードカスタマイズ例
「記事を読む」はもちろん「続きを読む」にできますよ

本記事ではWordPressテーマ【Cocoonコクーン】をお使いのあなたへ、ブログカードのカスタマイズ方法を画像付きで詳しく説明していきます。

  • 「続きを読む」の文言をいれる方法
    • 背景の色は好きな色に変更可能
  • ごちゃごちゃしがちな抜粋文字を消す方法
  • 発展事項としてブログカード内部のアイコンとURLを消す方法

ぜひあなたの好きなブログカードを作ってみてください。

コピペだけだからだれでも10分でできますよ

ブログカードってなんだろう?ブログカードの基本から知りたい!というあなたは、初心者向けの記事を下に貼っておきますのでまずはそちらからご覧ください。

事前準備

ではまず、カスタマイズに入る前に事前にコクーンの設定状況を確認しておきましょう。

WordPressの編集画面から、Cocoon設定ブログカードと進んでください。

ブログカード設定確認

ちょっと見にくいと思いますがご容赦を。画像クリックで拡大できます。

カスタマイズ前設定状況確認

  • ブログカード表示
    • ブログカード表示を有効にするにチェック
  • サムネイルスタイル
    • 左側(お好みで右側でもOK)
  • 日付表示
    • なし(表示しても「続きを読む」の下に隠れちゃいます)
  • リンクの開き方
    • チェックしてもしなくてもOK

これで事前準備は完了です

ブログカードに「続きを読む」を入れる

それではいよいよカスタマイズに入っていきます。詳細に説明していきますので、1個ずつついてきてくださいね。

まずは「続きを読む」の入れ方です

CSSをコピーする

始めに、下のCSSをCopyボタンを押してコピーしてください。

Copy
.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #ffd242; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}
出典 リスブロ

CSSをペーストする

コピーしたCSSをペーストします。WordPressの画面から外観テーマエディターと進んでください。

そしたら、

  1. Cocoon Childが選択されていることを確認
  2. スタイルシート(style.css)を選択
  3. あいているところ(下の方)に貼り付け
  4. ファイルを更新ボタンを押す
ペーストする位置

そうすると下の画像のような感じのブログカードができるようになります。確認してみましょう!

自分のブログに合うように編集する

コピペしたまんまだと、あなたのブログの色と合わないですよね

文言もんごんと背景の色、文字の色を変更していきましょう。

文言の編集

先ほどCSSをペーストしたところを見てください。

上の画像の赤枠部分「記事を読む」というところ、もともとは「続きを読む」でした。ここを編集すると文言が変わります。

「読んでみる」とか好きな言葉をいれよう

色の編集

上の画像の赤枠部分「#ffd242」が背景の色を表しています。そして「#fff」が文字の色を表しています。

それぞれ編集すると色が変わっていきます。

どうやって編集すればいいかわかんない

というかたは、こちらのWEB色見本 原色大辞典-HTLMカラーコードを参照してチャレンジしてみましょう。

ちなみに僕は上記サイトにある和色大辞典の#ff7b43(常盤色ときわいろ)を背景にしました。スキンのメインカラーと一緒です。文字色は変更していません。

すると、下のような感じのブログカードになります。

これで「続きを読む」を入れるカスタマイズは完了です!

ブログカードの抜粋文字を消してタイトルのみにする

続いて2つ目のカスタマイズ、スニペットと呼ばれる本文抜粋ばっすいの文章を消してブログカードにタイトルだけ表示されるようにしていきます。

CSSをコピーする

下のCSSをCopyボタンからコピーしましょう。

Copy
.blogcard-snippet{
display:none;
}

CSSをペーストする

「続きを読む」の時と同様にコピーしたCSSをペーストします。WordPressの画面から外観テーマエディターと進んでください。

そしたら、

  1. Cocoon Childが選択されていることを確認
  2. スタイルシート(style.css)を選択
  3. あいているところ(下の方)に貼り付け
  4. ファイルを更新ボタンを押す

そうすると下の画像のような感じのブログカードができるよになります。確認してみましょう!

うまくできました!

【発展】ブログカードのアイコンとURLを非表示にする

下記CSSをコピペすると、ブログカードの中に表示されているアイコンとURLが非表示になります。

Copy
.internal-blogcard-footer{
	display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}

よりすっきりした印象のブログカードにしたいかたはこちらも試してみるといいかもしれません。

Cocoonブログカードのカスタマイズを上手に行いましょう

本記事では【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!CSSコピペでOK

ということでCocoon使いのあなたへブログカードのカスタマイズ方法をご紹介してきました。

  • 「続きを読む」を入れる
  • 抜粋文字を消す
  • アイコンとURLを消す

あなたの望むブログカードができたのであれば私はとてもうれしく思います。

ブログカードは普通のテキストリンクよりもクリック/タップされやすいので回遊率もUPですね。

お気に入りのブログを作ってください!

関連記事

当ブログにはCocoonのカスタマイズに関する記事がほかにもありますので、ぜひそちらもご覧になってください。

初心者向け

カスタマイズ

コメント

プロフィール
峠

とうげです。30代サラリーマンです。地方進学校→一浪→大学理工学部→就職。行動することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理→技術職へ異動。小さいときはロボット作り屋さんになりたかった。

峠をフォローする
タイトルとURLをコピーしました