高機能エディタで一覧表を作成する方法(2)

ブログが作りたい!FC2ブログの作り方 > 高機能エディタで一覧表を作成する方法(2)

高機能エディタで一覧表を作成する方法(2)

高機能テキストエディタで一覧表を作成する方法(2)

FC2ブログの記事内で一覧表を使ってみよう!

前回の記事『高機能テキストエディタで一覧表を作成する方法(1)』の続きです。

今回は、一覧表(table)を作成するときに知っておくと役立ちそうなことを、さらに補足して書いていきます。


見ながら一覧表の幅や高さを自由に変更する方法

「テーブル プロパティ」画面で、テーブルの幅や高さを指定できるわけですが、ちょっと使い難い感じはしますよね。

そもそも、どのくらいの数値を入れたら良いかなんて、誰しも分かるものでもありません。そんなときに役立つのが、この方法です。

※:ブラウザ(IEなど)によっては、この方法は実行できないかもしれません。(Firefoxであれば、できます)

1:一覧表の大きさを変更する方法

(01)

FC2ブログの高機能テキストエディタで一覧表を見てみると、次のように四隅と中点に、「小さい白い四角」が表示されているのが分かるはずです。

この「小さい白い四角」を使えば、一覧表の幅や高さを、見ながら自由に変更できます。

一覧表の「小さい白い四角」

「小さい白い四角」が表示されない場合は、一覧表のどこかをクリックしてみてください。(どこでも良いです)

(02)

それでは、試してみましょう。

「小さい白い四角」に、マウス(のポインタ)を近づけていくと、矢印の形状が変わるはずです。(黒い両側矢印)

矢印の形状が変わる

(03)

矢印の形状が変わったところで、すかさずドラッグ(&ドロップ)してみてください。

白い四角が黒い四角になったら、その黒い四角をつかんで、一覧表を広げるようなイメージです。

白い四角が黒い四角になったらドラッグする

(04)

一覧表の大きさが、変更できているはずです。

一覧表の大きさが変更できている

2:一覧表の幅を変更する方法

また、一覧表の幅だけを変更したい場合は、横にある中点(小さい白い四角)を使ってみてください。

一覧表の幅だけを変更する方法

3:一覧表の高さを変更する方法

一覧表の高さだけを変更したい場合は、上辺下辺にある中点(小さい白い四角)を使ってみてください。

一覧表の高さだけを変更する方法

一覧表の幅の設定の仕方(おすすめ)

自由に一覧表の大きさを変更できるのは、便利といえば便利ですが、いちいち「こんなもんかしら?」と考えながら変更するのは面倒といえば面倒でもあります。

そのような場合は、「テーブル プロパティ」で次のように指定しておくと簡便です。(他の指定値はお好きなように)

  • テーブル幅を「90」
  • テーブル幅の単位を「パーセント」
  • キャプションの整列を「中央」
テーブル幅を「90」、テーブル幅の単位を「パーセント」、キャプションの整列を「中央」

こうすると、記事の幅(100%)に対して、一覧表の幅を「90%」で表示してくれます。

記事の幅(100%)に対して、一覧表の幅を「90%」

もちろん、テーブル幅は「90」ではなく、「80」でも「50」でも OKです。表内の状態(列数など)にあわせて、設定すればおさまりよくできます。

「キャプションの整列」などの説明は、記事『高機能テキストエディタで一覧表を作成する方法(1)』で書いています。


一覧表を作成した後で行や列を追加する方法

1:一覧表に行を追加する方法

(01)

例えば、次の一覧表の「ちはやふる」と、「バクマン。」の間に行(ぎょう)を追加したいとします。

その場合は、「ちはやふる」の行で、右クリックしましょう。

行(ぎょう)で右クリック

(02)

一覧表に関する操作メニューが表示されます。

「行挿入」を、選択(クリック)してください。

メニューの「行挿入」を選択する

(03)

次のように、一覧表に行が挿入できているはずです。

行が挿入できる

2:一覧表に列を追加する方法

(01)

列を挿入する場合も手順は同様です。例えば、次の一覧表の「作者」のあとに列(れつ)を追加したいとします。

その場合は、「作者」の列で、右クリックしましょう。

列(れつ)で右クリック

(02)

一覧表に関する操作メニューが表示されます。

「列挿入」を、選択(クリック)してください。

メニューの「列挿入」を選択する

(03)

次のように、一覧表に列が挿入できているはずです。

列が挿入できる

ちょっと列が狭いかもしれませんが、セルをクリックすれば入力できます。前述の方法で一覧表の幅を変更してあげれば、おさまりよくなります。

