頑張らなくても私っぽい♪コピペでブログカードをカスタマイズする方法：Cocoon

ブログを読んでいると出てくるおすすめの記事へのリンク「関連記事」や「あわせて読みたい」。

一度は目にしたことがありませんか。

デザインが素敵だとついつい押してしまいがちです。

リンクはテキストにしか貼ってこなかったわたしですが、画像と文章でまとめられたそのリンクを「いいなぁ、ああいうのを入れられたら見栄えがするのにな」と思っていました。

実はWordPressのテーマCocoonでは簡単に作ることができたのですが、あれ、どうも下の方に余白が多い…

そこで

をお伝えします。

ネットで調べるとたくさんの人が記事にしてくれていて情報がありましたが、

というところで苦戦して4時間掛かりました(;´∀｀)ので、そこを詳しく書いていきます。

コピペすればできるから、気に入った人はやってみてね♪

ブログカードとは

まずブログカードについてちょっと説明します。

必要ないという人は 　 Cocoonでの簡単な挿入方法からどうぞ。

ブログカードとはリンクの配置方法の1つです。

アイキャッチ画像とスニペット(ブログの短い紹介文)をひとまとまりとして載せられます。

画像が入るので、テキストのみにリンクを仕込むより記事の内容が伝わりやすい方法です。

今回は…この画像が続くよ。
飽きちゃったらごめんね💦

Cocoonでの簡単な挿入方法

次にWordPressのテーマであるCocoonで、記事へ設置する方法をお伝えします。

【Cocoon】ブログカードの設定と抜粋文を消す方法

こんにちは、ikuzo(いくぞう)です。今回は、Cocoonのブログカードについてです。ブログカードとは、リンク先のアイキャッチ画像、タイトル、抜粋文などをカード形式でまとめて表示しているものです。サンプルなので押せませんが、↓こういうやつ...

wpb-tachiage.com

囲みブログカード拡張スタイルの使い方

ブログカード作成用のURLを囲むだけで様々なタイプのブログカード表示ができるようになる機能の使用方法です。

wp-cocoon.com

ここからはブロックエディターでブロックとして用意されているものを使っていきます。
「上に表示されているラベル」を付けるには、この方法でブログカードを用意します。

「知っているから必要ないよ」という人は 　 ブログカードのカスタマイズへどうぞ。

設定を

にしてみました。

下書きを保存してプレビューをチェックします。

　 【ブログカードを入れてみよう！】へ戻る

プレビューになるときに、コードが強制的に変換されることがある…みたい

　 【ブログカードを入れてみよう！】へ戻る

これでブログカードが挿入できました。

… ?

ブログカードのカスタマイズ

保存場所はメモアプリとかWordとかの文章作成ソフトに貼り付けておけばＯＫだよ☆

コードの編集は

を追記していきます。

「追加CSS」は

から開きます。

　 【CSSでボックスシャドウを非表示にする指示を追記する】のリンクへ戻る

　 【blogcardの編集】のリンクへ戻る

　 【全体にボックスシャドウを付けて枠線を太くする】のリンクへ戻る

　 【内部ブログカードのアイコンとドメインを非表示】のリンクへ戻る

　 【「この記事を読む」を追加する】のリンクへ戻る

　 【「関連記事」の色を変えて少し位置を下げる】のリンクへ戻る

　 【画像の位置を調整する】のリンクへ戻る

　 【ポインターを当てたときのブログカードの色を変える】のリンクへ戻る

　 【スマホ画面のレイアウトを整える】のリンクへ戻る

このブログのエディター(コードの書かれているところ)風の部分は

と、内容をすべてコピーするボタンが右上に出ます。

「ボックスシャドウを外す」では画像の枠を外すやり方も説明しています。
特に必要ないという人はこちら 　blogcardの編集へどうぞ。

ボックスシャドウを外す

先ほどのデフォルトのブログカードブロックで作ったブログカードを見て「ん？？？なんか変だな」と思った人…そうなんです。

