Cocoonで作るサイト型トップページ/オシャレなSWELL風(固定ページ使用)

アイキャッチ/サイト型トップページカスタマイズ
この記事はWordPressのテーマCocoon(コクーン)を対象としたカスタマイズになります。

先日、アピールエリアを使ったカスタマイズを更新しました。

今回は私のサイトで好評いただいているサイト型トップページの作り方をご紹介します!

当サイトはワードプレスの高機能無料テーマ【Cocoon】を使用しています。

最近話題のとてもオシャレな有料テーマ【SWELL】をモデルとして、サイト型トップページの作り方を順を追って書いていきたいと思います。

こんな人のお役に立てます
  • テーマ【Cocoon】を使っている
  • サイト型トップページに切り替えたい
  • デザインをSWELL風にしたい
  • HTML/CSSの理解が多少ある

なお、今回のトップページは固定ページ+HTML+CSSを使って柔軟なカスタマイズができるもの(難易度は初級~中級ほど)です。コピペできるコードは準備しましたので、コードを見てどこを変更したらよいのかざっと分かる程度の理解があると良いです。

それとは別にCocoonの標準機能でも簡単にカテゴリーごとのタブ切り替えやサイト型にすることができるようになっています。サイト型を検討される方はこちらも参考にしてみてください。

コード使うのは嫌だな…手軽にトップページを変えたい人はCocoon設定でできるこちらがオススメ。

それではご覧ください。

目次から見たいところへジャンプできます

ブログ型とサイト型の違いについて

ブログ型の特徴
  • トップページに上から記事が投稿順に並んでいる
  • カテゴリーが分かりにくい
  • 目的の記事が探しにくい
  • 古い記事が埋もれがち
  • ブログのデフォルトはこのタイプ
サイト型の特徴
  • トップページに新着記事、カテゴリーごとの記事、ピックアップ記事などのまとまりごとに表示される
  • カテゴリーが見やすい
  • 記事が探しやすい
  • すっきりしたデザインになる

ただずらーっと記事が並んでいるよりは、サイト型にするとメリットがたくさんあるね!

今回はサイト型へ変更してみるよ。CocoonカスタマイズはHTMLとCSSを駆使するので手間がかかるけど、ひとつずつ説明するので頑張ろう!

サイト型トップページの完成イメージ

実際に当サイトを見ていただくと分かりやすいかと思います。

  1. 新着記事
  2. カテゴリーごとの記事
  3. 今日読まれている記事

この3部構成で作成しています。

  • パソコンで見たときに横幅をフルワイドにする
  • エリアごとに背景色を分ける

こちらについてはコードが複雑になるので今回のカスタマイズには含めていません。ご了承ください。

サイト型トップページの作成手順

  • Step1
    固定ページを作成する

    固定ページを使ってトップページを作成します

    1. 新着記事
    2. カテゴリーごとの記事
    3. 人気記事
  • Step2
    トップページに必要ないものを非表示にする

    アイキャッチ画像など必要ない項目をCSSで非表示にします

  • Step3
    トップページに適用する

    作成したページをトップページに反映させます

固定ページを作成する

管理画面→固定ページ→新規追加 を選択します。

タイトルは”トップページ”など自分で分かるようになんでもOK。(CSSで非表示にします

編集する場所
  • HTML ブロックエディタを使っている場合は固定ページで+をクリックしたブロックメニューの中にある「カスタムHTML」で編集します。

  • ひとつのブロックのカスタムHTMLにまとめてコードを書く、またはコードエディタを使う(一括で編集しやすい)
  • まとまりごとに各ブロックに分けてコードを書く(ブロックごとに編集できるので視覚的に分かりやすい)

cocoonサイト型

どちらのやり方でもOK!

  • CSS 「外観」→「テーマフィルエディタ」→「Cocoon Child: スタイルシート(style.css)」に記述します。Cocoon Child(子テーマ)が選択されているか確認しましょう。

囲み枠css

トップページを作成するにあたっての注意

  • 当サイトのスキンは「なし」です。スキンを適用させているとデザインが重なってしまうことがあるのでご注意ください。

  • コードを編集する際には必ずバックアップをとりましょう。(成功したところまでのコードをこまめにコピーしておくなど、失敗してもやり直せるようにしておきます)

  • 横幅を生かすためにトップページだけサイドバーを非表示にすることをおすすめします。(Cocoon設定→全体→サイドバーの表示状態:フロントページで非表示にチェックする)

  • グループごとのコードの他に、コピペするコードは最後に総まとめとして記載しているのでご利用ください。

準備はOKでしょうか?それでは本編始めまーす。

新着記事

まずは冒頭の新着記事の部分。

この項目を表示しています
  1. 見出し (New post)
  2. 新着記事 (3記事)
  3. リンクボタン

見出し

<div>にクラス名を付け、下段のサブタイトルは疑似要素を使って表示させています。

見出しタグ<h2>を使っても良いですが、現在使っている装飾をリセットする必要があり余計な手間がかかるのでこちらでは<div>タグを使っています。

<div class="title newpost">New post</div>
/*見出し*/
div.title{
	text-align:center;/*中央寄せ*/
	font-size:2rem;/*文字の大きさ*/
	color:#555;/*文字色*/
	letter-spacing:.1rem;/*文字間の余白*/
	line-height:2;/*行の高さ*/
	margin:1rem;/*外側余白*/
	padding:0;/*内側余白*/
}

div.title:after{
	display:block;
	font-size:.8rem;
}

div.newpost:after{
	content:'- 新着記事 -';
}

新着記事を表示する

ショートコードで新着記事を表示するには

新着記事についてはCocoonのショートコードを使ってこのように表記します。

[new_list]

この基本コードにオプションを追加することでカスタマイズすることができます。

[new_list type="large_thumb" count="3" snippet="1" bold="1"]
ショートコードで設定していること
  • new_list:新着記事を表示する
  • type=”large_thumb”:大きなサムネイルカードで表示する
  • count=”3″:表示する記事数は3記事
  • snippet=”1″:スニペット(抜粋)を表示する
  • bold=”1″:記事タイトルを太字にする

Cocoonショートコードについて使い方や詳しいオプションについてはこちらをご覧ください。

新着記事を横並びにするCSS (Flexボックス)

ショートコードで表示された記事はデフォルトでは縦1列になるので、記事の並べ方をCSSで調整します。

  • パソコンでは横3列に並べる
  • スマホでは横1列×3行にする

要素を横並びにするときはCSSのFlexbox(フレックスボックス)を使うと便利です。

CSSで親要素にdisplay: flex;と表記するだけで子要素をフレックスレイアウト(横並び)にすることができます。

パソコンとスマホで表示の仕方を切り替えます。

/* 新着記事を横並びにする---------------------------------------------- */
.new-entry-cards.large-thumb{
	display: flex; /* フレックスボックスにする */
	flex-wrap: wrap;
	margin-bottom:1em;
}

/*新着記事サムネイル(大)*/
.new-entry-cards.large-thumb a{
width:calc(100% / 3);/*pcで横3列に並べる*/
}
/*480px以下*/
@media screen and (max-width: 480px){
	.new-entry-cards.large-thumb a{
		width:100%;/*スマホで横1列に*/
	}
}

リンクボタン

HTMLでリンクするときに使う<a>タグにクラス名をつけて、CSSでボタンのように装飾します。

<a class="link-btn" href="(https://記事一覧ページのリンク先URL)">New List</a>
/***リンクボタン***/
.link-btn{
display:block;/*ブロック要素にする*/
margin:1em auto;/*外側余白*/
padding: 8px;/*内側余白*/
cursor:pointer;/*ポインター*/
text-align: center;/*中央寄せ*/
text-decoration: none;/*文字装飾なし*/
border:1px solid #ccc; /*枠線(太さ、種類、色)*/
font-size:.9em;/*文字の大きさ*/
color:#666;/*文字色*/
width: 90%;/*ボタンの幅*/
}

背景色を変えてキラリと光るデザインにすることもできます。

リンク先の記事一覧ページを作成

ここでのリンク先は固定ページで作成します。

  1. 固定ページ→新規追加
  2. タイトルは「記事一覧」
  3. パーマリンク(URLスラッグ)を「articles」とします(分かりやすい名前なら何でもOK)
  4. 中身は空っぽのまま「公開」をクリック
  5. https://~サイトのURL/articles“(サイトURL/パーマリンク)がリンク先URLとなります

最後にトップページに適用するとき、「投稿ぺージ」として選択することでこのページに記事一覧が表示されます。

新着記事部分のHTML/CSSまとめ

<div class="title newpost">New post</div>
[new_list type="large_thumb" count="3" snippet="1" bold="1"]
<a class="link-btn" href="https://(記事一覧ページのリンク先URL)">New List</a>
/*見出し*/
div.title{
	text-align:center;/*中央寄せ*/
	font-size:2rem;/*文字の大きさ*/
	color:#555;/*文字色*/
	letter-spacing:.1rem;/*文字間の余白*/
	line-height:2;/*行の高さ*/
	margin:1rem;/*外側余白*/
	padding:0;/*内側余白*/
}

div.title:after{
	display:block;
	font-size:.8rem;
}

div.newpost:after{
	content:'- 新着記事 -';
}

/* 新着記事を横並びにする---------------------------------------------- */
.new-entry-cards.large-thumb{
	display: flex;
	flex-wrap: wrap; /* フレックスボックスにする */
	margin-bottom:1em;
}

/*新着記事サムネイル(大)*/
.new-entry-cards.large-thumb a{
width:calc(100% / 3);/*pcで横3列に並べる*/
margin-bottom:1em;
}
/*480px以下*/
@media screen and (max-width: 480px){
	.new-entry-cards.large-thumb a{
		width:100%;/*スマホで1列に*/
	}
}

/***リンクボタン***/
.link-btn{
display:block;/*ブロック要素にする*/
margin:1em auto;/*外側余白*/
padding: 8px;/*内側余白*/
cursor:pointer;/*ポインター*/
text-align: center;/*中央寄せ*/
text-decoration: none;/*装飾なし*/
border:1px solid #ccc; /*枠線(太さ、種類、色)*/
font-size:.9em;/*文字の大きさ*/
color:#666;/*文字色*/
width: 90%;/*ボタンの幅*/
}

カテゴリーごとの記事

続いてこの部分、カテゴリーごとの記事。

この項目を表示しています
  1. 見出し (Category)
  2. カテゴリー画像
  3. カテゴリーごとのタブ切り替え(更新記事と新着記事を各3記事表示する)
  4. リンクボタン

見出し

サイト型トップページ

先ほどの新着記事と同様に、<div>にクラス名を付け、下段のサブタイトルは疑似要素を使って表示させています。

<div class="title category">Category</div>

/*見出し*/
div.title{
	text-align:center;/*中央寄せ*/
	font-size:2rem;/*文字の大きさ*/
	color:#555;/*文字色*/
	letter-spacing:.1rem;/*文字間の余白*/
	line-height:2;/*行の高さ*/
	margin:1rem;/*外側余白*/
	padding:0;/*内側余白*/
}

div.title:after{
	display:block;
	font-size:.8rem;
}

div.category:after{
	content:'- カテゴリー別の記事 -';
}

カテゴリー画像(画像リンク)

サイト型トップページ

ただの画像だけでもよいのですが、リンクをつける場合はこのように記述します。

<a href=”(リンク先URL)”>表示する文字、または画像</a>と記述し、 aタグで画像表示タグである <img src=”(画像パス)”> を囲むことで画像がリンクになります。

<a href="(https://カテゴリーリンク先URL)"><img alt="" src="(https://カテゴリー画像パス)"></a>

画像のサイズを統一するには

幅を100%、高さの上限を固定(PCとスマホ別々に)して切り取ることで違うサイズの画像を使っても同じ大きさに揃うようにCSSでトリミングしています。

/*カテゴリー見出し写真*/
.home figure img {
	width: 100%;
	max-height: 400px;
	object-fit: cover;/*画像トリミング*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	.home figure img{
	max-height: 200px;
	}

タブ切り替えにする

CSSでタブ切り替えする方法については少し手間がかかりますが、コピペして必要なところを入力すればできるようにコードを準備しました。

仕組みなどの詳細をこちらの記事に書きましたのでご覧ください。

カテゴリーひとつ分のHTML

サイト型トップページ

画像リンク、タブ切り替え(更新記事/新着記事)、リンクボタンを入れたカテゴリーひとつ分のHTMLがこちらです。

<figure class="category-list">
<a href="https://(1つめのカテゴリーリンク先URL)"><img class="img-1" alt="" src="(https://1つめのカテゴリー画像パス)"></a>
    <div class="tab-wrap">
        <input name="TAB-1" class="tab-switch" id="TAB-1-2" type="radio" checked="checked"><label class="tab-label" for="TAB-1-2">更新記事</label>
          <div class="tab-content">
              [new_list modified="1" count="3" type="default" cats="(1つめのカテゴリーID)"]
          </div>
       <input name="TAB-1" class="tab-switch" id="TAB-1-1" type="radio"><label class="tab-label" for="TAB-1-1">新着記事</label>
         <div class="tab-content">
            [new_list count="3" type="default" cats="(1つめのカテゴリーID)"]
         </div> 
 </div>
<a class="link-btn" href="https://(1つめのカテゴリーリンク先URL)">このカテゴリーの記事を見る</a>
</figure>

2つめのカテゴリーの分もコピペして使えるように貼っておきます。(タブ切り替えのためnameやid部分を変更した、構造は全く同じものです)

<figure class="category-list"><a href="(https://2つめのカテゴリーリンク先URL)"><img class="img-1" alt="" src="(https://2つめのカテゴリー画像パス)"></a>
<div class="tab-wrap">
<input name="TAB-2" class="tab-switch" id="TAB-2-2" type="radio" checked="checked"><label class="tab-label" for="TAB-2-2">更新記事</label>
         <div class="tab-content">
           [new_list modified="1" count="3" type="default" cats="(2つめのカテゴリーID)"]
         </div>
    <input name="TAB-2" class="tab-switch" id="TAB-2-1" type="radio"><label class="tab-label" for="TAB-2-1">新着記事</label>
        <div class="tab-content">
           [new_list count="3" type="default" cats="(2つめのカテゴリーID)"]
        </div>
</div>
<a class="link-btn" href="(https://2つめのカテゴリーリンク先URL)">このカテゴリーの記事を見る</a>
</figure>
変更する箇所はここ!

HTMLコード

  1. カテゴリーページへのリンク先URL
  2. 表示したい画像のURL
  3. カテゴリーID

()で囲んである日本語のところを探すと見つけやすいよ!

この<figure class=”category-list”> ~</figure>で囲んだグループ(画像、タブ切り替え、リンクボタン)をカテゴリーの数だけ作ります。

ここでは2つ必要です。コードは少し長いけど変更するところはURLや画像パス、カテゴリーIDなのでゆっくり間違えないようにコピペしていこう。

ここからはタブコンテンツ(タブの中に入れるもの)の内容について説明していきます。

更新記事を表示する(カテゴリーごと)

更新日順に並び替えるには、新着記事のショートコードにmodifiedオプションを追加します。

入力例:modified=”1″(更新日順)
デフォルト値:0(投稿日順)

[new_list modified="1"]

この基本コードにオプションを追加しカスタマイズします。

[new_list modified="1" count="3" type="default" cats="カテゴリーID"]
ショートコードで設定していること
  • new_list:新着記事
  • modified=”1″:更新日順に表示する
  • count=”3″:表示する記事数は3
  • type=”default”:通常のリストタイプ表示
  • cats=”カテゴリーID“:表示するカテゴリーを限定する

新着記事を表示する(カテゴリーごと)

同様にショートコードで新着記事を表示します。

[new_list count="3" type="default" cats="カテゴリーID"]

カテゴリーIDを調べるには

カテゴリーを限定するためにcats=”“のところにカテゴリーIDを入れる必要があります。

「投稿」→「カテゴリー」→カテゴリー一覧から該当するIDを調べることができます。

カテゴリー記事を横並びにするCSS(Flexボックス)

  • パソコンでは横2列に並べる
  • スマホでは横1列×2行にする

先ほどの新着記事と同様に、コンテナを作りその中にアイテムを入れて並べ方を決めるイメージでFlexボックスを使用します。

作成した2つのカテゴリー記事のまとまりを横並びにするためにクラス名をつけた<div class=”category-list-flex”> </div>で見出しから下のカテゴリーの範囲全体を囲みCSSを記述します。

cocoonサイト型
/*カテゴリーごとの記事(flex)を横並べする*/
.category-list-flex{
 display: flex; /* フレックスボックスにする */
 flex-wrap: wrap;
}

.category-list{
	width:calc(100% / 2);/*パソコンで横2列*/
	padding:.5em;
}

/*480px以下*/
@media screen and (max-width: 480px){
	.category-list{
		width:100%; /*パソコンで横1列*/
	}
}

カテゴリーごとの記事部分HTML/CSSまとめ

カテゴリーごとの記事全体のコードがこちらです。

編集するときに前後の文字や””などを誤って削除したり重複しないようにしましょう。
<div class="title category">Category</div>

<div class="category-list-flex">

<figure class="category-list"><a href="(https://1つめのカテゴリーリンク先URL)"><img class="img-1" alt="" src="(https://1つめのカテゴリー画像パス)"></a>
       <div class="tab-wrap">
        <input name="TAB-1" class="tab-switch" id="TAB-1-2" type="radio" checked="checked"><label class="tab-label" for="TAB-1-2">更新記事</label>
          <div class="tab-content">
              [new_list modified="1" count="3" type="default" cats="(1つめのカテゴリーID)"]
          </div>
       <input name="TAB-1" class="tab-switch" id="TAB-1-1" type="radio"><label class="tab-label" for="TAB-1-1">新着記事</label>
         <div class="tab-content">
            [new_list count="3" type="default" cats="(1つめのカテゴリーID)"]
         </div> 
</div>
<a class="link-btn" href="(https://1つめのカテゴリーリンク先URL)">このカテゴリーの記事を見る</a>
</figure>


<figure class="category-list"><a href="(https://2つめのカテゴリーリンク先URL)"><img class="img-1" alt="" src="(https://2つめのカテゴリー画像パス)"></a>
<div class="tab-wrap">
<input name="TAB-2" class="tab-switch" id="TAB-2-2" type="radio" checked="checked"><label class="tab-label" for="TAB-2-2">更新記事</label>
         <div class="tab-content">
           [new_list modified="1" count="3" type="default" cats="(2つめのカテゴリーID)"]
         </div>
    <input name="TAB-2" class="tab-switch" id="TAB-2-1" type="radio"><label class="tab-label" for="TAB-2-1">新着記事</label>
        <div class="tab-content">
           [new_list count="3" type="default" cats="(2つめのカテゴリーID)"]
        </div></div>
         <a class="link-btn" href="(https://2つめのカテゴリーリンク先URL)">このカテゴリーの記事を見る</a>
   </figure>

</div>
/*見出し*/
div.title{
	text-align:center;/*中央寄せ*/
	font-size:2rem;/*文字の大きさ*/
	color:#555;/*文字色*/
	letter-spacing:.1rem;/*文字間の余白*/
	line-height:2;/*行の高さ*/
	margin:1rem;/*外側余白*/
	padding:0;/*内側余白*/
}

div.title:after{
	display:block;
	font-size:.8rem;
}

div.category:after{
	content:'- カテゴリー別の記事 -';
}


/*カテゴリー見出し写真*/
.home figure img {
	width: 100%;
	max-height: 400px;
	object-fit: cover;
}

/*480px以下*/
@media screen and (max-width: 480px){
	.home figure img{
	max-height: 200px;
	}
}


/* タブ切り替え---------------------------------------------- */
.tab-wrap {
display: flex;
flex-wrap: wrap;
margin:0;
padding:0;
}

.tab-label {
white-space: nowrap;
text-align: center;
order: -1;
position: relative;
z-index: 1;
cursor: pointer;
flex: 1;
letter-spacing:1px;
padding:6px;
border:1px solid #ccc;
font-size:.8em
}

.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
border: 10px solid transparent;
	width: 0;
	height: 0;
}

.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
}

