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

アイキャッチ/サイト型トップページカスタマイズ
2023.2.28 一部変更しました

こんにちは。

最近ブログサイトでよく見かける、新着記事やカテゴリー記事に分けて表示されたすっきりとしたトップページにしてみたいと思いませんか?

この形は今までのブログ型に対して「サイト型」と呼ばれています。

今回は最近人気の綺麗な有料テーマ【SWELL】をイメージしたサイト型トップページの作り方を解説していきたいと思います。

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

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

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

コードを使うのは抵抗が…手軽にトップページを変えたいという人はCocoon設定でできるこちらがより簡単。

\こちらもおすすめ、アピールエリア編/

それではご覧ください。

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

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

ブログ型

サイト型
  • トップページに上から記事が投稿順に並んでいる
  • カテゴリーが分かりにくい
  • 目的の記事が探しにくい
  • 古い記事が埋もれがち
  • ブログのデフォルトはこのタイプ
  • 検索流入がほとんどの場合はこちらでもよいかも

サイト型

サイト型
  • セクションごとに記事がまとまっている
  • カテゴリーが一目で分かる
  • 目的の記事を見つけやすい
  • 動線がよくなりアクセスアップが期待できる

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

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

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

この3部構成で作成しています
  1. 新着記事
  2. カテゴリーごとの記事
  3. 人気記事(今日読まれている記事)

\スクロールできます/
サイト型トップぺージ/フルスクリーン

あくまで当サイトのレイアウト例なのでアレンジは各自お好みでされてください。また仕上がりは若干異なる部分があります。

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

  • Step1
    固定ページを作成する
    HTMLを編集してトップページを作成します。
    (コピペ+リンク先など設定)
    1. 新着記事
    2. カテゴリーごとの記事
    3. 人気記事
  • Step2
    CSSをコピペする

    スタイル(見た目)を整える部分です。
    アイキャッチ画像など必要ない項目をCSSで非表示にします

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

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

  • 完成!

固定ページを作成する方法

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

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

コードの編集方法についてはこちらにまとめましたのでご覧ください。

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

  • 当サイトのスキンは「なし」です。スキンを適用させているとデザインが重なってしまうことがあるのでご注意ください。(別途CSSで調整が必要)
  • 横幅を生かすためにトップページだけサイドバーを非表示にすることをおすすめします。
サイドバーの非表示設定

(①②どちらかを設定します)
  1. Cocoon設定→全体→サイドバーの表示状態:フロントページで非表示にチェックする
  2. 固定ページメニュー:ページタイプ→1カラム(広い)を選択
  • 従来のクラシックエディタは使用できません(タブ切り替えの際に自動的に<p>タグが入ることによりレイアウトが崩れてしまいます)、Gutenberg(ブロックエディタ)のカスタムHTMLをご利用ください
  • コードを編集する際にはバックアップをとりましょう。(成功したところまでのコードをこまめにコピーしておくなど、失敗してもやり直せるようにしておきます)
  • コピペするコードは最初に記載します。(※特にCSSは重複しないように短くしているので、このまとめたコードだけをコピペすればOK)

    最後に解説していきますのでよろしければお付き合いください。

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

【追記】新着・人気記事表示にブロックが利用できるようになりました

2023.3.3 追記

Cocoonのアップデート(Cocoon2.5.6)でブロックに新着記事が追加されました。(現在は人気記事も対応しています)

当ページのカスタマイズでは新着記事を表示するために従来のショートコードを使っていますが、このアップデートにより手軽にブロックから新着記事を呼び出す方法も選択できるようになりました。

\koikenoteさんで使い方を書かれています/

これで完成!サイト型トップページのHTMLとCSS総まとめ

では、まず最初にすべての総まとめコードがこちら。

すべて入れてプレビューで確認すると見出しやタブ切り替えなどの骨組みがすべて出来上がりますので、あとは必要なところを入力するだけになっています。

すごいっ、これでほぼ完成!!

HTMLコード

\新着記事部分/
<div class="toppage new">
<div class="title newpost">New post</div>
 [new_list type="large_thumb" count="2" snippet="1"]
 
<a class="link-btn" href="(https://から始まるサイトURL)/?cat=0">New list</a>
</div>
変更するところ
  • 最後のリンクボタン:リンク先のURL(サイトURLに /?cat=0 をつけるとすべての記事一覧ページになります)
\カテゴリー部分(タブ切り替え)/
<div class="toppage cate">
<div class="title category">Category</div>
<div class="tab-wrap">
    <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked"><label class="tab-label" for="TAB-01">(※カテゴリー名①)</label>
    <div class="tab-content">
 [new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>
</div>

    <input id="TAB-02" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-02">(※カテゴリー名②)</label>
    <div class="tab-content">
[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>    
</div>

    <input id="TAB-03" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-03">(※カテゴリー名③)</label>
    <div class="tab-content">
[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>
</div>
</div>
      
</div>
変更するところ(各タブごと)
  • カテゴリー名 ①②③
  • カテゴリーID
  • カテゴリーリンク先
    (各カテゴリーページのURLです)

※コピペするときにURLを囲む” “(半角ダブルクォーテーション)や<>(タグ)を誤って消したり、また重複しないように注意します。
※ワードプレスの仕様で自動的に<p>タグが入る事例もありますが、改行されてタブがうまく表示されないためもし途中に<p>が入ってしまった場合は削除してくだい。

\人気記事部分/
<div class="toppage pop">
<div class="title popular">Popular</div>
[popular_list days="1" count="6" type="large_thumb" cats="all"]
</div>

※変更するところはありません

CSSコード

CSSは短縮してありますのでこちらをコピペすればOK!

/*トップページカスマイズ***************************************/
.toppage{
padding:3em 1em;/*内側余白調整*/
}

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

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: 5px;/*内側余白*/
  text-align: center;/*中央寄せ*/
  text-decoration: none;/*文字装飾なし*/
  border:1px solid #ccc; /*枠線(太さ、種類、色)*/
  font-size:.9em;/*文字の大きさ*/
  color:#666;/*文字色*/
  width: 80%;/*ボタンの幅*/
}

/* ウィジェット記事全体*/
.widget-entry-cards.card-large-image .a-wrap {
  max-width: 100%;/*カード幅調整*/
}

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

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

.cate .new-entry-cards.large-thumb a,
.popular-entry-cards.large-thumb a{
  width:calc(100% / 3);/*pcで横3列に並べる*/
}

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




/**************************
 タブ切り替え
***************************/

/* 親要素で囲みタブの横並びのためflexを指定*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:5px 0;
}


/*タブ(label)のスタイル*/
.tab-label {
  border:1px solid #ccc;
  text-align: center;
  padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
}

/*タブの間に余白をあける*/
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

/* タブのコンテンツ部分*/
.tab-content {
  display: none;
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

/* アクティブなタブ、選択されていることが分かるようにチェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
  color:#fff;/*文字色*/
  background-color:#b5b5ae;/*タブの背景色*/
  border:1px solid #b5b5ae;/*タブの枠線 太さ 種類 色*/
}

/*吹き出し部分のスタイル*/
.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	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;
  opacity: 1;
  transition: .5s opacity;
}

/* radioボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
  display: none;
}

ここから、解説部分のHTML/CSSはまったく同じ内容になるのでコピペしないでください。

それではひとつのセクションごとに解説していきます。

STEP

新着記事

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

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

見出し

サイト型(見出し)

<div>タグにtitleというクラス名を付け、下段のサブ見出しはCSSの疑似要素を使って表示させています。

見出しタグ<h2>を使っても良いのですが、装飾をリセットするためのCSSが増えるのでこちらでは<div>タグを使っています。

<div class="title newpost">New post</div>
/*見出し*/
div.title{
	text-align:center;/*中央寄せ*/
	font-size:2rem;/*文字の大きさ*/
	letter-spacing:.1rem;/*文字間の余白*/
	line-height:1.8;/*行の高さ*/
	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="2" snippet="1" bold="1"]
ショートコードで設定していること
  • new_list:新着記事を表示する
  • type=”large_thumb”:大きなサムネイルカードで表示する
  • count=”2″:表示する記事数は2記事
  • snippet=”1″:スニペット(抜粋)を表示する
  • bold=”1″:記事タイトルを太字にする

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

新着記事を横並びにする

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

\パソコンでは横2列に並べる/
\スマホでは横1列×2行/
アピールエリア

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

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

/* 新着記事サムネイル(大)を横並びにする---------------------------------------------- */
.widget-entry-cards.card-large-image .a-wrap {
  max-width: 100%;/*カード幅調整*/
}

.new-entry-cards.large-thumb{
	display: flex; /* フレックスボックスにする */
	flex-wrap: wrap;/*折り返しあり*/
}

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

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

リンクボタン

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

記事一覧ページのリンク先:(サイトURL)/?cat=0

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

ここではシンプルな枠だけにしているので、このボタンの背景色を変えてキラリと光るデザインにすることもできます。

※リンクボタンの作り方もすべて同じなので以下の解説は省略します。

STEP

カテゴリーごとの記事

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

サイト型/カテゴリー
この項目を表示しています
  1. 見出し (Category)
  2. 3つのカテゴリーをタブ切り替えにする
    (ひとつのカテゴリーに6記事表示)
  3. リンクボタン

タブ切り替えにする

サイト型/タブ

Cocoonにタブ切り替えする機能はついていなく自作設置になりますが、コピペして必要なところを入力すればいいようにコードを準備しました。

例)ひとつのタブはHTMLの<input>と<label>で作られます
<input id="TAB-01" type="radio" name="TAB" class="tab-switch">
<label class="tab-label" for="TAB-01">(※カテゴリー名①)</label>

