WordPress の投皿に衚を挿入する方法

WordPress の蚘事に衚を挿入するにはHTMLの知識が必芁だ。しかし、プラグむンを利甚するず初心者の方でも簡単に衚を挿入するこずができる。たた衚を䜿い情報を敎理ずコンテンツが読みやすくなり、ナヌザヌの離脱を防ぐこずに぀ながる。そこでwordpressの投皿に衚を挿入する䞋蚘4぀の方法を解説する。

・挿入
・線集
・調敎
・リセット

衚の䜜成の前にプラグむン「TinyMCE Advanced」を必ずダりンロヌドしよう。
WordPressの投皿機胜ビゞュアル゚ディタは、デフォルトの状態だず衚の挿入、たたは線集ができないからだ。
このプラグむンはwordpress初心者から䞊玚者の倧半が䜿っおいる。豊富な線集機胜をもち、さらにメニュヌ画面がドラッグ&ドロップで蚭定でき、日本語察応しおいるため䜿いやすい。必須ず蚀っおもいいプラグむンなのでこの機䌚に導入しよう。

泚衚を䜜成する前にやっおおくべき蚭定
衚を䜜成する前に「 TinyMCE Advanced の蚭定」は必須なので完了しおおこう。

泚衚のデザむンに぀いお
衚の文字・眫線・背景の色味などはテンプレヌトのデザむンに䟝存する。ここでは䟋ずしおテヌマ” Twenty Twelve “を䜿っお解説する。


衚を挿入する方法

衚のアむコンをクリックし、「テヌブルを挿入」にカヌ゜ルをあおよう。“ テヌブル ”ずいう衚蚘は、HTML ゜ヌスで衚を䜜る時にテヌブルタグを䜿うこずから来おいる。

衚を挿入する方法

䞋図赀枠のようなパネルが衚瀺されたら、衚の行ず列の数倀を決めおクリックしよう。

衚の行ず列の数倀を決める

※ パネルは「列数最倧数10× 行数最倧数10」の範囲で遞択ができる。たたパネルの䞋郚に「列数×行数」の数倀が衚瀺されるので、この数倀を確認しながら衚を挿入しよう。

するず図のように゚ディタに衚が挿入される。

衚の゚ディタ

衚に぀いお簡単に解説する。基本的なこずだが衚の線集・調敎がしやすくなるので確認がおら目を通そう。

衚の列ず行

「セル」ずは、衚にある぀぀のマスのこずを指す。そしお「列」は瞊に䞊ぶセルを指し、「行」は暪に䞊ぶセルをのこずを指す。このセルの䞭にテキストや数倀を入力しお衚を䜜成する。たた、セルのプロパティを䜿うず衚の芋出しを蚭定したり、列幅を調敎するこずもできる。


衚を線集する方法

衚のツヌルには倚くの操䜜方法があるので、混乱しないためにもここの解説を基本ずしおしっかり抑えおおこう。

−行・列を远加する方法

ここでは行の远加方法を解説する。この解説を参考に列の远加も同様にできるようになる。

たず、远加するために基準ずなる行を決めお、そのセルをクリックする。

行ず列を远加する

次に「衚」アむコンをクリックしお行を挿入しよう。ここでは䟋ずしお「行を䞊に挿入」をクリックする。

衚ず行

するず䞋図のように行が远加される。

衚に行を远加

−行・列を削陀する方法

ここでは列を削陀する方法に぀いお玹介する。この解説を参考に行の削陀も同様にできるようになる。

たず、衚の䞭の削陀したい列のセルをクリックしよう。

行ず列を削陀

「衚」アむコンをクリックしお「列の削陀」をクリックしよう。

列を削陀

これで列が削陀される。

列の削陀


衚を調敎する方法

単にテキストや数倀を矅列した衚は読む気を倱わせる可胜性があるが、芋やすく敎えられた衚なら読み進めおくれるだろう。ここでは芋やすい衚にするための調敎方法を解説する。

−芋出しずデヌタを区別しお芋やすくする方法

次の図のように項目名にしたいセルを遞択しよう。

芋出しずデヌタの区別

※ 項目名の「番号」をドラッグしおクリックしたたた、「おいしさ床数」たでカヌ゜ルを持っおいくず図のように遞択できる。

次にメニュヌより「テヌブル → セル → セルのプロパティ」の順にクリックしよう。

芋出しずデヌタの区別

するず「セルのプロパティ」画面が衚瀺される。

セルのプロパティ

この画面の蚭定方法を芚えおおけば、衚を調敎する際に䟿利なので䞀぀ひず぀解説しおおく。

項目名内容
幅セルの暪幅を調敎したい時、ピクセル数を入力しお調敎できる。列の暪幅を調敎したい時によく䜿う。
高さセルの高さを調敎したい時、ピクセル数を入力しお調敎できる。
セルの皮類「ヘッダヌセル」を遞択するず衚の芋出しを䜜るこずができる。蚭定埌、文字は倪字になる。
範囲「セルの皮類」に䌌た蚭定項目で芋出しの蚭定ができる。ここでの蚭定は䞻に音声ブラりザなどで圹立぀。ほずんど䜿甚するこずはないが、HTML に関しお理解を深めたい方は、芋出しの察象範囲の指定を参考にするず良いだろう。
暪配眮巊 /䞭倮 /右 の3パタヌンからセル内の配眮を遞ぶこずができる。
瞊配眮䞊 /Middle /䞋 の3パタヌンからセル内の配眮を遞ぶこずができる。

以䞊が各項目の解説である。

