サイトマップ(すべてのページ)










FC2ブログで画像やバナーを横並びさせる方法(いろいろなテーブルが出来る)

この方法はほぼすべて形のテーブルを作れます。FC2ブログ用ですが、FC2ブログでなくても、FC2ブログで作ってソースをコピーアンドペーストすれば作れます。
(手順の詳細は当ページの下半分)

まず、言葉の整理です。すぐ下の例で言うと、あいうえおで構成された長方形群をテーブルといいます。「あ」だけを囲んでいる長方形をセルと言います。「い」だけを囲んでいる長方形もセルと言います。もちろん「う」「え」「お」もセルと言います。まとめをいうと、セルの集合体がテーブル、ということになる。

さて前置きはこれぐらいにして、例をいくつか列挙しましょう。







境界線を消すことも出来ます。


では、その手順を書きます。

★一般的な手順
自分のFC2ブログにログインする

左メニューの「新しく記事を書く」をクリック→とりあえず、いつものように普通にブログ記事を書く。
(((すでに、できあがっているブログページに追加編集をする場合なら→左メニューの「過去の記事の管理」→該当ページの「編集」)))

ずーっと上の方にある「簡易モード」がonになっているならば、そこを押してOFFにする

編集画面の上部に操作アイコンがいっぱいあるのだが、そのなかの「設定」というアイコンのとなりに「w」という形のアイコンがあるのを探す。そのwというアイコンはその時点では薄くなっていることを確認する。(((できればこの時点で、バックアップをとっておく。そのために→そのwを押す。すると、wが濃くなり、同時にhtmlソースが表示される。そのhtmlソースのところで右クリック→すべて選択→もう1度右クリック→コピー→メモ帳などに貼りつけてバックアップをとっておく。)))
追記(2012-01-25):
Wと同様に便利なアイコンがあります。「ソース」というアイコンです。Wの次の次に配置されているアイコンです。でも、使用上、注意が必要ですので、このページの下のほうにある説明を見てください。
 ↓
確認のために申しますが、wのアイコンが薄くなっているならば、その下の編集画面はhtmlソースでなく、ほとんど通常のブログページの画面に近い表示になっているはず。しかも、かなり多くの操作アイコンでできた操作画面になっているはず。

その操作画面の中で、横並びさせたい画像やバナーを置きたい場所をクリックする。すると点滅するカーソルがそこに来ているはず。

操作アイコン群の一番下の段のマス目の形をしたアイコン(カレンダーの形に似ているとも言えるアイコン)にマウスポインターを持って行くとテーブル挿入/編集という説明が浮き出る。出たならそれが目的のアイコンなのでそのアイコンをクリック

すると、どういう形のテーブルにするかを決めるダイアログになる。そこで、
例として、
行を1にし、
テーブル幅の値を消し
ボーダーサイズの値を0にし、
OKを押す

すると薄くて小さいテーブル(下記のとおり)が出来る。(編集画面では半透明で表示され、WEB閲覧時は完全な透明になる。また、各セルに何も入れてないので、セルはもっと小さくなる)
   

そのテーブルには2つ四角があるのだが、片方に①を入力し、もう片方に②を入力する(下記のとおり)。(①とか②は単なる目印なので「あ」でも「い」でもいいし、★1でも★2でもよい。私個人としては●1●とか●2●とかをよく使う。なぜなら、目立つので簡単に見つかるから)

今度は先程のwをもう一度押す。押すときは薄いwになっていて、押したあとは濃いwになる。同時に、最初の操作画面になり、テーブルだったものがソースで表示される。そのソース(テーブルだったソース)は以下のとおりである。

<table border="0" cellpadding="1" cellspacing="1"><tbody><tr><td>①</td><td>②</td></tr></tbody></table>

で、ここからが重要なんです。よーく、聞いてください。
このソースに①と②があるのが確認できますね。その①を画像のソースやバナーのソースと取り替えるのです。②についても同様。

そしたら、再びwという形の先程の操作アイコンを押す。

すると、下の方にプレビューみたいのが見れる。でも、これは不完全なプレビューなので、プレビューボタンを押してみよう。

これで、よかったら、記事を保存というボタンを押して、出来上がり。



★こんどは、もっと複雑なテーブルを作って見よう

前述で
「すると薄くて小さいテーブル(下記のとおり)が出来る。(編集画面では半透明で表示され、WEB閲覧時は完全な透明になる。また、各セルに何も入れてないので、セルはもっと小さくなる)」
という説明があったが、あの段階でそのテーブルの四角の中で右クリックしてみよう

すると、右クリックのメニューが出るのだが、そのメニューの中の「セル」をポイントする

すると、たとえば
「セルの前に挿入する」とか
「右に結合」とか
「下に結合」とか
「セルを水平方向に分割」とか
いろいろな変更のメニューが出てくる。

もう、ここまで説明すれば、あとは色々試行錯誤すれば、いろいろな形のテーブルが出来る。左向きの曲がった形の矢印のアイコンを押せば一つ前に戻れるので、気軽に色々試せる。2回押せば2回前にも戻れる。

というわけで、かなり自由度の高いテーブルの作成ができる。


