ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑫ブログカードを見やすくするCSS】

ブログ

こんにちは
ニワトリです

『自分のブログを見やすく
 オシャレにしたい・・・』

『デフォルトも悪くないけど
 カスタマイズしたい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私が
追加CSSでcocoonをカスタマイズしたので

やり方を紹介していきます。

cocoonの良いところ見出し
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

今回は記事内のブログカードを整える
方法を紹介していきます!

当ブログ記事内のブログカードは
このようになっています。

今回のカスタマイズ
  • ブログカードの設定
  • ブログカードの編集

ブログカードを設定する方法

cocoon設定のデフォルトは
上の画像のようになっています。

悪くはないですが・・・
シンプルすぎますよね?

ブログカードの設定方法
  • ヘッダーの設定
  • ブログカードの編集

ブログカードの設定をする

やり方
  • wordpressメニュー
  • cocoon設定
  • ブログカード

内部ブログカード設定

  • ブログカード表示
    ・コメント欄のブログカード表示を有効にするに✓

その他の項目はデフォルト設定で
問題ありません。

設定が完了したら
左下の「変更をまとめて保存」を押します。

ファイルを保存を押さないと
変更内容が反映されないため気をつけてください!

ブログカードの設定はこれで終わりだよ!

【コピペでOK!】ブログカードのデザインをCSSで調整する

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター
  • スタイルCSS

スタイルシート用追加CSS

/************************************
** ブログカード(本文挿入)
***********************************/
.blogcard {
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf{
transition: all 200ms;
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover{/*内部ブログカードのみhovershadowを非表示*/
background-color: #fafafa;
box-shadow:none;
transform: none;
transition: all 200ms;
}
.internal-blogcard::after{
background-color:#8b968d!important;
}
.blogcard:before {/*ブログカード左上のアイコンを非表示*/
display:none;
}
.internal-blogcard::after{/** 続きを読む*/
content: “続きを読む \00bb”; /* 内部リンク右下枠の文言 */
position: absolute;
bottom: 0.5rem;
right: 0.7rem;
font-size: 70%;
background-color: #ffd242; /* 内部リンク右下枠の背景色 */
padding: .4em 3em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}
.blogcard-date{
display:none;
}
.blogcard-title { /* タイトル */
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
}
.blogcard-snippet {
padding:0em .5em .3em;
color:#7b7b7b;
text-align: justify;
}
.blogcard-content.internal-blogcard-content{/*ブログカードタイトルの枠を大きくする*/
max-height:20em;
}
@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;
}
}
@media screen and (max-width: 480px){
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer{
margin-top:1em;
}
}

.internal-blogcard::after{/** 続きを読む/
content: “続きを読む \00bb”; / 内部リンク右下枠の文言 */

上記1か所の””は半角で入力しなおす
必要がありますので手打ちしてください。

『”(全角)』を打った後に変換を押し
『”(半角)』に打ち直してください。

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

スマホとPCで変更したデザインが反映しているか確認する

変更した目次が
スマホとPC画面の両方で
反映しているか確認をします。

目次が上の画像のように
表示されていれば設定は完了です。

左上の「合わせて読みたい」等の言葉が出ないときは

先ほどのCSSに追加してCSSを
コピペで貼り付けます。

貼り付けるCSSは以下になります。

【コード】
.bct-related .blogcard-label,/*関連記事*/
.bct-reference .blogcard-label,/*参考記事*/
.bct-reference-link .blogcard-label,/*参考リンク*/
.bct-popular .blogcard-label,/*人気記事*/
.bct-together .blogcard-label,/*あわせて読みたい*/
.bct-detail .blogcard-label,/*詳細はこちら*/
.bct-check .blogcard-label,/*チェック*/
.bct-pickup .blogcard-label,/*ピックアップ*/
.bct-official .blogcard-label,/*公式サイト*/
.bct-dl .blogcard-label{/*ダウンロード*/
display: inline !important;
background-color: #90C31F;
margin-left:.5em;
}
@media screen and (max-width: 600px){
.blogcard-label{
margin-left:-0.3em!important;
}
}

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回はブログカードについて
紹介してきました。

次回もcocoonカスタマイズについて
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

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