表(テーブル)の罫線表示とTinyMCE Advancedの使い方

WordPressのテーマでcocoonを使っていると、編集ページでは罫線があるように見えるのですが、実際には罫線は表示されません。また背景色なども簡単に変えたいことが多いです。

htmlで直接罫線や背景色を指定するなどの選択肢はあるのですが、メンテナンスの容易性を考慮した時にできるだけその方法は取りたくありません。

「TinyMCE Advanced」をインストール

そこでエディタ拡張機能である「TinyMCE Advanced」をプラグインメニューから新規インストールし有効化します。

設定メニューにTinyMCE Advancedが追加されます。TinyMCE Advancedの設定メニューには、エディターの編集メニューを自分が使いやすいようにカスタマイズする機能があります。

ドラッグ&ドロップでメニューを並び替えたり、下記のように追加したり、削除したりして、自分専用のエディタにすることができます。

表の作成

表を3パターン作成しました。

編集ページでの表示

編集ページではそれぞれ以下のように見えます。すべて枠線があるように見えます。

実際の(プレビュー)表示

編集ページでは3つとも罫線があるように見えます。

しかし1番目の表には罫線はまったく表示されません。何も変更を加えていません。

2番目の表は外枠のみです。これも何も変更を加えていません。

3番目の表には、罫線が表示されるように変更を加えました。

罫線を表示させる

まず、表全体(全てのセル)を選択します。

テーブルメニューのセルメニューから、 セルのプロパティを選択します。

そうするとセルの設定を変更できる画面が出てきます。

「高度な設定」のタグに移動し、スタイルの所に

border-color: #000000; border: 1px solid;」を設定します。これで上記3番目のような罫線が引けました。

罫線の色(border-color)に黒(#000000)、罫線(border)の幅を1に線のパターンに実線(solid)という内容です。

一般的な表のスタイルであればこれで良いと思います。

罫線だけであれば、他はいじらなくても良いです。

罫線のスタイルや背景色を変える方法

線のスタイルや色、背景色を変更したければ、同様にセルのプロパティの高度な設定を使用します。

線のスタイル

線のスタイルを変更したければ「Border style」で選択します。スタイルに直接設定でもOKです。

以下が線のスタイルと見た目になります。

Solid実線 
   
Dotted点線 
   
Dashed破線 
   
Double二重線 
   
Grooveくぼみのある線 
   
Ridge隆起した線 
   
Inset囲まれたセルがくぼんだように表示される線。一部だけに指定しても立体感は出ません。 
   
Outset囲まれたセルが隆起したように表示される線。一部だけに指定しても立体感は出ません。 

   

罫線の色

罫線の色は最初に黒に設定しましたが、色のコードがわかれば同様に「スタイル」で直接変更するか、「枠線の色」の入力枠で設定・変更することができます。

見た目の直感で決めたい場合は、上記プロパティの「枠線の色」の横にある「☐」(図では■)をクリックし直感的に指定もできます。

また、罫線や枠線をなくしたい場合は表やセルのプロパティの「Border style」で「なし」を選択すれば消えます。

背景の色

背景の色も、コードがわかっていれば「スタイル」で直接指定できます。

例えばヘッダー以外のセルを白(#FFFFFF)の背景色にしたい場合は、ヘッダー以外のセルを全て選択し、「background-color:#FFFFFF;」をスタイルに追加するか、「背景色」の入力枠に直接#FFFFFFと入力します。

または上記プロパティの「背景色」の入力枠の横にある「☐」をクリックして直感的に指定もできます。

以下がヘッダー以外の背景色を白にした例になります。

     
     
     
     

画像をセルに貼り付ける

画像も簡単に貼り付けることができます。

画像がWordPressのライブラリにある場合、ライブラリの画像を選択します。

 

「リンクをコピー」の横のフィールドにあるURLを全部コピー(CTRL+C)し、貼り付けたいセルにペースト(CTRL+V)します。たったこれだけです。

 

真ん中のセルに入れてみました。

空港のようす混んでいます

いろいろな事が簡単にできますので、使ってみてください。

コメント

タイトルとURLをコピーしました