≫ Amazonの聴く読書~Audible~ 30日無料体験

【初心者向け】CocoonでCSSを追加する手順と注意点|WordPressカスタマイズ

Cocoon_追加CSSの使い方と注意点WordPress
初心者
初心者

WordPressでCocoonテーマを使っているけど、カスタマイズ紹介で良く出てくる追加CSSって何?どうやって使うの…?

そんなお悩みにお答えします。

よしてっく
よしてっく

WordPressのカスタマイズで検索すると追加CSSという言葉が出てきますが、初心者にはとても難しく感じますよね…

追加CSSの例追加CSSの例

プログラムに詳しくない人はCSSコードを見ても呪文のようで意味も解らないと思いますが、正しく使えばWordPress初心者でも大丈夫です。

 

ここでは、WordPressの追加CSSの解説と「Cocoonテーマ」でCSSを追加する基本的な手順をご紹介します。
 

☑この記事の内容

  • WordPressのCSSの解説
  • 追加CSSを使う時の注意点
  • CocoonテーマでCSSを追加する方法

 

この記事では具体的な追加CSSの紹介はありません。
当ブログで紹介している追加CSSを見たい場合は「CSS」でサイト内検索してみて下さい。
追加CSSをサイト内検索

 

スポンサーリンク

CSSはプログラム言語のひとつ

CSSはプログラム言語

★まず「CSS」とはWEBサイトの見た目を構成するために用いられるプログラム言語です。

 

Cascading Style Sheets (カスケーディングスタイルシート)】の頭文字をとった略称で、単にスタイルシートとも呼ばれます。
 
よしてっく
よしてっく

WEBサイトの見た目とは、文字のサイズや色・背景色などです。

パソ太郎
パソ太郎

WordPressのプログラムに追加するCSSだから「追加CSS」なんだね!

追加CSSを使えば、WordPressや導入しているテーマの標準設定ではできないような文字装飾もできます。

パソ太郎
パソ太郎

初心者がCSSコードを理解して作るのは難しいけど、プログラミングに詳しい人がサイトで提供してくれてるよ!

 

パソコンに詳しい人が作ってくれた追加CSSを使わせてもらえばブログ初心者でも簡単にオリジナリティのあるカスタマイズができるというのが魅力です。

 

CSSを追加する時の注意点

Cocoon_追加CSSの注意点

★追加CSSは簡単に言うとWordPressのプログラムを書き換える行為なので、上手く動作しないとサイトのレイアウトが崩れたり、その他の何らかの不具合を発生させる可能性もあります。

 

よしてっく
よしてっく

CSSコードは1文字違っているだけでも上手く機能してくれないので最低限の防衛策は行いましょう。

防衛策①:元のCSSコードをメモ帳アプリで保存しておく

CSSコードはテキストデータなのでメモ帳アプリで保存できます。

メモ帳アプリの起動(スタートメニュー)⇒アプリ一覧のWindowsアクセサリメモ帳

メモ帳にCSSを保存

テキストを保存するアプリは他にも「ワードパッド」や「Microsoftのワード」などもありますがWindowsに標準インストールされていて動作も軽い「メモ帳」アプリで充分です。

 

CSSコードをコピーするときはCtrl+Aで全体を選択してコピーして下さい。
マウスドラッグだと選択モレする可能性があります。

CSSのコピーは全選択

 

よしてっく
よしてっく

CSSを追加する前の状態をコピペしてメモ帳アプリで保存しておけば、イザとなったら丸ごとコピペで元に戻せます!

 

防衛策②:Cocoonのバックアップ保存をしておく

最悪のパターンを考えてCocoonのバックアップを保存するのもありです。

Cocoonテーマのバックアップ手順WordPress管理画面(ダッシュボード)Cocoon設定バックアップバックアップファイルの取得場所を指定して保存で完了です。

関連記事 Cocoon設定のバックアップ保存と復元の手順

 

不具合の防衛策を実施しておけば、追加CSSの導入はそれほど怖くありません。

 

よしてっく
よしてっく

防衛策が解ったら、いよいよCocoonの追加CSSの手順を解説します!

 

CocoonテーマでCSSを追加する手順

Cocoon_CSSの追加手順

(1)WordPress管理画面(ダッシュボード)で外観⇒テーマエディターをクリックします。

WordPress_外観のテーマエディター

 

(2)テーマの編集【Cocoon Child: スタイルシート (style.css)】という画面が表示されます。

必ず【Cocoon Child: スタイルシート (style.css)】の状態であることを確認して下さい。
Cocoon_スタイルシート編集の画面

 

もし違う画面になっている場合は、右側のメニューで切り替えて下さい。

Cocoon_スタイルシート編集の画面右側

 

(3)既にCocoonテーマ元々のCSSコードが記載されていますので、一番下までスクロールします。

Cocoon_スタイルシート画面の編集

 

(4)一番下にカーソルを置いて、とりあえずEnterキーで改行します。

2~3行、改行すると他のコードと区別しやすいので慣れないうちは多めに改行してもOK

Cocoon_スタイルシート画面の改行

 

ここに追加CSSをコピペします。

 

(5)例として適当な追加CSSをコピペしました。(38~41行目)

Cocoon_スタイルシート画面の追加CSS例

 

(6)最後に下の方にあるファイルを更新をクリックします。

Cocoon_スタイルシートの更新

 

ファイルの編集に成功しました。のメッセージが出たら完了です。

Cocoon_スタイルシートの更新完了

 

実際のサイトで目的のカスタマイズが反映されているか確認しましょう。

 

CSSがおかしいコードは赤色になる

Cocoon_CSSがおかしいコードは赤色になる

★追加したCSSコードがおかしい場合、そのコードが赤色になります。

 

Cocoon_CSSの正誤例

 

パソ太郎
パソ太郎

誤字・脱字など、自分で判断できる内容だったら修正しよう!

 

  {  、 }  のカッコ記号などもCSSコードの重要な要素ですので注意して下さい。 

 

よしてっく
よしてっく

サイトを確認しながら、修正してみるのも勉強になります!

 

まとめ:追加CSSでブログを自分仕様にカスタマイズ

今回は、WordPressの追加CSSの解説とCocoonテーマで実際にCSSを追加する基本的な手順をご紹介しました。

よしてっく
よしてっく

追加CSSを導入することで、ブログのカスタマイズの可能性が大幅に広がります!

冒頭でも言いましたが、追加CSSは詳しい人がコピペで導入できるようにネット上で提供してくれています。

パソ太郎
パソ太郎

提供してくれる追加CSSをありがたく使わせてもらってサイトのカスタマイズにも挑戦しよう!

より自分のブログに愛着が沸きますよ!

アンダーラインマーカー機能を自作してみよう|WordPress・Cocoon
アンダーマーカーは強調したい部分に使うとメリハリが出るので便利です。太字と同じくらい出番が多い機能ですが色や太さをもっと自分好みに変更したくなり調べました。結論としてはCocoonで用意されている機能を変更するのではなく新たな専用ボタンを作ります。

コメント