Cocoonは、記事に「リンク先のURL」を入れると自動的にブログカードが作成されます。
（作成しないようにする方法もあります。詳しくはこちらの記事を覧下さい。）
今回はそのブログカードを自分流にカスタマイズする方法を解説します。
カスタマイズはCSSを使いますが、「なぜそうなるのか？」も説明しますので、
CSSの数字や色を変えてオリジナルのブログカードを作ってみて下さい。
CSS初心者の方にも分かりやすいように説明するよ！
カスタマイズのやり方
最初にCocoonのカスタマイズのやり方を説明しておきます。
カスタマイズは「スタイルシート（style.css）」というものにCSSを追記します。
スタイルシートはどこにあるかというと、
WordPressメニューの「外観」→「テーマファイルエディター」をクリックすると出てきます。
スタイルシートが出てきたら、テーマは「Cocoon Child」を選択します。
そして矢印のあたりにこれから出てくるCSSをコピーして貼り付けます。
CSSを貼り付けたら「ファイルを更新」を押すと、ブログカードのデザインが変わります。
ブログカード以外のカスタマイズのやり方も同じだよ！
CSSの書き方
その貼り付けるCSSですが、CSSの書き方はこのように決まっています。
セレクタで「どこの」、プロパティで「なにを」、値で「どうする」かを指定します。
つまりここでは、.blogcard（ブログカードの）{background（背景を）:yellow（黄色にする）}と指定しています。
Cocoonの場合はブログカード全般のセレクタが「.blogcard」、
内部ブログカードだけを指定するセレクタが「.internal-blogcard」、
外部ブログカードだけを指定するセレクタが「.external-blogcard」です。
また、プロパティと値の部分は｛｝（波括弧）で挟んで、プロパティと値の間には：（コロン）を入れます。
複数のプロパティを指定するときは、値のおしりに；（セミコロン）をつけて区切ります。
（最後のセミコロンはあってもなくてもどちらでも大丈夫です。）
CSSは記号やスペースを含めて、すべて半角文字を使用してください。全角文字をひとつでも使用するとCSSが効かなくなります。それと1文字でも間違えるとCSSは効きません。
Cocoonのブログカードをカスタマイズ
では、Cocoonのブログカードをカスタマイズしてみましょう。
今回サンプルとして使っている内部ブログカードは、投稿日と抜粋文は非表示にしてあります。
ブログカードの設定方法や抜粋文（スニペット）を消す方法はこちらの記事をご覧ください。
ブログカードの枠線を変える
ブログカードの枠線の色はデフォルトで、Cocoonのサイトキーカラーが適用されています。
この枠線の色を変えて太くするCSSがこちらです。ここでは枠線の色は黄色にしました。
黄色？あまり使わない色だね。
.blogcard{
border: 3px solid yellow
}
このコードを「スタイルシート」に貼り付けてから「ファイルを更新」を押します。
これでブログカードの枠線を確認してみてください。
どうでしょうか？このCSSを入力して枠線は太くなっていても、黄色には変わっていないと思います。
これは追記したCSSよりもCocoonのサイトキーカラーの影響が強いため、色が変わらないんですね。
枠線の色を変えるにはどうすればいいかというと、値の最後に「!important」を追加します。
するとサイトキーカラーよりもCSSが優先となり、枠線の色が変わります。
.blogcard{
border: 3px solid yellow !important
}
あらためて説明すると.blogcard（ブログカードの）border（枠線を）3px solid yellow（3ピクセルの実線で黄色）に指定しました。
「3px」の部分は数を大きくするほど線が太くなります。
線の種類は、solid（実線）、dashed（破線）、double（2重線）などがあります。
色は「yellow」のように英語で指定する方法もありますが、どちらかというとカラーコードを使うのが一般的です。
黄色は「#FFFF00」というコードなので、「3px solid yellow」の代わりに「3px solid #FFFF00」と指定してもいいわけです。
色のコードも「#」を含めて半角文字を使ってください。カラーコードのアルファベットは大文字、小文字のどちらを使っても大丈夫です。
ブログカードの背景色を変える
次に背景色を変えてみましょう。
背景色のプロパティは「background」または「background-color」です。色は黄色にします。
黄色好きだな！！
.blogcard{
background: #FFFF00
}
そしてブログカードにマウスポインタを当てたとき（マウスオーバー時）の色を変えることもできます。
.blogcard{
background: #FFFF00
}
.blogcard:hover{
background: #FFA500
}
今度はオレンジになりましたけど（なんちゅうセンスや）
セレクタ「blogcard」のあとに「:hover」をつけると、マウスオーバー時の色を指定できます。
上のコードはすぐに色が変わりますが、
セレクタを「blogcard」から「blogcard-wrap」にすると、ゆっくりめに色が変わります。
.blogcard-wrap{
background: #FFFF00
}
.blogcard-wrap:hover{
background: #FFA500
}
ブログカードを透過させる
マウスオーバー時にブログカードを透過させることもできます。
.blogcard-wrap:hover{
background: transparent;
opacity: 0.5;
}
「transparent」は透明にする値で、プロパティ「opacity」の値を0～1.0で指定して透明度を決めます。
1.0が不透明な状態で0.9、0.8、0.7……と数字を下げていくと透明度が増して、0で完全な透明になります。
上のブログカードは少し消えすぎなので、「opacity」は0.7～0.8くらいがいいと思います。
ブログカードのタイトル文字を変える
今度はブログカードのタイトル文字の大きさや色を変えてみましょう。
.blogcard-title{
font-size: 22px;
color: #0000FF
}
タイトル文字のセレクタは「.blogcard-title」です。
文字の大きさを変えるプロパティは「font-size」で17px→22pxに変更、そして文字の色は青にしました。
文字の大きさを22pxで指定した場合、パソコンはいいのですが、スマホで見たブログカードの文字はこんなに大きくなります。
こんなときは「px」ではなく「em（エム=倍数）」を使って文字の大きさを指定すると、パソコン表示と同じくらいの比率になります。
17px→22pxは約1.3倍なので、値を「1.3em」で指定します。
.blogcard-title{
font-size: 1.3em;
color: #0000FF
}
これなら、スマホで見ても極端に大き過ぎることはありません。
ブログカードのファビコンとURLを消す
ブログカードの下に表示されているファビコン（サイトアイコン）とURLは消去可能です。
内部ブログカードのみ、ファビコンとURLを消すCSSがこちらです。
.internal-blogcard-footer{
display: none
}
内部ブログカードの中で、ファビコンとURLが表示されている部分のセレクタは「.internal-blogcard-footer」で、表示を消すプロパティと値は「display:none」です。
投稿日や更新日も同じセレクタなので、ファビコンとURLを消すと日付も消えます。
ブログカードに「記事を読む」のボタンを追加
読者にブログカードだとすぐに判断してもらえるように「記事を読む」というボタンを追加するには、こちらのCSSを使います。
.internal-blogcard-footer{
display: none
}
.blogcard{
position: relative
}
.internal-blogcard:after{
position: absolute;
bottom: 10px;
right: 20px;
font-family: 'Font Awesome 5 free';
content: '記事を読む \f101';
font-size: 90%;
font-weight: bold;
background-color: #3E9CF1;
color: #FFF;
padding: 0.2em 2em;
border-radius: 2px
}
「記事を読む」のボタンのセレクタは「.internal-blogcard:after」です。
ではここから「なぜそうなるのか？」を順番に説明していきます。
position: absolute
「position: absolute」でボタンの絶対的な位置を指定します。
bottom: 10px（ブログカードの一番下から10ピクセル上へ）とright: 20px（ブログカードの一番右から20ピクセル左へ）でボタンの位置を指定しています。
「abusolute」を使うと他にどんなものがあっても、絶対にその位置に配置されます。
ためしに非表示に設定した抜粋文を表示してみると、
重なった！
そうなんです。このように何があろうとおかまいなしに、その位置に配置されます。
5行目～7行目の「.blogcard{position: relative}」は「abusolute」とセットで使う必要があります。
font-family: ‘Font Awesome 5 free’
これは「Font Awesomeのアイコンを使うよ」という意味です。
「記事を読む」の右側に のアイコンがありますよね。
これが、Font Awesomeのアイコンです。
このアイコンを使うにはCocoonの設定も必要です。
「Cocoon設定」の「全体」タブを選択します。
この中に「サイトアイコンフォント」という項目があります。通常は「5」を選択していればOKです。
content: ‘続きを読む \f101’
「f101」というのは、Font Awesomeのアイコンのコードです。
出典：Font Awesome
すべてのアイコンを見るにはここをクリックしますが、この記事を作った時点でも30,199種類のアイコンがあったので、ここからアイコンを探すのは一苦労です。
「記事を読む」のボタンに使用しているのは「angels-right」というアイコンです。検索バーに「angels-right」と入れるとすぐに出てきます（「PRO」表記は有料のアイコンです）。
アイコンをクリックすると、コードが書かれた画面が出てきます。
かなり小さいですが、ここに表示されているのがお目当てのコードで、「angels-right」のコードは「f101」になっています。
そして表示したい文字とこのコードを一緒に ‘ クォーテーションか ” ダブルクォーテーションで挟んでCSSに書きます。
「f101」の前には、\もしくはバックスラッシュを書く必要があります。
font-size: 90%
「フォントの大きさを90%にする」という意味です。
「記事を読む」の文字の大きさをタイトル文字の何%にするかを指定します。
font-weight: bold
「文字を太くする」という意味です。
background-color: #3E9CF1
ボタンの色を指定しています。
color: #FFF
「記事を読む」の文字色です。
（白のカラーコードは「#FFFFFF」で、「#FFF」でも通用します。）
padding: 0.2em 2em
プロパティ「padding」でボタンの中の余白を決めます。
「0.2em 2em」というのは、上下の余白が0.2em（0.2文字分）で左右の余白が2em（2文字分）という意味です。
border-radius: 2px
ボタンの角の丸みを指定します。数字が大きいほど、角の丸みが大きくなります。
下部のスペースを広げる
さきほど、ファビコンとURLの表示を消して、抜粋文を入れたら「記事を読む」のボタンと重なりました。
これはブログカードの下部を広げることによって、抜粋文とボタンが重ならないように修正が可能です。
.blogcard{
position: relative;
padding-bottom:50px;
}
セレクタ「.blogcard」に「padding-bottom:50px」の値を追加しました。
これでブログカードの下部に50ピクセル分の余白ができるので、抜粋文の下にボタンが表示されるようになります。
最後に
おつかれさまでした。
あとはCSSの数字や色などを変えて、好みのブログカードに仕上げてみて下さい。
当ブログでは他にもCocoonのカスタマイズのやり方やWordPressの設定方法も紹介しているので、よろしければそちらもどうぞ。
本日は最後まで読んでいただき、ありがとうございました。
コメント