CSSカスタマイズ内容まとめ(Cocoon)

このコンテンツは、テストサイトAと同じようなページを作る上で必要な「CSSカスタマイズ」をまとめたものです。

「カスタマイズ」と聞くと怖いと思うかもしれませんが、このコンテンツを見ながらコードをコピー&ペーストするだけなので心配は要りません。では、さっそく始めていきましょう。

現状確認(課題と対策)

WordPressサイトのホームページを「固定ページ」に設定し、サイドバーを非表示にすると、ホームページは下図のように表示されます。

カスタマイズ前のホームページ

テストサイトのホームページとは、あまりにも違いますよね。テストサイトと同じようなページを作るには、下記の課題をクリアする必要があります。

課題
  1. 導線の妨げとなる「余計な情報」を非表示にする
  2. コンテンツの両端に適度な余白を持たせ、視認性を向上する
  3. 見出しのデザインを変える

これらの課題を解決する対策が、CSSのカスタマイズです。次に、対象や具体的なカスタマイズ項目を解説します。

CSSカスタマイズの対象ページと対象項目

バラバラに説明しても混乱するだけなので、対象ページ及び対象項目を一覧表にまとめました。この表を見ながら作業を進めていきましょう。なお、凡例は下記の通りです。

凡例

〇:表示する(そのまま)
×:非表示にする(カスタマイズ対象)

※このテーブルは、横にスクロールします。

no. 項目 ホームページ セールスページ 固定ページ (参考)投稿

1

ページタイトル

×

×

2

投稿者名

×

×

×

3

投稿日/更新日

×

×

×

4

SNSフォロー/シェアボタン

×

×

×

5

余白(パディング)調整

行う

行う

行う

行わない

6

見出しカスタマイズ

行う

行う

行わない

行わない

※注記

【※注記】:投稿は、サイドバーを表示するのでパディング調整は行わない(サイドバーを非表示にする場合は調整が必要)。

CSSカスタマイズを行う場所

  1. 子テーマのstyle.css
  2. 各ページの最下部にある「カスタムCSS」

STEP1:共通カスタマイズ

最初に、「ホームページ及び固定ページ共通のカスタマイズ」を行います。カスタマイズする「場所」は、子テーマの「style.css」。具体的な項目は下記の通りです。

カスタマイズ項目
  • ホームページのページタイトルを非表示にする
  • ホームページの見出しデザインを変更(削除)する
  • 全固定ページのメインコンテンツ左右両端にそれぞれ100pxの余白を設ける
  • 全固定ページの「シェアボタン」「フォローボタン」「投稿日/更新日」「投稿者名」を非表示にする

それでは、さっそくカスタマイズを始めていきましょう。

①テーマエディターへアクセスする

まずは現在有効化しているテーマを確認します。
管理画面左側メニューの「テーマ」をクリック。テーマ一覧画面が表示されたら、「Cocoon-child」が有効化されていることを確認します。違うようなら、「Cocoon-child」を有効化して下さい。

【重要】必ず子テーマを有効化すること
  • 子テーマが有効化されていない場合は、今すぐ子テーマを有効化すること。
  • 子テーマをインストールしていない場合は、今すぐ子テーマをインストールし、有効化すること。

※テーマのアップデート時にカスタマイズ内容が消えてしまうのを防止するため。

子テーマが有効化されていることを確認したら、「テーマエディター」をクリックして下さい。

②「style.css」にコードを追記する

テーマエディターに移動したら、移動後の画面に表示されているのが「Cocoon Child: スタイルシート (style.css)」であることを確認して下さい。

違うファイル名が表示されていた場合は、画面右側の「編集するテーマを選択」メニューに表示されているテーマを「Cocoon Child」に変更します(「Cocoon Child」が表示されていればそのままでOK)。

次に、「編集するテーマを選択」メニューの下にある「スタイルシート」リンクをクリックして下さい。左上の表示が「Cocoon Child: スタイルシート (style.css)」に変わったら、作業スタートです。

②-1:ホーム/固定ページのカスタマイズ

まずはホームページ/固定ページのカスタマイズを行っていきます。画像の枠で囲った部分、「必要ならばここにコードを書く」の下がコードを追記する(貼り付ける)部分です。

カスタマイズコードの貼り付け場所(style.css)

貼り付けるコードは下記の通り。黒い枠内のコードを全てコピーして、貼り付けて下さい。

/*ホームページの「ページタイトル(H1見出し)」を非表示*/
.home.page .entry-title{
    display: none;
  }

/*ホームページの見出しデザインを消去(h2~h4)*/
.home.page .entry-content h2{
    padding: 0;
    margin: 0;
    background:none;
  color: #000;
    border-collapse: separate;
    border-spacing: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    line-height: normal;
    position:relative;
}

.home.page .entry-content h3{
    padding: 0;
    margin: 0;
    background:none;
    border-collapse: separate;
    border-spacing: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    line-height: normal;
    position:relative;
}

.home.page .entry-content h4{
    padding: 0;
    margin: 0;
    background:none;
    border-collapse: separate;
    border-spacing: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    line-height: normal;
    position:relative;
}  

