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

秋田です。

当ブログはAFFINGER5(WING)を利用していますが・・・他にもWPテーマとして他サイトにて・・・
ManablogCopyも利用しています。

シンプルで非常に気に入っているのですがカスタマイズには少しばかりプログラミングというかhtmlやcssの知識が求められます。
実は・・・ManablogCopyの標準形だと表組が貧弱というか(自分としては)非常に見にくいのです。

下表のような(AFFINGER5の場合のような)シンプルな表組を求めているのですが・・・

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

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

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

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

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

表組イメージ画像

そこで今回の記事は

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

について解説します。

銀行定年退職後に起業してネット通販を運営している中高年です。

 

目次

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です。

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

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

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クラシックエディタで表組のカスタマイズ完成形イメージ画像
 
[st-kaiwa1]もし、上手くいかない時は・・・[/st-kaiwa1]

textbox と /textbox の組み合わせを

div class=”textbox” と /div の組み合わせに替えてお試しください。

 

まとめ

ManablogCppyカスタマイズ表組完成まとめイメージ画像
欲を出せばキリがないです。
とりあえず今の段階での私の実力だとこれが精一杯です。

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

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

 

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

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

 

スポンサードリンク



 

よかったらシェアしてね!

この記事を書いた人

秋田秀一と申します。銀行に31年勤務して定年退職後、二足の草鞋を履いています。副業・起業・借金(資金調達と返済)についてお手伝いできましたらうれしい限りです。⇒ プロフィール

目次
閉じる