ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【マナブログコピー(WordPressテーマ)】グーテンベルグの表組み(テーブル)を使う方法

その他の追加設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、マナブログコピーで表組み(テーブル)を使う方法を紹介します。

【Manablog Copy】表組み(テーブル)を使う方法

まずは、マナブログコピーのデフォルト状態で、グーテンベルグを使って表組みを使ってみます。

投稿画面でマークをクリックして、フォーマットを選択します。


適当に行数と列数を決めたら表を作成をクリック。


テーブルができました。


適当に文字を入力します。


プレビューしてみましょう。
表が横幅いっぱいに広がってしまっていますね。
また、セルの余白も少し狭いですね。


修正するために下記のCCSを追加します。
追加は、カスタマイザー追加CSSに追加すればOKです。


.wp-block-table{
    display: block;
    overflow-x: auto;
    margin-left: 5%;
    margin-right: 5%;
    white-space: nowrap;
    border: #7B7B7B 1px solid;
}

.wp-block-table td{
	 border: #7B7B7B 1px solid;
	padding:15px;
	
}



.wp-block-table.is-style-stripes{
    display: block;
    overflow-x: auto;
    margin-left: 5%;
    margin-right: 5%;
    white-space: nowrap;
    border: #7B7B7B 1px solid;
}

.wp-block-table.is-style-stripes td{
	 border: #7B7B7B 1px solid;
	padding:15px;
	
}


プレビューしてみましょう。
バッチリですね。

グーテンベルグならテーブルのスタイルが変更できる

グーテンベルグなら表組みのスタイルが変更できます。

ストライプの表組み
テーブルを選んだ状態で、右メニュースタイルストライプを選択します。

こんな感じのストライプの表組みが出来上がります▼

種類個数大きさ
りんご5個
みかん8個


スマホで横スクロールする表組み(※SANGOグーテンベルグ使用時)
SANGOグーテンベルグを使えば、今流行のスマホで横スクロールできる表組みもできます。

公式SANGOグーテンベルグ

※SANGOグーテンベルグは、WordPressテーマ『SANGO』専門に作られているプラグインですので、他テーマへの使用は推奨されていませんので、自己責任でお願いします。

こんな感じです▼


SANGOグーテンベルグを使うと右メニューに、モバイルで横スクロールというメニューが追加できます。


出来上がった表組みがこちらです▼

種類個数備考
りんご3個りんご美味しい。りんご美味しい。りんご美味しい。りんご美味しい。りんご美味しい。
みかん5個みかん大好き。みかん大好き。みかん大好き。みかん大好き。みかん大好き。みかん大好き。みかん大好き。みかん大好き。みかん大好き。


モバイルのプレビューメージはこちらです▼


画像提供:Dooder – jp.freepik.com によって作成された business ベクトル

\将来につながるプログラミング/

エンジニアとして活躍したい人
プログラミング未経験でも安心
WordPressにもっと詳しくなれる
無料体験レッスン受講後に受講料が1万円引に!




注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定