- ブログカードに「続きを読む」の文字を入れたい
- 抜粋する文字を消して、タイトルのみにしたい
Cocoonを使っていてブログカードを使用できるようになったはいいものの、
自分の好みとちょっと違うなぁ…
と感じてしまいましたので、いろいろ調べてブログカードを自分の好みの形にカスタマイズしました！
本記事ではWordPressテーマ【Cocoon】をお使いのあなたへ、ブログカードのカスタマイズ方法を画像付きで詳しく説明していきます。
- 「続きを読む」の文言をいれる方法
- 背景の色は好きな色に変更可能
- ごちゃごちゃしがちな抜粋文字を消す方法
- 発展事項としてブログカード内部のアイコンとURLを消す方法
ぜひあなたの好きなブログカードを作ってみてください。
コピペだけだからだれでも１０分でできますよ
ブログカードってなんだろう？ブログカードの基本から知りたい！というあなたは、初心者向けの記事を下に貼っておきますのでまずはそちらからご覧ください。
事前準備
ではまず、カスタマイズに入る前に事前にコクーンの設定状況を確認しておきましょう。
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の画面から外観⇒テーマエディターと進んでください。
そしたら、
- 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に関する記事を書いています。そちらもどうぞご覧になってください。
コメント
こんにちは！
皆さんどうやってるんだろう・・・と思ってましたが、
この記事とても分かりやすかったです◎ありがとうございました！
どういたしまして！