左下に謎の小さい四角が飛び出してて変ですね…

ブログカードにまとまりを出したいので、画像のボックスシャドウも取りたいと思います。

わたしは「アップロードした画像すべてにボックスシャドウ(画像が飛び出して見える影)を付ける」という指示を追加CSSに書き込んでいます。

ですので、このボックスシャドウが必要ないときは手動で外さなければなりません。

Cocoon設定ですべての画像に枠をつけている場合も「box-shadow」を「border」に変えれば外れます。

両方いっぺんに記述することもできますよ。

CSSでボックスシャドウを非表示にする指示を追記する

では追加CSSに追記していきます。( 　追加CSSの開き方はこちら)

　 コードを選択するかコピーボタンですべてコピーして、追加CSSに貼り付けてください。

.example img{
  box-shadow: none;
}

「example」はclass名として書いています。

「headerに指示する」とか「bodyに指示する」と決まっていない場合、class名は自分の分かりやすい名前を付けます。

WordPressの機能でデフォルトで使われているものに関してはそのclass名を記述して指定しなければなりません。

class名の決め方のルールは

です。 

決めたら「example」と置き換えてください。

「img」はimage(イメージ)＝画像のことです。

.example img{
  border: none;
}

代わりにこれを追記すると、メニューの「Cocoon設定」＞「画像」で設定したすべてのアップロード画像につく枠も消せます。

「 box-shadow: none;」「border: none;」は両方書いても大丈夫です。
横に続けて書いても反映されますが、見やすいように改行して書くのが一般的です。

間に半角スペースは入っても大丈夫ですが、全角スペースはディスプレイに表示したい文字を入れられる場所以外に入っていてはいけません。

HTMLでボックスシャドウを非表示にする指示を追記する

　 続いて「記事編集画面」でさきほど挿入したブログカードブロックを選択し、縦の「…」＞「HTMLとして編集」でHTML表記に変換します。

　 「HTMLとして編集」を押すとこのようにコードで表示されます。

では「HTMLとして編集」で変換したブロックに貼り付けて置き換えていきます。

　 まず、「HTMLとして編集」で変換したブロック内にすでに入っていたコードをすべて消します(スペースも)。

コードを選択するかコピーボタンですべてコピーして、貼り付けてください。

<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-related example">
        https:から始まる表示したい記事(またはサイト)のURLと置き換える
</div>

1行目「”>」の前に「半角スペース＋自分で決めたclass名」を追記します。

exampleとなっている部分を置き換えます。

class名の前の「.」は書かないでください。

コードは(ブログ上で直接表示する文字以外)全角文字が入ると機能しません。
特に全角のスペース(空白)が入っていると気づきにくいので気をつけましょう。

「https:から始まる表示したい記事(またはサイト)のURLと置き換える」は消して、リンクしたい記事のURLを貼り付けてください。

複数のブロックを組みわせたものにはうまく機能しない…のかも？

blogcardの編集

ここから「blogcard」のカスタマイズに入ります。

すべて反映されるとこちらのようなデザインになります。

　 こちらはボックスシャドウ非表示以外のすべてのコードです。
追加CSSに追記していきます。( 　追加CSSの開き方はこちら)

コードを選択するかコピーボタンですべてコピーして、追加CSSに貼り付けてください。

2024/9/21　全体のコード更新

ちょっとブログカードの中身が変わっていたので、久しぶりにブログカードのスタイルを見直しました。
具体的にどこが変わっていたかというと、
●上のラベルが勝手に「ダウンロード」に変わっているものがあった
のです。
まだすべての記事を見返してはいませんが、どこかのCocoonのアップデートで変わってしまったのでしょう。

この記事をアップしたころと違って、「開発者ツール(F12などで出せる、サイトの構造が見られるツール)」を知ったので、当たっているクラスを探し回らなくてよくなりました。

カスタム変数を知ったので、少しずつ取り入れてみています。

