THE THOR【ザ・トール】表(テーブル)の線を消す♪画像を並べる方法

  
表(テーブル)に画像と文字を合わせて表示させ、しかも画像を並べたい時におすすめ 表(テーブル)をつかって表示させない場合、画像と下の文字がずれてしまう事が(;^_^A この方法で画像を並べ、画像にリンクを張り付け飛ばすこともできます♪

白とグレーの背景の行が並んでいる表(テーブル)を見た時、正直使いたくないなと思いました。 可愛くないから(笑) 見やすいというのはわかるのですが、残念ながら私好みではありませんでした。 という訳で、この記事では、表(テーブル)の基本の設定の説明と自分好みにカスタマイズをしていく方法を紹介しています♪ 初めにTHE THOR【ザ・トール】で使う基本の表(テーブル)の設定の説明、後半では枠線の消し方&表の色の変更方法。 そして、最後に画像を横に並べて表示させる方法を紹介します。

 
そら
私は箇条書きにしたい文章など、 表(テーブル)に記入してます( ´∀` )
スタイルのボックスは使わなくなったなあ・・
表(テーブル)だと自分の好きな枠線の色で、 好きな色の背景色で作成できるので(;^_^A

 

目次

THE THOR【ザ・トール】基本となる表のスタイルをカスタマイズ

THE THOR【ザ・トール】カスタマイズをクリック

画面左の刷毛マーク「外観」 → 「カスタマイズ」をクリックしてください。

THE THOR【ザ・トール】「パーツスタイル設定」をクリック

下にスクロールして「パーツスタイル設定」をクリックした後 「テーブル設定(個別用)」をクリックしてください。

テーブル設定(個別ページ用)の設定ページが表示されます。 ここで設定していきます。

表(テーブル)のHTMLの話

ここでちょっとHTMLの話をさせてください(;^_^A

まず、表というのは、四角いエリアを外枠と縦と横の線で分けたものです。 <TH>というのは、表の見出しやタイトルとなる部分のことです。 (今回は<TH>の話を記述しません) <TD> というのは分けられたエリアの事で、 セルといわれます。

THE THOR【ザ・トール】表(テーブル)のデザインを選択

ここでは、基本(実線)と点線のどちらかを選択できます。

THE THOR【ザ・トール】表(テーブル)の文字色 & 線色

 
そら
ここで、表の中の文字色と表の外枠の色を選択します。

 

THE THOR【ザ・トール】表(テーブル)のTH背景色を指定 & TH文字色を指定

この部分は無視で(;^_^A

THE THOR【ザ・トール】表(テーブル)のTD背景色を指定 & TD背景色(偶数列)を指定

この2つは違う色を指定した場合、色が交互に表示されます。

 
そら
私は、この交互に違う色で表示が 好きではないので同じ色を指定しています。

THE THOR【ザ・トール】公開をクリック

色の選択が終わりましたら、画面上の「公開」をクリックしてください。

THE THOR【ザ・トール】表の枠線を消す

THE THOR【ザ・トール】表をエディタに追加する

まず、枠線を消す前に、表を表示させます。

表のマークを探して、横の▼をクリックしてください。 下の画像の様にプルダウンが開きます。 1行目の「テーブル」の上にマウスを置き横にスライドさせてください。 ここで、表の行数&列数をマウスをスライドさせ、希望の行数&列数になればクリックしてください。 ビジュアルエディタに表が、張り付けられます。

ここから加工していきます♪

表(テーブル)をクリック

変更したい表のどこでもいいのでクリックしてください。 表の四つの角に□が表示されます。

表(テーブル)のアイコンをクリック

四つ角の□を確認したら、画面上の方にある、 表のアイコンの横の▼を又クリックしてください。

表(テーブル)のプロバティをクリック

表(テーブル)「高度な設定」をクリック

表のプロバティが表示されましたら、「高度な設定」をクリックし、 「Border style」の ピンクの丸で囲ってある場所の▼をクリックしてください。 下にプルダウンが表示されます。 その中の「なし」を選択してください。

選択が終わりましたら、「OK」をクリックしてください。 このままでは、まだ枠線が残っています。 表の上の線と、左側の線がちょと変わったかな?という感じだと思います。

表(テーブル)セルのプロバティをクリック

セルの上までマウスを持っていき横にスライドさせ、クリックしてください。

表(テーブル)「高度な設定」をクリック

「一般」の横の「高度な設定」をクリックしてください。

 

 

表(テーブル)「Border style」 をクリック

「Border style」の ピンクの丸で囲ってある場所の▼をクリックしてください。 下にプルダウンが表示されます。 その中の「なし」を選択してください。

選択が終わりましtら、下の「OK」をクリックしてください。

↓↓↓ この様にクリックした場所の線がきえます。

 

(私は①の部分をクリックして作業をしたので①が消えています) これを分けられた場所だけ( ①~④ )を繰り返します。

THE THOR【ザ・トール】表の背景色を変更

次に背景色も消しちゃいます。 これも、「表のプロバティ」と①~④全部の場所の「セルのプロバティ」の枠線を変更します。

表(テーブル)のプロバティをカスタマイズ

表のプロバティをクリック ↓ 表のプロバティの「高度な設定を」をクリック ↓ 背景色の場所に 「 #fff 」この4文字をコピペして下さい。 ↓ 「OK」をクリックしてください。

* #fff というのは白の短縮のコードです。

表(テーブル)セルのプロバティをカスタマイズ

セルのプロバティをクリック ↓ セルのプロバティの「高度な設定を」をクリック ↓ 背景色の場所に 「 #fff 」この4文字をコピペして下さい。 ↓ 「OK」をクリックしてください

THE THOR【ザ・トール】表(テーブル)記事の上の画像がどうなっているか説明

THE THOR【ザ・トール】元になる表(テーブル)を作成

     
     

四角のスペースを横に5個、2行からなる表を作成しました。

THE THOR【ザ・トール】元になる表(テーブル)の幅を変更

表(テーブル)のプロパティで 幅を 70%に変更します。

セルのプロパティで、この10個のカスタマイズをします。 ①・⑥ ③・⑧ ⑤・⑩の 幅を 30% に変更 ②・⑦ ④・⑨ の 幅を 5% に変更します

THE THOR【ザ・トール】元になる表(テーブル)に画僧+記事を記入します。

枠線が見える間に、画像と記事を入れてしまいます。

THE THOR【ザ・トール】元になる表(テーブル)の外枠を消す

この表(テーブル)のプロパティから「Border style」なし を選択します。

見た目はまだそんなにかわりません( ̄▽ ̄;)

THE THOR【ザ・トール】元になる表(テーブル)の内側の線を消す

外枠は消しましたので、見えている枠線は、セルの枠線です。 いらない枠線を消していきます。 上の段 ①・②・③・④・⑤ 下の段 ⑦・⑨ のセルの枠線を消していきます。 上ので説明した作業をしていきます。 セルのプロバティで「Border style」なし を選択してください。

わかりやすくする為にわざと、背景色は白に変更していません( ̄▽ ̄;) このままだと、枠線が 左+上 右+下 で色が違います。 残った ⑥・⑧・⑩ のセルの枠線の色を変更します。

⑥・⑧・⑩ のセルのプロバティで「Border style」Solid を選択してください。

THE THOR【ザ・トール】元になる表(テーブル)の背景を消す

後は、セルの背景色を「#fff」に指定して、4-1 元になる表(テーブル)完成です(^^♪

Solid … 実線 Dotted … 点線

「Border style」のプルダウンに表示される文字の意味は下の記事でも紹介しています♪

【wordpress】文章を囲み枠で可愛く装飾♪コピペOK

他の指定もしてみたいと思う方は↑↑↑を参考にしてください(^^)/

THE THOR【ザ・トール】表(テーブル)の線を消す♪画像を並べる方法 まとめ

文章を枠で囲む記事も書きましたが、表を使った方が楽という事に気が付きました(;^_^A 実は、表の枠線の太さの変更や、セルの中の文字の表示スタート位置を変更できるはずなんですが、 今の所、プロパティで指定しても、「テキスト」でHTMLを変更しても無視されちゃいます( ̄▽ ̄;) THE THOR【ザ・トール】さん何故ですか・・・・ CSS追加するしかないのかなぁ

記事を書くのにキーワードを考えるのに時間がかかっている人は ここをクリック♪

私が使っているソフトです(笑) 安くて便利なので、おすすめなのですが、 これも使い方の説明している記事をあまり見かけません(-_-;) ちょこっと説明はあるんですけどね。 機能が沢山あるのに、詳しく説明してくれているサイト見かけないので これから、このソフトの使い方の記事を書く予定です。

 

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪

人気ブログランキング

 

私が個人でAmazonアソシエイトに応募して落ちましたが、 「もしもアフェリエイト」を通して申請したら合格しました。 もしもから申請をお勧めします♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。 ここもおすすめ♪

/TOP/