ブログカードに｢記事を読む｣ボタンを追加したいんだけどCSSって何〜？どうやればいいの？！難しそう〜！（泣）
CSSについてよく分からなくても大丈夫！ブログ初心者さんも、この記事でご紹介するコードをコピぺするだけで簡単にカスタマイズできちゃうよ！
この記事では、Cocoonブログカードのカスタマイズ方法をご紹介します。
この記事でご紹介するカスタマイズは以下の4つです。
▼このようにかなりスッキリとしたブログカードになりますよ。
カスタマイズはスマホだけでできるよ！
手順を真似するだけでOKなので是非やってみてね！
【スマホでできる！】Cocoonブログカードのカスタマイズ方法
カスタマイズをしていく前にまず、以下の手順でCocoonでブログカードを正常に表示できるかどうか確認しておきましょう。
- ①ホーム画面左上の3本線のマークをタップ→②｢Cocoon設定」→③｢Cocoon設定｣の順番にタップ
- ブログカードを選択して画面をスクロール
- ｢ブログカード表示を有効にする｣にチェックが入っていることを確認する
塾長これでブログカードが正常に表示されるよ！
- ついでに日付表示も「なし｣にしておきましょう
塾長｢記事を読む｣ボタンを表示すると、どうせ日付が隠れてしまうので、｢なし｣にしておこう！
- ｢変更をまとめて保存｣を忘れずにタップ
保存ができない場合は以下の手順でWAFをOFFにするとできるようになります。
記事の説明文を消してタイトルのみにする
基本設定が終わったら早速カスタマイズをしていきましょう！
まずはこの記事の説明文を消してタイトルのみにしてブログカードをすっきりさせましょう▼
記事の説明文を消してタイトルのみにするには、こちらのCSSをコピーしてスタイルシートに貼りつけていきます。
.internal-blogcard-snippet{
display: none;
}
これから説明する手順を真似してやってみてね！
- メニューの①｢外観｣→②｢テーマファイルエディター｣の順番にタップ
- ③｢Cocoon Child｣④｢スタイルシート｣が選択されていることを確認
- ⑤「必要ならばここにコードを書く｣の下に先ほどコピーしたCSSコードを貼り付けます
- ｢ファイルを更新｣をタップ塾長
どんなCSSでもコピーして貼り付ける作業は同じだよ！やり方を覚えておこう！
CSSをいじるときは、間違えても元に戻せるように、バックアップをとったり、作業の前後の様子をスクショしておくのがおすすめ！
さて、記事の説明文が消えてスッキリしたところで、次はタイトルの文字を大きくしていきましょう！
タイトルの文字を大きくする
タイトルの文字を大きくするCSSはこちらです▼
.blogcard-title{
font-size: 1.3em;
color: #0000FF
}
コピーして、先ほどと同じように、「必要ならばここにコードを書く｣の下に貼り付けましょう。
さっき貼り付けた｢記事の説明文を消す｣コードの下に貼り付けてOKだよ！
ちなみに、color:#000FFの#000FFの部分は色を表しています。
色を変えたい方は、WEB色見本 原色大辞典 カラーコードを参考に、#以下の部分を自分で書き直してみてくださいね。
アルファベットは大文字でも小文字でもOKだよ！
｢記事を読む｣｢続きを読む｣を入れる
さて、いよいよブログカードに｢記事を読む｣｢続きを読む｣を入れていきましょう！
▼コピペするコードはこちらです
.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: #fdb66b;
color: #FFF;
padding: 0.2em 2em;
border-radius: 2px
}
background-color:のところは、先ほどご紹介した原色大辞典を参考に、是非ご自分のブログに合う色を使ってみてくださいね。
「記事を読む｣は｢続きを読む｣に書き換えることができるよ！
また、今回、アイコンを『Font Awesome5』のものを使用しているため、Cocoon設定の｢全体｣からサイトアイコンフォントを『Font Awesome5』にチェックを入れて｢変更をまとめて保存｣をタップしておきましょう。
ちなみに、タイトルと｢記事を読む｣のボタンが重なってしまう人は、もう少しスペースを空けるためにこちらのコードもコピペしておくといいかもしれません▼
.blogcard{
position: relative;
padding-bottom:50px;
}
ブログカードのURLを非表示にする
最後に、ブログカードのURLを非表示にしていきましょう▼
▼コピペするコードはこちらです。
.internal-blogcard-footer{
display: none
}
ちゃんとカスタマイズできたかな？
これで全ての作業は終わりだよ！おつかれさま！！
【スマホでできる！】Cocoonブログカードのカスタマイズ方法 まとめ
ブログカードを使うと、関連する記事同士を繋ぐことができます。
次に読んでもらいたい記事やおすすめ記事に誘導しやすいので、読者にとっても、分かりやすい記事が作れます。
ブログカードは内部リンクとも言い、記事同士を繋ぐことでGoogleのクローラーが巡回しやすくなり、インデックスされやすくなるので、SEO対策にも効果的です。
ブログカードをすっきり見やすくカスタマイズして、読者が思わず読んでみたくなるようなカードを作ろう！
▼ブログカードの基本的な使い方はこちら
