【初心者】CocoonでCSSを追加する手順と注意点｜バックアップの取り方は？

初心者

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

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

よしてっく

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

追加CSSの例

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

CSSのバックアップ方法もわかります。

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

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

よしてっく

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

パソ太郎

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

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

パソ太郎

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

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

CSSを追加する時の注意点

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

よしてっく

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

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

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

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

よしてっく

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

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

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

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

よしてっく

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

パソ太郎

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

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

よしてっく

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

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

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

よしてっく

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

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

パソ太郎

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

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

【Cocoon】アンダーラインマーカー機能を自作してみよう

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

yoshitechblog.com

参考サイト　【卒業生が選んだ】おすすめプログラミングスクール比較 | プロリア プログラミング