/*全固定ページの「シェアボタン」「フォローボタン」「投稿日/更新日」「投稿者名」を非表示*/
.page .sns-share,
.page .sns-follow,
.page .date-tags,
.page .author-info{
    display: none;
  }

/*全固定ページのメインカラムパディング設定*/
.page .content .main {
    padding: 100px;
}

貼り付けるとこんな風になります。上のコードを全部貼り付け、「ファイルを更新」ボタンをクリックして下さい。

カスタマイズコードの貼り付けイメージ①

②-2:レスポンシブデザインのカスタマイズ

次に、スマートフォンでサイトを閲覧した際の余白設定を行います。今のままだとスマートフォンでも左右の余白が100px追加されてしまい、コンテンツが見るに堪えない状態になってしまいます。なので、スマートフォン用に別途余白設定を行う必要があるからです。

コードを追記する場所は、子テーマの「style.css」下部にある「レスポンシブデザイン用のメディアクエリ」という見出しの下になります。

まずは貼り付け前の表示です。

/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}

そしてこれが変更後の表示です。黒枠内のコードを全てコピーして、貼り付け前のコードに上書きして下さい。

/*834px以下*/
@media screen and (max-width: 834px) {
.page .content .main, .content .sidebar {
		padding: 15px;
	}
}

このように表示が変わったら、「ファイルを更新」ボタンをクリックして下さい。

カスタマイズコードの貼り付けイメージ②

③変更が反映されたか確認する

ここまでの作業がきちんと反映されているか、一度サイトを確認してみましょう。

カスタマイズ後のホームページ

余計な項目は全て非表示となり、見出しのデザインもなくなりました。また、コンテンツ左右の余白が増えたので、文章を入れても見やすくなりました。

次は通常の固定ページです。ここでは、「お問合わせ」ページをチェックしてみます。

カスタマイズ後の固定ページ(お問合わせページ)

ページタイトルは表示されたまま、SNSアイコンは非表示に変わりました。ホームページとセールスページ以外はページタイトルが無いと何のページか分からなくなるので、これでOKです。

STEP2:専用カスタマイズ

次に、「セールスページ専用のカスタマイズ」を行います。カスタマイズする「場所」は、セールスページ最下部にある「カスタムcss」。具体的なカスタマイズ項目は、下記の通りです。

カスタマイズ項目
  • セールスページのページタイトルを非表示にする
  • セールスページの見出しデザインを変更(削除)する

上記のカスタマイズは、先ほどの「子テーマのstyle.css」でやればいいんじゃないの?と思ったかもしれません。確かに出来ないことはありませんが、セールスページは複数作るもの。都度適用/除外設定を行うのは面倒なので、カスタムCSSを使ってカスタマイズします。

それでは、さっそくカスタマイズを始めていきましょう。

①現状確認

まずはセールスページの現状確認を行います。

Section8で「本文無しの「空ページ」だけを作っておき、先に進みましょう」という説明をしたので、空白のページは作成しているはずです。この空白のセールスページに、ダミーの見出しとテキストを入れてみます。

カスタマイズ前のセールスページ

共通カスタマイズにより、SNSシェア/フォローボタンは非表示になっていますが、ページタイトルと見出しはそのままですね。この2つを非表示にしていきます。

②カスタムCSSの場所を確認

ご覧の通り、ページ編集画面の最下部にあります。

③「カスタムCSS」にコードを追記する

下記コードを全てコピーして「カスタムCSS」欄に貼り付け、「ファイルを更新(または下書き保存)」ボタンをクリックして下さい。

/*セールスページの「タイトル(H1見出し)」を非表示*/
.entry-title{
    display: none;
  }
  
/*セールスページの見出しデザインを消去(h2~h4)*/
.page .entry-content h2{
    padding: 0;
    margin: 0;
    background:none;
	color: #000;
    border-collapse: separate;
    border-spacing: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    line-height: normal;
    position:relative;
}

.page .entry-content h3{
    padding: 0;
    margin: 0;
    background:none;
    border-collapse: separate;
    border-spacing: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    line-height: normal;
    position:relative;
}

.page .entry-content h4{
    padding: 0;
    margin: 0;
    background:none;
    border-collapse: separate;
    border-spacing: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    line-height: normal;
    position:relative;
}  

上のコードを全部貼り付け、「更新」または「下書き保存」をクリックして下さい。

カスタマイズコードの貼り付けイメージ

④変更が反映されたか確認する

ここまでの作業がきちんと反映されているか、一度サイトを確認してみましょう。

カスタマイズ後のセールスページ

ページタイトルは非表示となり、見出しのデザインもなくなりました。これで一連のCSSカスタマイズは完了です。

もっと詳しく知りたい?なら、こちらに参加して下さい。

このコンテンツに記載されている通りに作業を進めれば、素人でも成果の出るウェブサイトを作ることが出来ます。
でも…「もっと詳しく教えて欲しい」と思っていませんか?

もしあなたがそうお考えなら、そのご要望に完全無料でお応えします。今すぐ下のボタンをクリックして、詳細をご確認下さい。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう