携帯アクセス解析
身の回りに起こるへんてこなこと。
私自身のへんてこなこと。
【 Information 】

・当ブログはリンクフリーです。相互リンクご希望の方は下方にある、メッセージフォームをご利用下さい。
・リンク用バナーが必要な方は↓を「名前をつけて保存」でご使用下さい。

Blogへんてこバナー

・このWeblogはOS・WindowsXP、ブラウザ・IE7とSleipnir、CRTモニター19インチ/解像度1024×768pxeで確認しています。液晶モニターの方には見え難いかもしれませんがお許し下さい。


BLOGへんてこをRSSリーダーに登録
BLOGへんてこをRSSリーダーに登録
---------------------------------- ----------------------------------

簡単!フォトショ講座


BLOGへんてこの過去記事
2007.4.20までの過去の日記です


once more again
JUGEMテンプレ改造のお手伝い

----------------------------------
【 Message 】
なまえ
メール
メッセージ
メールフォーム レンタルサーバー
----------------------------------
BlogPet




PROFILE

OTHERS
無料ブログ作成サービス JUGEM





カウンター

<< 今年の収穫・サツマイモ編 | main | 全部パァー >>

スポンサーサイト


一定期間更新がないため広告を表示しています

スポンサードリンク * - * * - * - Yahoo!ブックマークに登録 ▲page-top

xfyで表組みを作成するvol.2


それでは実際に↓の表を作成する手順をご紹介します。

熊本県 大矢野 野釜島の夕焼け

熊本県 大矢野
野釜島
2006.5.15撮影

とても長くなるので、本文は続きを読む以下に入れますので、興味のある方はクリックしてご覧下さい。

表の挿入ボタンの数字を入力します今回作るのは1行と2列。つまり、横に写真と文字を並べるので、行を1、列を2とします。表の幅はココのテンプレートで設定されている490pxe以下とする為に450と入力します。

表挿入のダイアログを閉じるとWYSIWYG編集モードはこのようになっています。
表を挿入したところ
この状態で画像の為の余白や、背景色を設定します。
右クリックでメニューを出したところですまずは右側のセルの上で右クリックして、メニューを出しましょう。
メニューの中程にある「セルの設定」をクリックします。




このダイアログでは↓のように設定しました。
右側のセルを設定する為のダイアログ
セルの幅と高さは写真のサイズをのまま入力して下さい。
そして、セル内に余白を取る為に余白の設定にチェックを入れ、幅と高さをそれぞれ5.0pxeとします。

各数字の入力が終わったら、OKボタンでダイアログを閉じます。
次に右側のセルの上で右クリックして、右側のセルと同じくセルの設定ダイアログを開き、セルの横幅を200と入力し、文字位置をアンダーにする為に上下の配置を下詰めにします。
これは最初に設定した表の幅からの引き算になります。
つまり、横幅が450pxeある内の250pxeを写真のスペースとして確保し、残った200pxe内に文字を入力する訳です。
文字が思わぬところで折り返してしまった場合は、セルの横幅が間違っていることになります。必ず表の横幅と各セルの合計が同じになるようにします。

さて、次は画像を入れてみましょう。
画像挿入ダイアログ画像挿入ダイアログ
表の挿入ボタンの横にある「画像挿入」ボタンを押し、ダイアログを表示させます。手順は以下の通りです。

1.参照ボタンで画像を保存してあるフォルダーを開き、画像を選んで「開く」ボタンをクリックします。
2.代用文字列には画像の説明文を入力します。
3.【配置】は水平での位置設定になります。右寄せ、左寄せの必要が無い場合は【文字】にチェックを入れます。
4.【垂直】位置は▼を押すと、8種類の位置がメニューの中に用意されています。今回は【標準】を選びます。
5.画像の幅と高さを夫々入力します。
6.OKボタンでダイアログを閉じます。

5の幅と高さは下図のようにすると、正確な数字を得られます。
写真の情報の得られ方

背景色を設定する為にメニューを開きます画像の挿入が出来たら、次は表に色を付ける作業です。
表の色付けには幾つか種類がありますが、今回はセルに背景色を設定します。

まず画像の四隅の何も無い箇所で右クリックして、メニューを開きます。

メニューの中程にある【背景】を選んで下さい。

↓の背景色設定の為のダイアログが開きますので、【設定対象】をセルにして好みの色を選び、OKボタンを押してダイアログを閉じます。


背景色設定の為のダイアログ
左右のセルの背景色の設定を夫々済ませたら、枠線を非表示にする設定を行います。表全体をクリックして選択したら、右クリックしてメニューを出し【枠線】を選びます。
枠線を非表示にする為にメニューを出します
↓のダイアログが開いたら【設定対象】を表にし、【一括設定】にチェックを入れます。
枠線の設定ダイアログ
【上下左右】にチェックを入れたら【幅】を0.0と入力してOKボタンで閉じます。xfy Blog Editorでは↓のようになっているはずです。
xfy Blog Editorでの出来上がり図
いかがですか?出来ていますか?
出来ていたらいよいよブログに表を貼り付ける作業に移りましょう。

ご自分のブログの管理者ページにログインし、新規の記事作成画面を出しておいて下さい。再度xfy Blog Editorに戻り、【ソース】を開きます。
xfy Blog Editorのソース画面
ソースにある文章をドラッグして選択したら、右クリックでコピーします。ブログの管理者画面に戻って、貼り付けを行って下さい。
新規記事の入力画面
JUGEMの場合でしたら【下書きとして更新する】→【»プレビュー(記事を確認) 】で、今貼り付けたソースの出来具合を確認します。
まだ画像が×になっています
画像が×なのはサーバーにアップロードしていない為です。
同じ写真をブログサーバーにアップして下さい。

画像のアップが完了したら、そのアドレスをコピーしsrc=””の箇所を探し出し、”と”の間に貼り付けします。

※src=””は、alt=””の前後にあります。

再度下書きとして更新してプレビューしてみて下さい。

熊本県 大矢野 野釜島の夕焼け

熊本県 大矢野
野釜島
2006.5.15撮影

↑のように表示されれば、出来上がりです。

文章で見ると「面倒臭い」と思われるかもしれませんが、これをタグの生打ちでしようと思ったら、もっと大変な思いをします。
xfy Blog Editorを活用することで、更にレイアウトの幅が広がりますのでお試し下さいね。
管理人 * xfy Blog Editor * 02:56 * comments(0) * trackbacks(0) Yahoo!ブックマークに登録 ▲page-top

スポンサーサイト


スポンサードリンク * - * 02:56 * - * - Yahoo!ブックマークに登録 ▲page-top
◇■◇コメントありがとう◇■◇













◆クッキーに登録すると、以降の書き込み時にお名前やアドレスの記入が不要になります


この記事のトラックバックURL
http://blog-henteko.jugem.jp/trackback/714

この記事に対するトラックバック

▲page-top
/