/* アクティブなタブ */
.tab-switch:checked+.tab-label {
color:#fff;
background-color:#b5b5ae;
border:1px solid #b5b5ae;
}

.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 99%;
	left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top:10px solid #b5b5ae;
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px 0 0 0;
  transition: .5s opacity;
}

/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}


/*カテゴリーごとの記事横並べ(flex)*/
.category-list-flex{
 display: flex; /* フレックスボックスにする */
 flex-wrap: wrap;
}

.category-list{
	width:calc(100% / 2);/*パソコンで横2列*/
	padding:.5em;/*カードまわりに少し余白をあける*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	.category-list{
		width:100%; /*スマホで横1列*/
	}
}


/***リンクボタン***/
.link-btn{
display:block;/*ブロック要素にする*/
margin:1em auto;/*外側余白*/
padding: 8px;/*内側余白*/
cursor:pointer;/*ポインター*/
text-align: center;/*中央寄せ*/
text-decoration: none;/*装飾なし*/
border:1px solid #ccc; /*枠線(太さ、種類、色)*/
font-size:.9em;/*文字の大きさ*/
color:#666;/*文字色*/
width: 90%;/*ボタンの幅*/
}

長かったけどあとひとつ、ガンバ!!

今日読まれている記事(人気記事)

最後はこの部分、人気記事になります。

この項目を表示しています
  1. 見出し (Popular)
  2. 人気記事 (6記事)
  3. リンクボタン

見出し

先ほどの新着記事、カテゴリー別の記事と同様に、<div>にクラス名を付け、下段のサブタイトルは疑似要素を使って表示させています。

<div class="title popular">Popular</div>
/*見出し*/
div.title{
	text-align:center;/*中央寄せ*/
	font-size:2rem;/*文字の大きさ*/
	color:#555;/*文字色*/
	letter-spacing:.1rem;/*文字間の余白*/
	line-height:2;/*行の高さ*/
	margin:1rem;/*外側余白*/
	padding:0;/*内側余白*/
}

div.title:after{
	display:block;
	font-size:.8rem;
}

div.popular:after{
	content:'- 今日、読まれている記事 -';
}

人気記事

人気記事についてはCocoonのショートコードを使ってこのように表記します。

[popular_list]

この基本コードにオプションを追加してカスタマイズすることができます。

[popular_list days="1" count="6" type="large_thumb" cats="all"]
ショートコードで設定していること
  • popular_list:人気記事を表示する
  • days=”1″ :対象期間の日数
  • count=”6″ :表示する記事の数
  • type=”large_thumb” :カードタイプを大きなサムネイルにする
  • cats=”all”:すべてのカテゴリーを対象とする

人気記事の対象期間については、何も指定しないと全期間通してのPV数順に並びます。

全期間だとほとんど変動することなくつまらないので、当サイトでは対象を1日と短く設定して過去24時間にアクセスがあった記事が表示されるようにしています。(なので厳密に言うと0~24時区切りでの今日ではないけど…)

この期間についてはお好みで変更してください。

人気記事を表示するショートコードの使い方やオプションについての詳細はこちらをご覧ください。

人気記事を横並びにする

記事の並べ方をCSSで調整します。

新着記事の並べ方と同様にFlexbox(フレックスボックス)を使って横並べにし、パソコンとスマホで表示を切り替えます。

  • パソコンでは横3列に並べる
  • スマホでは横2列×3行にする
/* 人気記事を横並びにする---------------------------------------------- */
.popular-entry-cards.large-thumb{
	display: flex; /* フレックスボックスにする */
	flex-wrap: wrap;
	margin-bottom:1em;
}

/*人気記事サムネイル(大)*/
.popular-entry-cards.large-thumb a{
width:calc(100% / 3);/*パソコンで横3列*/
}
/*480px以下*/
@media screen and (max-width: 480px){
	.popular-entry-cards.large-thumb a{
		width:calc(100% / 2);/*スマホで横2列にする*/
	}	
}