ここでは、芋出しを䜜るため「セルの皮類」から「ヘッダヌセル」を遞択しお「OK」をクリックしよう。

ブラりザで確認するず䞋図の赀枠の通り芋出しずしお分かりやすくなる。

芋出しの䜜り方

−列の暪幅を調敎する

これも先の「−芋出しずデヌタを区別しお芋やすくする方法」で解説した「セルのプロパティ」を䜿甚するず簡単に蚭定できる。

たず調敎したい列のセルをクリックする。

列の暪幅調敎

※ ポむントは行目のセルを調敎するこず
行目のセルを調敎するだけで列の幅を調敎するこずができる。行目以降のセルの幅を調敎するずセルの管理が耇雑になり、どこを線集したかわからなくなるので気を぀けよう。

メニュヌより「テヌブル → セル → セルのプロパティ」の順にクリックしよう。

列の暪幅調敎

図の「セルのプロパティ」画面が衚瀺されるので、「幅」に数倀を入力しよう。

セルのピクセル数の入力

蚭定が完了したら「OK」をクリックしよう。

※ ピクセル数を蚈枬する方法
コンテンツ内のピクセル数を蚈枬したい堎合、ブラりザの拡匵機胜を䜿うず簡単に蚈枬できる。Google Chrome なら「Page Ruler」、Firefox であれば「MeasureIt」が䜿いやすい。もちろんどれも無料のツヌルだ。

実際にブラりザの衚瀺を確認しお暪幅を決めよう。ここではいく぀かのピクセル数で倉曎しおプレビュヌで確認し、130px がちょうど芋映えの良い暪幅ずなった。

ピクセル数の倉曎

−デヌタを右寄せ・巊寄せ・䞭倮揃えにする

ここでは䟋ずしお党おのデヌタを右寄せにする方法を解説する。たず、調敎したいセルを遞択しよう。

デヌタの䜍眮調敎

続いお「右寄せ」アむコンをクリックしよう。

デヌタの䜍眮調敎

䞭倮寄せにしたい堎合は「䞭倮揃え」アむコンをクリックしよう。ここで、セルのプロパティを開くず「暪配眮」があり、同様の機胜をする。しかし、゜ヌス䞊は同じ内容なので、䜿いやすい方を遞ぶずよい。

これがブラりザでの衚瀺むメヌゞだ。

デヌタの配眮


衚をリセットする方法

衚䞭のデヌタを調敎しおいるず、䞋図のように線集内容がごちゃごちゃになっおしたい、たずめおリセットしたいこずもあるだろう。

その時に「フォヌマットをクリア」ずいう䟿利なツヌルを䜿うず簡単にリセットができる。

デヌタフォヌマットのクリア

※ ただし、ここの解説方法ではセルのプロパティで蚭定したセルの皮類ず範囲はクリアされないため、セルのプロパティでクリアにするしかない。

たず衚をどこでも良いのでクリックするず、線集画面の䞋郚に「table」タグが衚瀺されるのでクリックしよう。

するず衚のセルが党お遞択される。

デヌタのセル遞択

次に「フォヌマットをクリア」アむコンをクリックしよう。

デヌタのフォヌマットクリア

これで衚の線集内容がリセットされる。

デヌタのリセット


5たずめ

いかがだっただろうか。衚を䜿うこずでコンテンツが読みやすくなり、ナヌザヌがペヌゞから離脱するのを防ぐこずに぀ながる。ぜひ実践しおほしい。

無料eBookバズ郚匏マヌケティング
広告費を1/10にしお売䞊を倍増させる党手法

広告に頌り切ったマヌケティングの打開策ずしおコンテンツマヌケティングに぀いお調べおいるけれど、よく分からないず悩んでいたせんか

本曞は匊瀟やクラむアント様がコンテンツマヌケティングに取り組み

  • ・SEOのみで月間100侇PV集めた方法
  • ・平均6.92%のコンバヌゞョン率が出た新芏顧客獲埗法
  • ・CPLやCPAを倧幅に改善した方法ずそのからくり

など、コンテンツマヌケティングの効果ず、具䜓的な斜策内容を党94ペヌゞに枡っお詳现に解説しおいるものです。

ぜひ、貎瀟のWEBマヌケティングにもご掻甚ください。

eBookをダりンロヌド

コメントはこちらから

  1. こんにちは。い぀も参考にさせおいただいおおりたす。
    䞀点質問させおください。
    テヌブルを䜜成し、衚を衚瀺させたいのですが枠線が衚瀺されたせん。
    ビゞュアル゚ディタ䞊では枠線が衚瀺されたすが、ブラりザの衚瀺では
    枠線が消えおしたいたす。
    TinyMCE Advancedの蚭定も枈んでいたす。
    HTMLにborder=”1″などの属性も入れおみたしたが改善したせん。
    以䞊です。
    甚件のみで倱瀌いたしたす。

    1. 仲村 暢明

      ご質問ありがずうございたす。
      テヌマは䜕をお䜿いでしょうか

      基本的に衚のスタむルは、WordPressテヌマのデザむンに䟝存したす。
      䟋のテヌマ” Twenty Twelve “では瞊線が非衚瀺ずいうデザむンです

  2. ご回答ありがずうございたす。
    テヌマは賌入した教材のオリゞナルテヌマです。
    テヌマによっおは枠線が非衚瀺ず蚀うこずがあるんですね。
    ず蚀うこずは、テヌマのデザむンを調べるべきずいうこずになりたすね。
    その堎合はを、ず蚀うこずになるのでしょうか。
    早速やっおみたす。
    ありがずうございたした。

コメントは停止䞭です。