【Cocoon】初心者向け『表(テーブル)』の作成方法を丁寧に解説。カスタマイズ情報もあり!

キップム
キップム

記事に『表(テーブル)』を挿入したいんだけど…どうしたらいいのかな??

yoko
yoko

今から、表の作り方カスタマイズするときに参考にした記事を紹介するから、ぜひ試してみて。

キップム
キップム

わぁ、ありがとう。早速、やってみる♬

スポンサーリンク

この記事はこんな人にオススメ

  • 「表(テーブル)」ってどうやって作るんだろう…と悩んでいる人
  • 「表(テーブル)」をおしゃれにカスタマイズしたい人
  • Cocoonユーザー

この記事を読めば、できること

下記のような「表(テーブル)」を作成できる!

サーバー会社おすすめプラン初年度合計費用
エックスサーバーX1016,500円
mixhostスタンダードプラン12,936円
ロリコップスタンダードプラン8,250円

ちなみにCocoonデフォルトのデザインはこちら。

Cocoonデフォルトの表デザイン

表(テーブル)の作り方、大まかな流れ

今回の手順を簡単にまとめると、3ステップ!

表を作る
表をカスタマイズする
デザインを確認する

さっそくから順番に解説していきたいと思う。

1 表(テーブル)を作る

1. 記事執筆画面の「+」をクリックし「すべて表示」を選択

記事執筆画面

2. 左に全ブロックが表示されるので、テキストブロックから「テーブル」をクリック

Cocoon表(テーブル)の作り方02

3. すると、下記画像のような「カラム数」と「行数」を入力する画面が表示されるので、 必要数を入力し「表を作成」をクリック

「カラム数」と「行数」を入力する画面
キップム
キップム

カラム数は列の数、行数は行の数だよ。

4. (すごく小さい&薄くて見にくいけれど…)表が挿入される

表(テーブル)が挿入された画面

5. 表を選択し、右上の設定ボタンをクリック

設定ボタンの位置を説明する画像

6.右側に表ブロックのメニューバーが表示されるので、いろいろ試してあなたのブログに合うスタイルを見つけてもらえたらと思う。ちなみに私は、スタイルは「デフォルト」、表の設定は「ヘッダーセクション」をいつも選んでいる

右に表のメニューバーが表示された画像
キップム
キップム

「ヘッダーセクション」を選択すると、表の一番上に見出しが作れるよ。

7. セルをクリックしテキストを入力すると、表が完成

完成した表(テーブル)

知っておくと便利な機能

ここからは、表を編集するときに役に立つ便利機能を3つ、簡単にご紹介。

表の便利機能

表を画面のどこに表示するかを指定できる

表の便利機能01

テキストの配置を変更できる

表の便利機能02

行・列の追加、削除が簡単にできる

表の便利機能03

2 表(テーブル)をカスタマイズする

ネットで検索をしていたら、Bear faceさんの「【SANGOを自分でカスタマイズ】メリハリのある表にカスタマイズする」という記事を発見。

SANGO用のカスタマイズだったけれど、試しに書いてあるコードを完コピしてみたら「これは可愛いぞ〜〜!!」となったので、ほぼそのまま使わせていただいた。Bear faceさんには感謝しかない。

ただ、書いてあるまま全部を真似してみたら、自分のブログには似合わない部分も…….

しっくりくるよう余白やカラーを調整したコードがこちら。

/******************
表のデザインを変更
*******************/
/*--- 表全体(table) ---*/
.entry-content table {
    border-bottom: 1px solid #e6e6e6; /* 表の一番下の線 */
    border-top: none;
    border-left: none;
    border-right: none;
}
/*--- ヘッダーセル(th) ---*/
.entry-content th {
    border-radius: 10px 10px 0 0; /* 丸み(※ヘッダーセルが縦の場合は削除)*/
    padding: 0.8em .6em; /* 余白(上下 左右) */
    background-color: #c2e7eb; /* 背景色 */
    color: #fff; /* 文字の色 */
    letter-spacing: 0.1em; /* 文字の間隔 */
    text-align: center; /* 中央揃え */
    border: none; /* 線削除 */
}
/*--- 行(横方向)(tr) ---*/
.entry-content tr {
    text-align:center; /* 中央揃え */
}
.entry-content tr:not(:last-child) { /* 最後の行以外に適用 */
    border-bottom: 1px solid #e6e6e6; /* 下線 */
}
/*--- ヘッダーセル以外のセル(td) ---*/
.entry-content td {
    padding: 0.8em 0.8em; /* 余白(上下 左右) */
    border:none; /* 線を削除 */
}
.entry-content td:last-child { /* 最後のセルのみ適用 */
    border-right: 1px solid #e6e6e6; /* 右線 */
}
.entry-content td:not(last-child) { /* 最後のセル以外に適用 */
    border-left: 1px solid #e6e6e6; /* 左線 */
}

コードの追加方法

もうご存知の方も多いと思うけれど……コードの追加方法を解説していきたい。

スタイルシートに入力する前の注意点!
  • 編集前にスタイルシートのバックアップを必ず取る

  • 編集するテーマが「CocoonChild」になっていることを確認する

  • 「@charset”UTF-8”;」から始まる部分(最初から入力されている内容)は消さずに下に追記していく

  • 当ページによるデザイン崩れなど、動作不良があっても責任を取ることはできないのでご了承を

1.「外観」から「テーマエディター」を選択

Cocoonのダッシュボード画面

2. スタイルシートにコードをコピペする

Cocoonスタイルシートの画面

3. コピペ後、「ファイルを更新」をクリックしたらカスタマイズは終了

スタイルシートにコードを貼り付けた画像

3 デザインを確認する

1. 記事執筆画面の右上にある「プレビュー」をクリック

2. このように表示されていれば完成!

サーバー会社おすすめプラン初年度合計費用
エックスサーバーX1016,500円
mixhostスタンダードプラン12,936円
ロリコップスタンダードプラン8,250円

こちらもオススメ

キップム
キップム

この本を一通りやったら、意味不明だったコードの内容が理解できるようになったよ。

yoko
yoko

私も同じ!サイトで紹介されているコードをただコピペするだけではなく、自分のブログに合うようカスタマイズができるようになって嬉しかったなぁ。

キップム
キップム

その気持ち、わかるー。応用ができるとカスタマイズがぐっと楽しくなるよね♪

おわりに

可愛い表のカスタマイズ記事を書いてくれたBear faceさんに、特別感謝の気持ちをお伝えして終わりにしたい。

本当にありがとうございました!

文章: yoko( @_yoko51_

Comment