人気記事のリンク先は自作する必要あり

カテゴリーページと違い人気記事のページは準備されていないので、別途固定ページを利用して自分で作る必要があります。

必要ない場合はリンクボタンを削除してください。

当サイトの人気記事ページは対象期間別にタブ切り替えできるようにしました。参考まで。

今日読まれている記事の部分HTML/CSSまとめ

<div class="title popular">Popular</div>
[popular_list days="1" count="6" type="large_thumb" cats="all"]
<a class="link-btn" href="(https://~自作した人気記事ページリンク先のURL)">Read more</a>
/*見出し*/
div.title{
	text-align:center;/*中央寄せ*/
	font-size:2rem;/*文字の大きさ*/
	color:#555;/*文字色*/
	letter-spacing:.1rem;/*文字間の余白*/
	line-height:2;/*行の高さ*/
	margin:1rem;/*外側余白*/
	padding:0;/*内側余白*/
}

div.title:after{
	display:block;
	font-size:.8rem;
}

div.popular:after{
	content:'- 今日、読まれている記事 -';
}

/* 人気記事を横並びにする---------------------------------------------- */
.popular-entry-cards.large-thumb{
	display: flex; /* フレックスボックスにする */
	flex-wrap: wrap;
	margin-bottom:1em;
}

/*人気記事サムネイル(大)*/
.popular-entry-cards.large-thumb a{
width:calc(100% /3);/*pcで横3列に並べる*/
}
/*480px以下*/
@media screen and (max-width: 480px){
	.popular-entry-cards.large-thumb a{
	width:calc(100% /2);/*スマホで2列にする*/
	}
}

/***リンクボタン***/
.link-btn{
display:block;/*ブロック要素にする*/
margin:1em auto;/*外側余白*/
padding: 8px;/*内側余白*/
cursor:pointer;/*ポインター*/
text-align: center;/*中央寄せ*/
text-decoration: none;/*文字装飾なし*/
border:1px solid #ccc; /*枠線(太さ、種類、色)*/
font-size:.9em;/*文字の大きさ*/
color:#666;/*文字色*/
width: 90%;/*ボタンの幅*/
}

トップページに必要ないものを非表示にする

固定ページで記事を作成したときに表示されるがトップページにするときに必要ないものをCSSで非表示にします。