★行の増やし方。すでにできあがっているテーブルに追加・変形するのでも良い(特別授業パート1):

例えば
   
   

   
   
   
に変形する方法です。

そのやり方は:
このテーブルの場合、
   
   

左下のセルで右クリック→セル→セルを垂直方向に分割→すると、
   
   
 
というテーブルに変形される→今度は右下のセルで右クリック→→セル→セルを垂直方向に分割→すると、
   
   
   
と言うテーブルに変形される。これで出来上がりです。

★列の増やし方(特別授業パート2):

例えば
   
   

     
     
に変形する方法です。まあ、これは、パート1の応用なので、たぶん、説明は不要だと思いますが、とりあえず、書きます。

そのやり方は:
このテーブルの場合、
   
   
右上のセルで右クリック→セル→セルを水平方向に分割→すると、
     
   
というテーブルに変形される→今度は右下のセルで右クリック→→セル→セルを水平方向に分割→すると、
     
     
というテーブルに変形される。これで出来上がりです。



「ソース」というアイコンの機能や使い方
・編集モードでWを押すと、操作アイコンがいっぱい出てくる。その2段目の一番左にソースというアイコン(以後ソースアイコンと呼ぶ)がある。
・そのソースアイコンを押すとソースが見れる。
・ソースアイコンを押して、ソース画面上で編集したら、必ず、もう一度ソースアイコンを押す。さもないと、記事を保存のボタンを押しても、編集が反映されない。
時系列で言うと、以下の3通りの基本パターンが可能である。
①・・・「ソース」アイコンを押す → 編集する → 「ソース」アイコンを押す → 「記事を保存」ボタンを押す → アップロード完了。 
②・・・「ソース」アイコンを押す → 編集する → 「ソース」アイコンを押す → すると、薄いWのモードになるのだが、編集が反映されているのが確認できる → 「記事を保存」ボタンを押す → アップロード完了。 
③・・・「ソース」アイコンを押す → 編集する → 「ソース」アイコンを押す → すると、薄いWのモードになるのだが、編集が反映されているのが確認できる → Wを押して濃いWのモードにしても、反映されているのが確認できる → 「記事を保存」ボタンを押す → アップロード完了。 

解りやすい表でまとめると以下のとおり:
「ソース」アイコンを押す → 編集する → 「ソース」アイコンを押す →→ (操作しない) →→「記事を保存」ボタンを押す → アップロード完了。 
→ すると、薄いWのモードになるのだが、編集が反映されているのが確認できる →
→ すると、薄いWのモードになるのだが、編集が反映されているのが確認できる → Wを押して濃いWのモードにしても、反映されているのが確認できる →
・ソース画面で編集する場合は、慣れないうちは、ソースをメモ帳にコピー・アンド・ペーストしてバックアップを取っておいたほうが無難。

追記(2012-09-30):
ソース画面では以下のような枝分かれで使う記号は崩れてしまう傾向にある(2012年初めのころに確認した。今は改善されたのかどうかは未確認)。
どういう事かというと、以下の凡例のとおりです。
「ソース」アイコン→下の図のSのような表記を作って→再び、ソースアイコンを押し→「記事を保存」ボタンを押してアップロードをしたあと→再び編集をしようとする。そのために→再び「ソース」アイコンを押す→すると、Tのように崩れることがある。
対策:
まあ、崩れたら、直せばいんだけど、Sのような表記がいっぱいあるブログページだと面倒。なので、Sのような表記があるブログページでは「ソース」アイコンの利用はしないか、したとしても、こうなることを覚悟したほうが良い(「覚悟」という単語を使うほど深刻な問題じゃあないけどね)。
S
T
┣はひふへほ
 ┗まみむめも
  ┗やゆよ
   ┣あかさたな
   ┗はまやらわ
┣はひふへほ
 ┗まみむめも
  ┗やゆ
 ┣あかさたな
 ┗はまやらわ


追記(2012-11-03):
すでに作ったテーブルを変更する方法は以下のとおりです。

例:

上記のテーブル全体の横幅は200ピクセルになっているのだが、300ピクセルにしたい場合は、

テーブル内の任意の場所で右クリック→テーブルプロパティ

「テーブル幅 200 ピクセル」って書いてあるのを、「テーブル幅 300 ピクセル」に書き換える

OKボタン。

もう、お分かりと思うが、テーブルプロパティで、ボーダーサイズを変えたり、キャプションの挿入をしたり、いろいろできる。




スポンサーサイト
[ 2011/05/01 22:36 ] 未分類 | TB(0) | CM(0)

コメントの投稿













管理者にだけ表示を許可する

トラックバック:

この記事のトラックバック URL
http://dejitaruanarogu.blog.fc2.com/tb.php/15-ffc11112




 スポンサード リンク


















ページを開くだけで使える:
カウントダウンタイマー
(例:7分後にアラーム) (直リンク) 「リリリリ-ン」が5秒間
カウントダウンタイマー
(例:PM2:58にアラーム) (直リンク) 自由指定の動画と音声で知らせる
時間計算機 (直リンク
電卓 (直リンク
●ストップウォッチ(直リンク












光ファイバーの広告
寝ている猫を小鳥が突っついて起こす動画。





っっt