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

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

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

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

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

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

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

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

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

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

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

事前準備

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

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

ブログカード設定確認

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

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

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

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

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

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

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

これから行うカスタマイズはすべて内部ブログカードに反映されるカスタマイズです。外部ブログカードには反映されませんのでご了承ください。

CSSをコピーする

始めに、下のCSSをコピーしてください。

.internal-blogcard::after{
	content: '続きを読む 
.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;
}
bb'; /* 内部リンク右下枠の文言 */ 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をコピーしましょう。

.blogcard-snippet{
display:none;
}

CSSをペーストする

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

そしたら、

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

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

うまくできました!

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

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

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

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

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

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

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

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

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

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

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

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント

  1. こんにちは!
    皆さんどうやってるんだろう・・・と思ってましたが、
    この記事とても分かりやすかったです◎ありがとうございました!

    • どういたしまして!

タイトルとURLをコピーしました