新しいコードは350pxあたり～300pxまでのレスポンシブが詰め切れませんでしたので、きちんと300pxまで配置できる方法を見つけたら更新したいと思います。(下のラベルがabsolteでなければfooterをflexにしてドメインとラベルを横並びに配置できたのですが…WordpressでのHTMLの変更の仕方を調べていないので、今のところ疑似要素にするしかありませんでした)
既に知っている方がいたらお問い合わせで教えてくださいね！

ちなみに、注意点ですが、コピペコードは万能ではありません。それぞれのサイトの設定や他のコード、プラグインなどの干渉でうまく効かないことがあります。

そういうときは、他のサイトを見て部分的に効かないコードを変えてみるか、AIとのチャットに慣れている人はコードをチャット欄に貼りつけて状況を具体的に説明して修正箇所を聞いてみましょう。

/*ブログカード*/

/*ブログカード全体*/
.blogcard {
	padding-top: 2rem !important;
	padding-left: 2rem !important;
}
/* 上のラベル */
.blogcard-type .blogcard-label{
 background-color:#B5D0E5;
 color:#fff;
 border: none;
 top:-10px;
}
/* サムネイルのimgの親要素 */
.blogcard figure{
	margin-top: -2rem;
}
/* ホバーしたとき */
.blogcard-wrap:hover{
	background-color: #e3f1ff;
}
/*　画面サイズが480px以下の場合ここの記述が適用される　*/
@media screen and (max-width:480px) {
.blogcard{
	position: relative;
	padding: 1rem 2rem 3rem 1rem;
	}
}

/* 内部リンク */
/* 内部リンク全体 */
.internal-blogcard{
	position: relative;
	display: inline-block;
	border: solid 3px rgba(153, 204, 255, 1);
	padding: 1rem 2rem 2.5rem 1rem;
	box-shadow: 3px 3px 8px rgba(95,99,119,1);
}
/* 内部リンクフッター非表示 */
.internal-blogcard-footer{
	display: none;
}
/* 内部リンクの下のラベル */
.internal-blogcard::after{
	content: "この記事を読む \261e";
	position: absolute;
	display: inline-block;
	right: 2rem;
    bottom: 0.5rem;
	background: #b5d0e5;
	color: #fff;
	border-radius: 3px;
	font-size: 80%;
  padding: 0.4em 1.5em 0.4em 2em;
}
/* 内部リンクのサムネイルimg */
.internal-blogcard-thumbnail img {
	box-shadow: none;
	border: solid 1px #dbdbdb;
	border-radius: 2px;
}

/* 外部リンク全体 */
/* 外部リンク */
.external-blogcard{
	position: relative;
	display: inline-block;
	border: solid 3px rgba(153, 204, 255, 1);
	padding: 1rem 2rem 1rem 1rem;
	box-shadow: 3px 3px 8px rgba(95,99,119,1);
}
/* 外部リンクのリンク先アイコン */
.external-blogcard-footer img{
	display: none;
}
/* 外部リンクのサムネイルimg */
.external-blogcard-thumbnail img {
	box-shadow: none;
	border: solid 1px #dbdbdb;
	border-radius: 2px;
}
/* 外部リンクの下のラベル */
.external-blogcard::after{
	content: "詳しくはこちら \261e";
	position: absolute;
	display: inline-block;
	right: 2rem;
    bottom: 0.5rem;
	background: #b5d0e5;
	color: #fff;
	border-radius: 3px;
	font-size: 80%;
  padding: 0.4em 1.5em 0.4em 2em;
}

/*　画面サイズが480px以下の場合ここの記述が適用される　*/
@media screen and (max-width:480px) {
.external-blogcard-site {
	display: inline-block;
	min-width: 120px;
	max-width: 200px;
	}
.external-blogcard-domain {
	display: inline-block;
	}
.external-blogcard::after {
	content: "詳しくはこちら \261e";
	position: absolute;
	display: inline-block;
	right: .5rem;
    bottom: 0.5rem;
	background: #b5d0e5;
	color: #fff;
	border-radius: 3px;
	font-size: 80%;
  padding: 0.4em 0.5em;
}
}

