ManablogCopy クラシックエディタで表組をカスタマイズする！

マナブログで使われているManablogCopyのカスタマイズについての記事です。

■ マナブログコピーはシンプルで気に入っているけど、カスタマイズに少しばかりプログラミングというか、htmlやcssの知識が求められるので戸惑っている、という人。
■ ManablogCopyの標準形での表組が少し貧弱というか、見にくいと感じたことのある人。

そんな人に自分なりのカスタマイズをご案内します。自分としては、下表のようなシンプルな表組を求めているのですが・・・

タイトル1	タイトル2	タイトル3
項目1	項目2	項目3

 
ManablogCopyの表組は下図のようになってしまいます。

上図に記載のコードをAddQuicktagに登録して呼び出して使っているのですが・・・どうしても見映えのいいものにはなりません。

何といっても左端にくっついてしまって、横幅が自動調整であるため文字数が少ないと貧弱に見えてしまうのです。

【今回の記事がおススメな人】
■ ManablogCopyの表組をカスタマイズしたい人。
■ あと少しだけ見映えよくしたい人。

【今回の記事で学べること】
■ ManablogCopyの表組をクラシックエディタでカスタマイズする、についてわかりやすく解説します。

約31年間勤務した銀行定年退職後に起業してコンサル・ネット通販している中高年の秋田です。

ManablogCopyの表組をクラシックエディタでカスタマイズする

簡単2ステップでカスタマイズしてみたいと思います。
もちろん本格的にcssをカスタマイズできる人はその方がいいかも知れませんが・・・

まずは簡単に微調整できればOKという方向きのやり方です。

まずは左端にスペースを入れてみます。 

背景色白色の「テキストボックス」をわざと入れる！

こんなイメージです。

（画像のテキストボックスの背景色が白色ではありませんけどご了承ください）

下記のコードを「外観」「カスタマイズ」から ⇒ 「追加CSS」にコピペします。

  .textbox {
border: solid 1px #fff ;
background: #fff;
margin:20px 20px ;
padding:20px 15px ;
}

そして・・・投稿画面の記事入力（テキスト）に・・・

<textbox>
<table>
<tr><th>タイトル1</th><th>タイトル2</th><th>タイトル3</th></tr>
<tr><td>項目1</td><td>項目2</td><td>項目3</td></tr>
</table>
</textbox>

と記述すると・・・下表のような形になります。

いかがですか。
左端にスペースが確保できました。

次にもっと見映えよくカスタマイズします。

追加cssをさらにカスタマイズする

こちらのサイトからコードをコピペさせてもらってください。
ManablogCopyのカスタマイズについて詳しく解説されているサイトです。

⇒　ManablogCopyの表組カスタマイズ方法（グーテンベルグの表組）

このページの中ほどに・・・32行のコードが記載されています。
コピペして、それを追加cssに加えてください。

それで完了・OKです。

見出しの背景色を変えたり、見出しのフォントの色を自分好みに変えたりしています。
参考までにこちらです。

【出典：ごま吉さまのサイトからのコードを自分流に微修正】

完成形での表示はこんな感じです。

■ もし上手くいかない時は・・・
■ textbox と /textbox の組み合わせを ⇒ div class=”textbox” と /div の組み合わせに変えて試してみてください。

まとめ

それでも「良し！」とします。

【まとめ】
　ManablogCopyをクラシックエディタで表組するなら簡単カスタマイズでとりあえず見映えよくする。
　本格的にcssを勉強してカスタマイズしたい、という方は勉強されてください。
　私はプログラミングで稼ぐ予定はないので「ここまでで良し！」とします。

ここまで本当にありがとうございました。

 マナブ氏関連、ManablogCopy関連の記事をまとめた一覧ページを用意しました。

⇒ マナブ氏・マナブログ・ManablogCopy関連記事

【追伸】
記事投稿スペースの中に白地の箱（ボックス）を挿入するやり方についてはこちらの記事も参考になります。
Youtube動画のサイズを微調整して埋め込む時のカスタマイズ方法です。