/* トップページ非表示項目*/
.home .toc,/*目次*/
.home .breadcrumb,/*パンくずリスト*/
.home .eye-catch,/*アイキャッチ画像*/
.home .entry-title,/*記事タイトル*/
.home .sns-share,/*シェアボタン*/
.home .sns-follow,/*フォローボタン*/
.home header .post-date,/*ヘッダー投稿日*/
.home header .post-update,/*ヘッダー更新日*/
.home .author-info/*投稿者名*/
{
display: none;
}

.home をつけることでトップページのみに適用するようにしているのでプレビュー画面の段階では表示されていて問題ありません。

【総まとめ】コピペするコードはこちらです

さてさて、ここまでをすべてまとめたコードがこちらです。

説明するためにグループごとにコードを書いてきたけど、今回のトップページカスタマイズはこちらをコピペすれば全部OK!

同じCSSは1回だけ記述すればOKなので、まとめられるところは共通化してコードを短く調整しています。

<div class="title newpost">New post</div>
[new_list type="large_thumb" count="3" snippet="1" bold="1"]
<a class="link-btn" href="(https://記事一覧ページのリンク先URL)">New List</a>




<div class="title category">Category</div>

<div class="category-list-flex">

<figure class="category-list"><a href="(https://1つめのカテゴリーリンク先URL)"><img class="img-1" alt="" src="(https://1つめのカテゴリー画像パス)"></a>
<div class="tab-wrap">
        <input name="TAB-1" class="tab-switch" id="TAB-1-2" type="radio" checked="checked"><label class="tab-label" for="TAB-1-2">更新記事</label>
    <div class="tab-content">
              [new_list modified="1" count="3" type="default" cats="(1つめのカテゴリーID)"]
          </div>
       <input name="TAB-1" class="tab-switch" id="TAB-1-1" type="radio"><label class="tab-label" for="TAB-1-1">新着記事</label>
         <div class="tab-content">
            [new_list count="3" type="default" cats="(1つめのカテゴリーID)"]
         </div> 
</div>
<a class="link-btn" href="(https://1つめのカテゴリーリンク先URL)">このカテゴリーの記事を見る</a>
</figure>


<figure class="category-list"><a href="(https://2つめのカテゴリーリンク先URL)"><img class="img-1" alt="" src="(https://2つめのカテゴリー画像パス)"></a>
<div class="tab-wrap">
<input name="TAB-2" class="tab-switch" id="TAB-2-2" type="radio" checked="checked"><label class="tab-label" for="TAB-2-2">更新記事</label>
         <div class="tab-content">
           [new_list modified="1" count="3" type="default" cats="(2つめのカテゴリーID)"]
         </div>
    <input name="TAB-2" class="tab-switch" id="TAB-2-1" type="radio"><label class="tab-label" for="TAB-2-1">新着記事</label>
      <div class="tab-content">
           [new_list count="3" type="default" cats="(2つめのカテゴリーID)"]
        </div>
 </div>
         <a class="link-btn" href="(https://2つめのカテゴリーリンク先URL)">このカテゴリーの記事を見る</a>
   </figure>

</div>

<div class="title popular">Popular</div>
[popular_list days="1" count="6" type="large_thumb" cats="all"]
<a class="link-btn" href="(https://人気記事ページのURL:このページは自作する必要あり)">Read more</a>
/*トップページカスタマイズ******************************************************************/
/*見出し*/
div.title{
	text-align:center;/*中央寄せ*/
	font-size:2rem;/*文字の大きさ*/
	color:#555;/*文字色*/
	letter-spacing:.1rem;/*文字間の余白*/
	line-height:2;/*行の高さ*/
	margin:1rem;/*外側余白*/
	padding:0;/*内側余白*/
}

div.title:after{
	display:block;
	font-size:.8rem;
}

div.newpost:after{
	content:'- 新着記事 -';
}
div.category:after{
	content:'- カテゴリー別の記事 -';
}
div.popular:after{
	content:'- 今日、読まれている記事 -';
}


/***リンクボタン***/
.link-btn{
display:block;/*ブロック要素にする*/
margin:1em auto;/*外側余白*/
padding: 8px;/*内側余白*/
cursor:pointer;/*ポインター*/
text-align: center;/*中央寄せ*/
text-decoration: none;/*装飾なし*/
border:1px solid #ccc; /*枠線(太さ、種類、色)*/
font-size:.9em;/*文字の大きさ*/
color:#666;/*文字色*/
width: 90%;/*ボタンの幅*/
}

/*カテゴリ画像トリミング*/
.home figure img {
	width: 100%;
	max-height: 400px;
	object-fit: cover;
}

