【Cocoon】ブログカードを自分好みに変える方法【カスタマイズ】

ゾムビット

ドーモ、僕(@zomubbit)です。ぞむぅ。

前回の記事はここからどうぞ☆

【Cocoon】SNSボタンのインスタグラムの色の変え方【カスタマイズ】

デフォルトだとただの青いボタンのインスタグラムフォローボタンを公式カラーに寄せたボタンに変更する方法を解説しています。

ブログカードって知ってますか？

下の画像の「リンク先サイトを表示してくれる」優れもののことです。

このままでも十分なのですが、せっかくなので自分のブログにデザインを寄せたブログカードにカスタマイズしてみました。

今回は誰でも簡単にブログカードのデザインを変える方法を解説していきます。

Contents

最初に
外枠のデザインと色を変える
背景色を変える
背景透過
説明文の非表示
日付の非表示
『続きを読む』ボタンの表示
まとめ

Sponsored Links

最初に

①バックアップを取る

本記事ではstyle.cssを編集するので、作業前に必ずバックアップを取ってください。

バックアップの取り方はこちらからどうぞ

【Cocoon】SNSフォローボタンにpixivを追加する方法【カスタマイズ】

ブログ上に表示したいのに選択項目がないSNSアカウントの追加方法を解説しています。

②style.cssの場所

WordPressの編集画面から『外観→テーマエディター→style.css』。

『編集するテーマを選択』はCocoon childを選択してください。

外枠のデザインと色を変える

①dashed：破線

以下のコードをstyle.cssに貼り付けてください。

/* ブログカード　ボーダー色、枠 */
.blogcard{
	border: 3px dashed #F1A800 !important
}

②solid：1本線

以下のコードをstyle.cssに貼り付けてください。

/* ブログカード　ボーダー色、枠 */
.blogcard{
	border: 3px solid #F1A800 !important
}

③double：2本線

以下のコードをstyle.cssに貼り付けてください。

/* ブログカード　ボーダー色、枠 */
.blogcard{
	border: 3px double #F1A800 !important
}

ゾムビット

すっごい分かりづらいけど、一応2本線になってます。

④outset：立体

以下のコードをstyle.cssに貼り付けてください。

/* ブログカード　ボーダー色、枠 */
.blogcard{
	border: 3px border-style: outset #F1A800 !important
}

3pxの『3』を変えたら線の太さが、#F1A800の『F1A800』を変えたら色が変わります。

WEB色見本原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

Sponsored Links

背景色を変える

以下のコードをstyle.cssに貼り付けてください。

/* ブログカード　背景色 */
.blogcard{
	background: #FAEEBE
}

#FAEEBEの『FAEEBE』を変えたら色が変わります。

WEB色見本原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

背景透過

マウスカーソルを乗せると色が薄くなるコードです。

以下のコードをstyle.cssに貼り付けてください。

/* ブログカード　背景透過 */
.blogcard-wrap:hover{
	background: transparent;
	opacity: 0.8;/* 下一桁の数字で透過度を変えられる */
}

opacity: 0.8の『0.8』を0.7、0.6、、、と数字を小さくしていくと透過度も強くなります。

説明文の非表示

以下のコードをstyle.cssに貼り付けてください。

/* ブログカード　説明文削除（自サイトのみ） */
.internal-blogcard-snippet{
    display: none;
}

他サイトの説明文も非表示にしたい場合は、以下のコードもstyle.cssに貼り付けてください。

/* ブログカード　説明文削除（他サイトのみ） */
.external-blogcard-snippet{
    display: none;
}

自サイト他サイト両方の説明文を非表示にしたい場合は、上2つのコードは貼らず以下のコードだけをstyle.cssに貼り付けてください。

/* ブログカード　説明文削除（自他サイト） */
.blogcard-snippet{
    display: none;
}

Sponsored Links

日付の非表示

WordPressの編集画面で『Cocoon設定→ブログカード』に行きます。

下にスクロールしていって日付表示を『なし』にチェックを入れて、「変更をまとめて保存」を押して終了です。

『続きを読む』ボタンの表示

①ボタン画像を作る

下記のサイトで自サイトで使いたいボタン画像を作成してください。

Just a moment...

②ボタンのアップロード

ボタンのアップロード方法はこちらからどうぞ

【Cocoon】SNSフォローボタンにpixivを追加する方法【カスタマイズ】

ブログ上に表示したいのに選択項目がないSNSアカウントの追加方法を解説しています。

上記の記事のもくじ『03_Wordpress編集』を参考にしてください。

③style.cssにコードを貼り付ける

以下のコードをstyle.cssに貼り付けてください。

/* ブログカード　続きを読むボタン */
.internal-blogcard:before {
	content: "";
	background: url(②でアップロードしたボタンのURL) no-repeat;
	background-size: contain;
	position: absolute;
	top: 50px;/* 画像の縦の位置 */
	right: 0px;/* 画像の横の位置 */
	width: 160px; /* 画像の幅 */
	height: 160px; /* 画像の高さ */
}

・『background: url(②でアップロードしたボタンのURL) no-repeat;』の（）内の文章と②でアップロードしたボタンのURLを書き換えてください。

・top、right、width、heightの数字を変えて画像位置を調節してください。

画像位置がPCとスマホで連動してしまい、それぞれで独立して右下で固定することが出来なかったのでスマホの位置に合わせました。

ゾムビット

CSSに自信ニキ、ネキがおったら補完してください。

参考にさせていただきました