- ブログカードに「続きを読む」の文字を入れたい
- 抜粋する文字を消して、タイトルのみにしたい
Cocoonを使っていてブログカードを使用できるようになったはいいものの、
自分の好みとちょっと違うなぁ…
と感じてしまいましたので、いろいろ調べてブログカードを自分の好みの形にカスタマイズしました！
本記事ではWordPressテーマ【Cocoon】をお使いのあなたへ、ブログカードのカスタマイズ方法を画像付きで詳しく説明していきます。
- 「続きを読む」の文言をいれる方法
- 背景の色は好きな色に変更可能
- ごちゃごちゃしがちな抜粋文字を消す方法
- 発展事項としてブログカード内部のアイコンとURLを消す方法
ぜひあなたの好きなブログカードを作ってみてください。
コピペだけだからだれでも１０分でできますよ
ブログカードってなんだろう？ブログカードの基本から知りたい！というあなたは、初心者向けの記事を下に貼っておきますのでまずはそちらからご覧ください。
事前準備
ではまず、カスタマイズに入る前に事前にコクーンの設定状況を確認しておきましょう。
WordPressの編集画面から、Cocoon設定⇒ブログカードと進んでください。
ちょっと見にくいと思いますがご容赦を。画像クリックで拡大できます。
カスタマイズ前設定状況確認
- ブログカード表示
- ブログカード表示を有効にするに☑
- サムネイルスタイル
- 左側（お好みで右側でもOK）
- 日付表示
- なし（表示しても「続きを読む」の下に隠れちゃいます）
- リンクの開き方
- ☑してもしなくてもOK
これで事前準備は完了です
ブログカードに「続きを読む」を入れる
それではいよいよカスタマイズに入っていきます。詳細に説明していきますので、1個ずつついてきてくださいね。
まずは「続きを読む」の入れ方です
CSSをコピーする
始めに、下のCSSをコピーしてください。
.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の画面から外観⇒テーマエディターと進んでください。
そしたら、
- Cocoon Childが選択されていることを確認
- スタイルシート（style.css）を選択
- あいているところ（下の方）に貼り付け
- ファイルを更新ボタンを押す
そうすると下の画像のような感じのブログカードができるようになります。確認してみましょう！
自分のブログに合うように編集する
コピペしたまんまだと、あなたのブログの色と合わないですよね
文言と背景の色、文字の色を変更していきましょう。
文言の編集
先ほどCSSをペーストしたところを見てください。
上の画像の赤枠部分「記事を読む」というところ、もともとは「続きを読む」でした。ここを編集すると文言が変わります。
「読んでみる」とか好きな言葉をいれよう
色の編集
上の画像の赤枠部分「#ffd242」が背景の色を表しています。そして「#fff」が文字の色を表しています。
それぞれ編集すると色が変わっていきます。
どうやって編集すればいいかわかんない
というかたは、こちらのWEB色見本 原色大辞典-HTLMカラーコードを参照してチャレンジしてみましょう。
ちなみに僕は上記サイトにある和色大辞典の#ff7b43(常盤色)を背景にしました。スキンのメインカラーと一緒です。文字色は変更していません。
すると、下のような感じのブログカードになります。
これで「続きを読む」を入れるカスタマイズは完了です！
ブログカードの抜粋文字を消してタイトルのみにする
続いて２つ目のカスタマイズ、スニペットと呼ばれる本文抜粋の文章を消してブログカードにタイトルだけ表示されるようにしていきます。
CSSをコピーする
下のCSSをコピーしましょう。
.blogcard-snippet{
display:none;
}CSSをペーストする
「続きを読む」の時と同様にコピーしたCSSをペーストします。WordPressの画面から外観⇒テーマエディターと進んでください。
そしたら、
- Cocoon Childが選択されていることを確認
- スタイルシート（style.css）を選択
- あいているところ（下の方）に貼り付け
- ファイルを更新ボタンを押す
そうすると下の画像のような感じのブログカードができるよになります。確認してみましょう！
うまくできました！
【発展】ブログカードのアイコンとURLを非表示にする
下記CSSをコピペすると、ブログカードの中に表示されているアイコンとURLが非表示になります。
.internal-blogcard-footer{
display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}よりすっきりした印象のブログカードにしたいかたはこちらも試してみるといいかもしれません。
Cocoonブログカードのカスタマイズを上手に行いましょう
本記事では【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする！CSSコピペでOK
ということでCocoon使いのあなたへブログカードのカスタマイズ方法をご紹介してきました。
- 「続きを読む」を入れる
- 抜粋文字を消す
- アイコンとURLを消す
あなたの望むブログカードができたのであれば私はとてもうれしく思います。
ブログカードは普通のテキストリンクよりもクリック/タップされやすいので回遊率もUPですね。
お気に入りのブログを作ってください！
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
記事の書き方
特に本記事のように、記事を書くときに使うものについては下の記事で取りまとめています。読めばあなたの記事の幅が広がることでしょう。
あわせて読みたい【Cocoon】記事の書き方！投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
外観・デザインをカスタマイズ
特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ
コメント
こんにちは！
皆さんどうやってるんだろう・・・と思ってましたが、
この記事とても分かりやすかったです◎ありがとうございました！
どういたしまして！
CSSのコピペを使わせていただき、無事設定できました！
ブログ初心者でも非常にわかりやすかったです！
ありがとうございました！
Kitさん
当ブログを活用いただきありがとうございました。
よりよいブログ生活に向けて頑張ってください
こんにちは！
とてもわかりやすかったです。
おかげでスッキリしたかんじに設定できました。
ありがとうございました。
みどりさんこんにちは！
コメントありがとうございます。
記事を参考にしてくださりとても嬉しいです。
こちらを参考にテーマエディターのスタイルシートの最後に貼り付けてみましたが、反映されません。何がいけないのでしょうか？
みーさくさん
何がいけないのかは人それぞれでして、文章だけでは原因が特定できません。恐れ入りますが、お問い合わせフォームまたはツイッターにてより詳しくご連絡いただければできる限りの対応をさせていただきます。
よろしくお願いいたします。
お返事ありがとうございます。
ブログカードとインデックスカードを一緒のものと考えていて、そちらにも反映されると思っていました。ブログカードにはちゃんと反映されていましたが、スニペットを非表示にするCSSを追加してもそれは反映されません。逆に、アイコンとURLはCSSを追加しなくても表示されませんでした。謎ですが、とりあえずこのまま利用しようと思います。ありがとうございました。
度々スミマセン。
私に、いろいろ思い違いがあるようです。
返信させていただいた件については、ブログカードではなく囲みカードラベルでした。これはブログカードとは違う扱いになるのですね。
見た目が似ているので同じように考えていました。
知識不足で申し訳ありませんでした。
コメントありがとうございました。