/*480px以下*/
@media screen and (max-width: 480px)
{
	.home figure img
	{
	max-height: 200px;
	}
}


/* タブ切り替え---------------------------------------------- */
.tab-wrap {
display: flex;
flex-wrap: wrap;
margin:0;
padding:0;
}

.tab-label {
white-space: nowrap;
text-align: center;
order: -1;
position: relative;
z-index: 1;
cursor: pointer;
flex: 1;
letter-spacing:1px;
padding:6px;
border:1px solid #ccc;/*タブの枠線 太さ 種類 色*/
font-size:.8em/*文字サイズ*/
}

.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
border: 10px solid transparent;
	width: 0;
	height: 0;
}

.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
}

/* アクティブなタブ */
.tab-switch:checked+.tab-label {
color:#fff;/*文字色*/
background-color:#b5b5ae;/*タブの背景色*/
border:1px solid #b5b5ae;/*タブの枠線 太さ 種類 色*/
}

.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 99%;
	left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top:10px solid #b5b5ae;/*タブの吹き出し部分*/
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px 0 0 0;
  transition: .5s opacity;
}

/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}


/* ウィジェット記事全体*/
.widget-entry-cards{
margin-bottom:1em;/*カード下に余白をあける*/
}

/***記事横並べ(flex)***/
.new-entry-cards.large-thumb,
.popular-entry-cards.large-thumb,
.category-list-flex{
   display: flex; /* フレックスボックスにする */
   flex-wrap: wrap;
}

/*新着、人気記事サムネイル(大)*/
.new-entry-cards.large-thumb a,
.popular-entry-cards.large-thumb a{
width:calc(100% / 3);/*pcで横3列に並べる*/
}

.category-list{
	width:calc(100% / 2);/*パソコンで横2列*/
	padding:.5em;/*カードまわりに少し余白をあける*/
}

/*480px以下*/
@media screen and (max-width: 480px){
       .new-entry-cards.large-thumb a,
       .category-list{
		width:100%;/*スマホで横1列に*/
	}
       .popular-entry-cards.large-thumb a{
	       width:calc(100% / 2);/*スマホで横2列*/	
	}	
}

/* トップページ・固定ページ非表示項目*/
.home .toc,
.home .eye-catch,/*アイキャッチ画像*/
.home .entry-title,/*記事タイトル*/
.home .sns-share,/*シェアボタン*/
.home .sns-follow,/*フォローボタン*/
.home header .post-date,/*ヘッダー投稿日*/
.home header .post-update,/*ヘッダー更新日*/
.home .author-info/*投稿者名*/
{
display: none;
}

リンク先URL、画像パス、カテゴリーIDなどの必要な入力が完了したらプレビューで確認し、表示がおかしいところは修正します。

上手くいかないときは
  • コード部分はすべて半角で入力されているか
  • HTMLでリンク先URLやクラス名は””で囲んでいるか
  • CSSのプロパティは{ }囲んでいるか
  • CSSを区切る ,(カンマ) や CSSクラス名の先頭につけている.(ドット)に間違いがないか(コピペしたときに多くつけていないか)

確認しましょう。見つけにくい全角スペースが思わぬところに入っていたり一文字でも入力ミスがあるとそれ以下は反映されなくなってしまうので注意

固定ページを「公開」

ここまで完成したら固定ページ作成画面、右上の「公開」をクリックします。

公開といってもまだトップページに適用していないので下書きを保存する意味合いです。

トップページに適用する

管理画面→設定

  1. ホームページの表示:固定ページにチェック
  2. ホームページ:トップページ
  3. 投稿ページ:記事一覧

「変更を保存」をクリックする。

完成~!お疲れさまでした♪

あとがき

今回はHTML/CSSを多用するカスタマイズとなりました。

コピペで使えるようにすべてのコードを公開しましたが…

見出しを2行にする、画像をトリミングする、横並べにする、タブ切り替えを導入する、レイアウト、余白を調整する……諸々。

何日も睡眠時間を削り

ひとつひとつ試行錯誤してきた、

血と涙の結晶です (T_T)うぅっ

Cocoonのサイト型を考えている方の手助けになれば幸いです。アレンジなどは自由ですが大切に使ってくださいね~!!

Twitterで公開しました。

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計な全角スペース、文字等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)


事前にバックアップをとり、カスタマイズは慎重に行いましょう。

ブログがもっと楽しくなる

基礎、応用編と分かれていて分かりやすい内容。CSSの理解を深めたい人へオススメです!!

カスタマイズ
\Follow/
Turicco

Comment

タイトルとURLをコピーしました