.blogcard{
  position: relative;
  display: inline-block;
  border: solid 2px;
  padding: 1rem 2rem 2rem 1rem;
  box-shadow: 3px 3px 8px rgba(95,99,119,1);
}

.internal-blogcard-footer{
  display: none;}

.blogcard::after{
  content: "この記事を読む \261e";
  position: absolute;
  display: inline-block;
  bottom: 0.5rem;
  right: 2rem;
  font-size: 80%;
  background: #b5d0e5; 
  color: #fff;
  border-radius: 3px;
  padding: 0.4em 1.5em 0.4em 2em;
}

.blogcard-type .blogcard-label{
  background-color:#b5d0e5;
  color:#fff;
  border: 0px solid ;
  top:-10px;
}

.blogcard figure{
  margin-top: -2rem;
}

.blogcard-wrap:hover{
  background-color: #e3f1ff;
}

@media screen and (max-width:480px) {
  .blogcard{
    position: relative;
    padding: 1rem 2rem 3rem 1rem;
  }
}

では次の項からどのコードがなにを指示しているかご説明していきます。

必要な部分を変更して自分のスタイルにカスタマイズしてね♪

ちなみに書き換えと言えば、絶対値(pxとか)が先に反映されていると相対値(rem、%、vwとか)で書き換えできないよ！

「z-index」は1違えば重なるよ。
重なりをたくさん配置しないといけないとき1ずつ変えていると、「やっぱりここの数字変えよう」となったときに、全部書き換えないといけなくなる可能性があるので、10とか、ある程度の単位で配置していったほうが良いよ！

「!important」と「z-index」は100%万能！というわけではないから注意してね

CSSの用語の意味

コードの意味をお伝えするにあたって、今回出てくるCSSの用語の意味をかんたんにご説明します。

「知ってるよ、CSS」という人は 　全体にボックスシャドウを付けて枠線を太くするへどうぞ。

CSSはHTMLで書かれた文章を装飾する言語、です。

HTMLとはWEB上に表示をするために使われている言語で、WBEのページはほぼこれで作られています。

WordPressのブロックエディターで文字を入力するとそのまま表示されているように見えますが、実はWordpressのシステムがちゃんとコードに変換してくれているからなんです。

　CSSの構造はこんな感じになっています。

padding・border・marginの数値を調整したり、色や形を変えたり、コンテンツの配置を調整したりします。

　 【全体にボックスシャドウを付けて枠線を太くする】のイラストへのリンクへ戻る

　 【「この記事を読む」を追加する】のイラストへのリンクへ戻る

　 【画像の位置を調整する】のイラストへのリンクへ戻る

　 【スマホ画面のレイアウトを整える】のイラストへのリンクへ戻る

この装飾の作業にはルールがいっぱいあってね…
一筋縄ひとすじなわではいかないよっ💦

全体にボックスシャドウを付けて枠線を太くする

まず、画像ではなくて、ブログカード全体にボックスシャドウを付けます。

枠線も細かったのでちょっと太くします。

追加CSSに追記していきます。( 　追加CSSの開き方はこちら)

.blogcard{
  position: relative;
  display: inline-block;
  border: solid 2px;
  padding: 1rem 2rem 2rem 1rem;
  box-shadow: 3px 3px 8px rgba(95,99,119,1);
}

では、コードの意味をご説明します。

box-shadow: 3px 3px 8px rgba(95,99,119,1);

これは影の位置と色の指定で

です。

「3px 3px」を「-3px -3px」に変えると影が左上につきます。

「8px」の数字を大きくするとたくさんぼやけます。

rgbaは光の三原色である「RGB」に透明度を加えた値で、()の中はどの色かを表しています。

border: solid 2px;

これは枠線の太さの指定で

という指示です。

線の色や枠の角の丸みを加えることもできます。

padding: 1rem 2rem 2rem 1rem;

こちらは「padding(パディン)」(ボックスとコンテンツ(テキストや画像など)の間の余白)が

