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

クラシックエディタで表組カスタマイズイメージ画像

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

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

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

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

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

マナブログCopyの表組イメージ画像

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

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

表組イメージ画像

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

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

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

スポンサードリンク

目次

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

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

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

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

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

こんなイメージです。

ManablogCopyカスタマイズイメージ画像

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

下記のコードを「外観」「カスタマイズ」から ⇒ 「追加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>

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

矢印イメージ画像
ManablogCopyカスタマイズ表組イメージ画像

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

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

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

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

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

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

それで完了・OKです。

秋田秀一

ただ・・・
私はあと少し自分なりに見映えよくカスタマイズしています。

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

table th{
border: 1px solid #87c8e7;
padding:15px;
background-color: #e4f6ff;
color: #123760;
font-weight: bold;
text-align: center;
}

table td{
border: #87c8e7 1px solid;
padding:15px;
text-align: left;
}

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

table.is-style-stripes td{
border: #87c8e7 1px solid;
padding:15px;

}

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

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

ManablogCopyクラシックエディタで表組のカスタマイズ完成形イメージ画像

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

まとめ

ManablogCppyカスタマイズ表組完成まとめイメージ画像
秋田秀一

欲を出せばキリがないです。
とりあえず今の段階での私の実力だとこれが精一杯です。

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

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

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

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

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


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

スポンサードリンク

クラシックエディタで表組カスタマイズイメージ画像

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

秋田秀一と申します。銀行に31年勤務して定年退職後、コンサルとネットビジネスの二足の草鞋を履いています。⇒ プロフィール

目次
閉じる