タブ切り替えの詳細はこちらの記事にまとめましたのでご確認ください。(カテゴリー数に合わせてタブを増減する方法も記載しています)

タブ切り替え(3タブ)、記事、リンクボタンを入れたカテゴリー部分のHTMLがこちらです。

<div class="toppage cate">
<div class="title category">Category</div>
<div class="tab-wrap">
    <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked"><label class="tab-label" for="TAB-01">(※カテゴリー名①)</label>
    <div class="tab-content">
 [new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>
</div>

    <input id="TAB-02" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-02">(※カテゴリー名②)</label>
    <div class="tab-content">
[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>    
</div>

    <input id="TAB-03" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-03">(※カテゴリー名③)</label>
    <div class="tab-content">
[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]
<a class="link-btn" href="(※https://~から始まるリンク先URL)">Read More</a>
</div>
</div>
      
</div>
      
</div>

タブの色や形など見た目を整えるCSSはこちら。

/**************************
 タブ切り替え
***************************/

/* 親要素で囲みタブの横並びのためflexを指定*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:5px 0;
}


/*タブ(label)のスタイル*/
.tab-label {
  border:1px solid #ccc;
  text-align: center;
  padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
}

/*タブの間に余白をあける*/
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

/* タブのコンテンツ部分*/
.tab-content {
  display: none;
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

/* アクティブなタブ、選択されていることが分かるようにチェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
  color:#fff;/*文字色*/
  background-color:#b5b5ae;/*タブの背景色*/
  border:1px solid #b5b5ae;/*タブの枠線 太さ 種類 色*/
}

/*吹き出し部分のスタイル*/
.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	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;
  opacity: 1;
  transition: .5s opacity;
}

/* radioボタンは仕組みだけ利用するため非表示に*/
.tab-switch{
  display: none;
}
HTMLを変更する箇所はここ
  1. カテゴリー名
  2. カテゴリーID
  3. カテゴリーリンク先

各タブごとにそれぞれ設定が必要。(※)で囲んである日本語のところを探すと見つけやすいよ!

最初の総まとめの方にも書きましたが、ワードプレスの仕様でHTMLの<p>タグ(段落を意味し改行される)が自動的に入ってしまう事例があります。うまく表示されない場合は意図しないタグがないかを確認し、もし入っていた場合は<p></p>を削除してくだい。

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

タブの中(tab-contentというクラス名をつけた部分)にはショートコードでカテゴリー別新着記事を表示します。

カテゴリーを限定するためにcats=” “のオプションにカテゴリーIDを入れる必要があります。

[new_list type="large_thumb" count="6" cats="(※ここにカテゴリーID)"]

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

「投稿」→「カテゴリー」→カテゴリー一覧から該当するIDを確認できるので該当の番号を入れましょう。

カテゴリー記事を横に並べる

先ほどの新着記事と同じ要領で横並び3列(スマホでは2列)にするように調整します。

\パソコンでは横3列に並べる/
\スマホでは横2列×3行/
サイト型
/*カテゴリーごとの記事内の新着記事を横並びにする*/
.cate .new-entry-cards.large-thumb a{
width: calc(100%/ 3);
}

/*834px以下*/
@media screen and (max-width: 834px){
.cate .new-entry-cards.large-thumb a{
	width:calc(100% / 2);
	}
}

あとひとつだよ、ガンバ!!

STEP

人気記事

最後はこの部分、人気記事です。

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

人気記事を表示させる

人気記事については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 a{
  width:calc(100% / 3);/*pcで横3列に並べる*/
}

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

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

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

/* トップページ非表示*/
.home .article-header,
.home .article-footer{
  display: none;
}
非表示になる部分
  • アイキャッチ画像
  • 記事タイトル
  • SNSシェアボタン、フォローボタン
  • ヘッダー投稿日、更新日
  • 投稿者名

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

うまくいかないときは

ここまで設定を終えたらプレビューで確認しましょう。

表示が崩れたりする場合は何か原因がありますので確認してみてください。

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

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

どうしても原因が分からないときは成功したところまでのバックアップ、また最初からやり直すとうまくいくかと思います。

固定ページを「公開」

表示崩れがないことを確認したら固定ページ作成画面、右上の「公開」をクリックします。

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

仕上げ/トップページに適用する

これが最後の工程です!

管理画面→設定→表示設定

  1. ホームページの表示:固定ページにチェック
  2. ホームページ:トップページ(自分でつけたタイトル名)

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

サイト型

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

あとがき

いかがでしたでしょうか。

記述間違いがなければスムーズに完成されたと思います。

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

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

何日も睡眠時間を削り

ひとつひとつ調べながら試行錯誤してきた、

血と涙の結晶です (T_T)

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

>Twitterで公開しました

Comment

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