という指示です。

上から時計回りに指定します。

「: 1rem ;」と1つだけなら四方すべてが1rem、「: 1rem 2rem;」と2つ記述していたら上下が1remで左右が2remの指示になります。

position: relative;

こちらはあとで出てくる「position: absolute」のためにも必要な記述です。

display: inline-block;

displayはinline、inline-block、blockから指定します。
inlineではpaddingやmarginがうまく効かないことがあるので、inline-blockで指定しました。

「.blogcard」でブログカードを対称にしてるので、htmlへの追記は必要ありません。
後述するコードではすべて同様になります。

影がつくと立体的に見えて、押したくなっちゃうっていう噂も…！

内部ブログカードのアイコンとドメインを非表示

アイコン画像の下のドメインを消します。

本当はドメインの左横にアイコンがあるそうなのですが、表示されていませんでした(あの謎の小さな四角かな…)。

こちらは「ブログカードのフッター」を非表示にするので、両方とも見えなくなります。

追加CSSに追記していきます。( 　追加CSSの開き方はこちら)

.internal-blogcard-footer{
  display: none;}

では、コードの意味をご説明します。

.internal-blogcard-footer

ブログカードには「内部ブログカード(自分のこのサイト内へのリンク)」と「外部ブログカード(このサイト以外へのリンク)」があります。

「internal」は「内部」、「external」が「外部」です。

ですので、今回は

という指示です。

「外部ブログカード」には参照元のドメインがあった方がいいかなと思い「内部ブログカード」を指定しています。

使い分けてね☆

「この記事を読む」を追加する

ちょっとさみしかったので、右下に「この記事を読む」というコメントを追加しました。

追加CSSに追記していきます。( 　追加CSSの開き方はこちら)

.blogcard::after{
  content: "この記事を読む \261e";
  position: absolute;
  display: inline-block;
  bottom: 0.5rem;
  right: 2rem;
  font-size: 80%;
  background-color: #b5d0e5; 
  color: #fff;
  border-radius: 3px;
  padding: 0.4em 1.5em 0.4em 2em;
}

では、コードの意味をご説明します。

.blogcard::after

この「::after」は疑似要素と呼ばれるもので、「position」を「absolute(絶対値)」に指定することが多いようですが…これはいつも動かし方がまだよくわかっていません(汗)

「position: absolute」は親要素に「position: relative(相対値)」を入れなければならないとのことで、親要素である「.blogcard」に記述しています。

普通は要素同士はお互いの余白を含む領域に侵入しません(マイナスの数値を入れると重なったりします)が「position: absolute」で指定すると「絶対的な位置」から動かないので、他の要素と重なってしまうことがあり扱いが難しいです…

普通なら上のスニペット(説明文)のpaddingやmarginを変えると一緒に動いて調整されるのですが、押されることなく決まった場所に留まり続けます。

「この記事を読む」の指さしマークは好きな文字(記号)に変えることができます。

「261e」は右を指す指マークのUnicode(ユニコード)の番号です。

Unicode(ユニコード)とは、世界中の言語や記号にアルファベットと数字の番号を宛がったものです。

「ユニコード　一覧　記号」などでネットで検索すると一覧が出てくるので、そこから好きな記号を選んで番号を変えられます。

bottom: 0.5rem;　right: 2rem;

これは「この記事を読む」が入った四角い枠が、ブログカードの全体の枠の位置に対して

という指示です。

「em」…font-size(フォントサイズ)やCSSで指定したサイズに合わせて変わります。

「rem」…はその文章全体で設定されているフォントサイズに合わせます。

background-color: #b5d0e5; 

コンテンツ(テキストや画像など)の背景の色を指定します。
paddingの範囲に色がつきます。

「#＋6桁の数字」はカラーコードで、色を差しています。

「カラーコード」と検索するとたくさんの色が出てきますよ。

color: #fff;

こちらは文字色の指定です。

「#fff」は「#ffffff」の略で、白色です。

border-radius: 3px;

こちらはコンテンツ(テキストや画像など)の入ったボックスの角を丸める指示です。

横幅と縦幅の同じ正方形のボックスでは「border-radius: 50%;」(ボーダーラディアス)をかけると正円になります。

padding: 0.4em 1.5em 0.4em 2em;

こちらは「padding(パディン)」(境界の内側の余白)が

という指示です。

上から時計回りに指定します。

数値やカラーを自分好みにカスタマイズしてね☆
 
疑似要素はなぜか急にpaddingやmarginが効かなくなるから、
そういうときはいったん消して手打ちしてみてね～

「関連記事」の色を変えて少し位置を下げる

「関連記事 」のラベルの色を変えて全体のバランスを取ります。

位置も少し下げたかったので入れてみました。

追加CSSに追記していきます。( 　追加CSSの開き方はこちら)

.blogcard-type .blogcard-label{
  background-color:#b5d0e5;
  color:#fff;
  border: 0px solid ;
  top:-10px;
}

ではコードの説明です。

 background-color:#b5d0e5;

「関連記事」のラベルの背景の色を指定します。

カラーコードを調べて好きなカラーのコードを「#b5d0e5」と入れ替えましょう。

color:#fff;

「関連記事」のラベルのフォントのカラーです。

カラーコードを調べて好きなカラーのコードを「#fff」と入れ替えましょう。

border: 0px solid ;

「関連記事」のラベルの枠線の指示です。

です。

ここに半角スペースで区切ってカラーコードを入れると色の指定もできます。

top:-10px;

「関連記事」のラベルの上の高さを枠線から「10px」上げます(マイナスの値で外側の余白を小さくしました)。

「top:0px; left:0px」にするとブログカードの左上の角にぴったりくっつきます。

画像の位置を調整する

画像の位置が低かったので上げました。

追加CSSに追記していきます。( 　追加CSSの開き方はこちら)

.blogcard figure{
margin-top: -2rem;
}

コードの意味です。

margin-top: -2rem;

これで上の余白を「-2rem」削りました。

削った分画像は上に移動します。

ポインターを当てたときのブログカードの色を変える

ポインターを当てると元々デフォルトでホバー(浮上)していましたが、そのときのカード全体の色を変えたかったので調整しました。

追加CSSに追記していきます。( 　追加CSSの開き方はこちら)

.blogcard-wrap:hover{
  background-color: #e3f1ff;
}

コードの意味です。

.blogcard-wrap:hover

の「wrap」は、浮上動作がゆっくりになります。

background-color: #e3f1ff;

ホバー(浮上)したときのカードの背景色の指定です。

カラーコードを調べて好きなカラーのコードを「#e3f1ff」と入れ替えましょう。

スマホ画面のレイアウトを整える

これでできた！と思ったら、スマホの画面では少しレイアウトが崩れていました。

スマホ画面のみで有効なコードに追記していきます。

追加CSSに追記していきます。( 　追加CSSの開き方はこちら)

@media screen and (max-width:480px) {
  .blogcard{
    position: relative;
    padding: 1rem 2rem 3rem 1rem;
  }
}

コードの説明です。

@media screen and (max-width:480px) 

幅480pxまでの画面の時に適用する、という記述です。

padding: 1rem 2rem 3rem 1rem;

padding(内側の余白)の下側を「3rem」で広くし、「この記事を読む」を入れるスペースを確保しました。

これでスマホでもレイアウトが整いました。

やっと終わったね！お疲れさま～
 
今はスマホを使う人が多いから、スマホ画面での見やすさもチェックしよう♪

左下の小さな四角を非表示にする

デフォルトのブログカードを挿入したときに左下に現れた小さな長方形。

おそらくこれはドメインの前につくサイトのロゴです。

なぜバグって表示されなのかはわからないのですが…

内部リンクではフッターごと非表示にしたことで消えていましたが、外部リンクでリンク先のドメインを表示したいときはこれがあるとなかなか困ります。