3:行や列を操作するボタン

また、セルを選択したときに、次のようなボタンが表示されていると思います。これを使うことでも、行や列の追加、行や列の削除ができます。

行や列を操作するボタン

ただ、このボタンを使うと、行や列の追加を行った場合に、セルに対して余計なコード(「style="vertical-align: top;"」)が入ってしまう場合があります。

どうやら、現状(2010/07/09)では、使わない方が良いかもしれません。

使用した場合、セル内での縦方向の位置が、既存のセルとずれて表示される可能性があります。

ブラウザ(IEなど)によっては、このボタンは表示されないかもしれません。(Firefoxであれば、表示されます)


一覧表を削除する方法

(01)

一覧表を削除する場合は、まず一覧表の適当なところで右クリックしましょう。

一覧表の適当なところで右クリック

(02)

一覧表に関する操作メニューが表示されます。

「テーブル削除」を、選択(クリック)してください。削除できます。

メニューの「テーブル削除」を選択(クリック)

セル内の文字列を行揃えする方法

(01)

例えば、次のような数値データなどは、セル内で文字列を右揃えにするのが一般的です。

右揃えにしてみましょう。

数値データ

(02)

右揃えしたい列の一番上の枠(セル)から、一番下の枠(セル)までドラッグして範囲を選択してみてください。(マウスをすべらす感じです)

範囲を選択

ブラウザ(IEなど)によっては、範囲を選択できないかもしれません。(Firefoxであれば、できます)

(03)

「右揃え」にしたいので、「右揃え」をクリックします。

「右揃え」をクリック

ちなみに、左から、[左揃え]ボタン、[中央揃え]ボタン、[右揃え]ボタン、[両端揃え]ボタンの順で並んでいます。

[左揃え]ボタン、[中央揃え]ボタン、[右揃え]ボタン、[両端揃え]ボタン

(04)

次のように、「右揃え」になっているはずです。

「右揃え」になる
前の記事へ
次の記事へ

次回予告

次回は、FC2ブログの記事内で文字サイズを大きくする方法について書く予定です。


関連記事

FC2ブログの作り方をご紹介している記事です。

作成日:2010/01/09 更新日:2010/01/09

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

火狐ちゃん おりこ~♪

毎度でーす^0^
ファイヤーフォックスだと出来ますね!IEだと選択できませんが^^;
前回のほうの質問になるとは思いますが、表のセル(列なども)を塗りつぶそうとしても、文字のとこだけ白抜きになってしまうんですが・・・これも以前教えていただいたように、テンプレートの仕様でしょうか?^^;
やり方おかしいのかなー(T▽T)よろしければ教えてくださいませ^^

不要な文字の背景色

ありんこさん、こんにちは!(・∀・)/へろー
コメントありがとうございます。

【対応方法】:

高機能テキストエディタにて、
文字列を打ち直せば解決します。

 1:カーソルをあわせる。
 2:[DEL]キーなどで、一度削除。
 3:文字列を打ち直す。


【発生した理由】:

「***~***」で区切り線を入れるときに、
オレンジっぽい背景色をつけています。

その後、背景色を戻すために、

「ざっくり 個人評価を一覧表にすると~」のところで、
白色を背景色に設定しています。

その白色が、一覧表内の「項目」を入力したときにも、
残ってしまっていたようです。


【今後のこと】:

背景色は、文章を打ち終わってからつけた方が、
良いのかもしれませぬ。

なるほど!

改行しても仕様が残っちゃってたんですね!打ちながらでなく、打ち終わってから・・・了解です!ありがとうございましたあ^0^

残っちゃう

ありんこさん、こんにちは!(・∀・)/ぐもに
コメントありがとうございます。

コードを見ると、
残っちゃっている感じでした。

何だか融通が利かないような気もしますが、
すべて打ち終わってからの方が良さそうです。

もう少し使い勝手が良いといいんですけどねー。(´Д`;)

No title

いつもお世話になります。blogの練習中です。表を横に2枚並べて表示できますか?もしくは表の右隣に説明文とか、文字を入力できますか?よろしくくお願いいたします。 以上

表の横並びについて

komonjiさん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

残念ながら、高機能テキストエディタの状態では、
表の横並びなどはできないようです。

以上。

回答へのお礼

早速ご回答有難うございます。出来ないことが分りましたので、それなりの使い方をします。有難うございます。自分のブログを立ち上げるにはまだまだ判らないことばかりです。ご助力、ヨロシクお願い申し上げます。敬具

表の横並び

komonjiさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

こちらこそ、よろしくお願い申し上げます。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/622-11dc3e4e
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて