起業主婦応援!~魅せ方1つで売れっ子に!~

お申込みにつながるブログ記事の書き方、今だけ無料プレゼント中♪

【cocoon】初心者向け見出しカスタマイズ!コピペだけで簡単にできるよ

WRITER
 
この記事を書いている人 - WRITER -
親・子の片づけマスターインストラクター/整理収納アドバイザー 1981年大阪生まれ大阪育ち。 お片づけの先生として活動しながら、前職であるSE(システムエンジニア)の経験を活かし、パソコンが苦手な起業主婦向けにワードプレス開設レッスンやWeb集客コンサルティングなどをおこなっています。

cocoonはワードプレスの無料テーマの中で、

無料テーマで1番使いやすい!!これ以上の無料テーマはない!!!

とわたしが敬愛してやまないテーマです。

 

 

参考

わたしのワードプレス開設ワークショップでもcocoonをインストールしてもらっています。

cocoon

 

きょうはコピペだけで簡単にcocoonの見出しカスタマイズをする方法をお伝えしまーす!

 

cocoonデフォルトの見出し

 

 

cocoonのデフォルトの見出しはこんな感じ。

とってもシンプルなので、シンプル好き、モノクロ好きさんにはすごく良いかと思うんですが

もう少し装飾や色があったほうがいいな~という方には少し物足りない感じ。

 

これを、カスタマイズしていきます。

 

まずは今の見出し設定をリセットします

いま見出しに設定している背景色やボーダー(線)を、まずはすべてリセットする必要があります。

コピペするだけ!のようなサイトで紹介してくれている見出しのCSSを貼り付けても、リセットしていないとデフォルトの設定が残ったままになってしまうのでおかしな表示になっていしまいます。

 

例)

2重のオレンジ線だけにしたいのにグレーの背景色が残ってしまってる~!!

 

 

 

というわけで、このデフォルトの設定をリセットしてしまいましょう。

 

1.以下のコードをコピーしてください。

 

 

 

2.コピーしたコードを以下に貼り付けます

 

 

 

ワードプレスの外観→テーマ編集の

 

 

 

「子テーマ用のスタイルを書く」

の下にペタッと貼り付けてください。

 

 

ぺたーーー!!

 

これでリセット完了!こんな感じになります。

 

 

 

どんな見出しにしたいかを選ぼう

いつもお世話になっているサルワカさんのサイトには、かわいい見出しがめちゃくちゃいっぱいあります。

 

ここから、どんな見出しにしようかなー?と選んでください。

 

もちろんサルワカさん以外のサイト様から選んでもらってもOKですよ~!

 

 

選んだら、コードを貼り付けるだけ

では例えば、

引用元:サルワカ「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

「上下に線」のデザインにしよう!という場合は、

引用元:サルワカ「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

赤枠の中だけコピーしてください。

 

コピーしたものを

外観→テーマの編集に貼り付けたコードの間に貼り付けます

 

 

「!」が表示されている場合はエラーなので、これを修正します

「!」が表示されない場合ももちろんあります!その場合はこれで終了~!

 

簡単!エラーの修正方法

 

エラーの原因は「padding」を2度指定しているから。

上のpaddingはリセットのために記述していたものです。

今回の見出しではリセットするのではなく新しい設定をするので、リセットするための記述を消してあげましょう

 

 

こんな感じ!

 

 

これでエラーも解消されて、完成です!

 

 

色を変えたい場合

色を変えたい場合は

ここのカラーコードを変えてくださいね。

※色は「 # 」から始まるコードで書かれていることが多いのでわかりやすいと思います!たまに、「 black 」とか英単語で指定されてることもあり。

 

参考

原色大辞典

カラーコードを確認するのはこちらのサイトが便利です

 

カラーコードを変えてみると・・

 

 

 

こんな感じ!

 

 

 

さいごに

いかがでしたか?

コピペだけで簡単に見出しのカスタマイズができちゃいましたね!(デリートとかもいるけどなっ!)

 

今この記事を、作業はせずに文章だけ読んでる・・という方はあまりピンとこないかもしれませんのでぜひ実際に作業してみてください!

簡単さが実感できるので~!!

 

 

ではでは!

整理収納アドバイザーのための

お申込みにつながる

ブログ記事の書き方

無料配布することにしました

お申込みにつながるブログ記事の書き方をまとめました。

ひとあし先にお渡しした方には「これ無料で配布するの?!」と驚かれてしまいましたが、ぜひあなたのブログにお役立てください。

あなたとブログとサービスの魅せ方をより良くするために、必ずこれだけは守ってください!というとても大切なことを書きました。

今のうちにゲットしてくださいね。

この記事を書いている人 - WRITER -
親・子の片づけマスターインストラクター/整理収納アドバイザー 1981年大阪生まれ大阪育ち。 お片づけの先生として活動しながら、前職であるSE(システムエンジニア)の経験を活かし、パソコンが苦手な起業主婦向けにワードプレス開設レッスンやWeb集客コンサルティングなどをおこなっています。

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Copyright© 魅せ方美人研究所 , 2018 All Rights Reserved.