見えないので問題なさそうですがこれはしっかり存在するので、間延びした下側の空間「padding-bottom」が縮められなくなります。

もしわたしのサイトのように謎の長方形が出現して困っている人は

.external-blogcard-footer img{
	display: none;
}

とこちらを追加CSSに記述することで消すことができます。

この長方形は、ブログカードにカーソルが当たったときに設定したホバーでも白く表示されちゃうよ

ブログカードを入れてみよう！

いよいよ実践です。
「ここで他の記事に飛んでほしいな」、もしくは「ここでこの記事が読めたら便利だな」というリンクを貼りたい場所にブログカードブロックを追加しましょう。

ブログカードブロックの挿入の仕方は「Cocoonでの簡単な挿入方法」に記載しています。

　 【Cocoonでの簡単な挿入方法】へ

次に「自分で決めたclass名」を追加します。

　 「class名の追加の仕方」へ

今回はすべて消して書き直すのではなくexampleとなっている部分に「半角スペース＋自分で決めたclass名」を追加します。

こちらの 　プレビューの開き方を参考にしてプレビュー画面を開き、表示されているかチェックを行ってください。

反映されないときの対応

お疲れさまでした！
PCやスマホ画面でうまく表示されましたか？

コピペするだけなのに

ということは頻繁ひんぱんに起こります💦(…わたしだけ？？？)

主な理由は

こういうときは、

を試してみてください。

➀Class名を探す

参考にしたサイトが、自分とは

などの理由でclass名が違うことがあります。

そういうときは、

「F12」などで出すことのできる開発者ツールが使える人はそれで確認しましょう。

開発者ツールの「Elements(エレメント)」という項目で、HTMLとCSSを確認できます。

基本、開発者ツールを開くとデフォルトで「Elements(エレメント)」になっています。

それがよくわからない人は↓

などして、新しい情報を探しましょう。

WordPressのテーマ内で記述しているファイルの場所が分かるなら、親テーマのファイルを開いて確認することができます。

しかし、

最悪真っ白になって動かなくなる、とか…

ですので、初心者はあまりそちらを覗かないのが無難です。
わたしも怖くてほとんど開いたことがありません。

Cocoonの公式ページにも情報がたくさん載っています。　
Cocoonの公式ページは 　こちら。

「Cocoonフォーラム」では様々な困りごとが寄せられていますので、助けになるかもしれません。

➁「!important」「z-index」を試す

こちらについては 　「!important」「z-index」のご説明をしているところがありますので、そちらに飛んで参照してください。

③コピペを諦めて…手打ちする

これ、結構効果がありまして、どうしようもなくなったらいつもやっています。

書き換えても書き換えても全く記述が反応してくれなくなったとき、コピー＆ペーストではなくて元のコードを参照しながら手打ちすると、ちゃんと効くことがあります。

…長いコードだと大変なんだけどね…

➃PCから操作する

スマホで追加CSSを書き換えていると、突然書き込みができなくなることがあります。

理由は

ということが考えられるようです。

その場合

ということを試しますが、➀については気をつけたいことがあります。それは

ということです。

プラグインを調べるのが大変なときはPCからの作業に切り替えよう。

➁については

F5　もしくは　Ctrl＋F5

で行いますが、機種によって違います。

スーパーリロードとは、キャッシュデータを読み込まず新しいデータを読み込んで更新することを言います。

キャッシュデータとは、一度読みこんだwebページを次に読み込むときに早く表示できるように保存されたページのデータです。

これは本当はデータは新しいものに変わっているのに、ページでの見た目が反映されていないときに有効です。

古いキャッシュデータを読みこんで、新しいデータを持ってきてくれないときに使えるよ☆

まとめ

ブログカードはカラーを変えるだけでもサイトの雰囲気に馴染なじみます。

「豪華なカスタマイズはまだ難しいけど…」という人もぜひコピペでやってみてください。

自分の好きな色が画面に並んだらウキウキするよね♪
 
知りたいことのリクエストがあったら教えてね、記事に追加するかもしれないよ！