How to xfy Blog Editor

拡張コマンド:Amazon Associates for Blog Editorの使い方

拡張コマンドの Amazon Associates for Blog Editor を使うと、以下のようなAmazonのアフィリエイト用リンクを簡単に作成することができます。

Amazon
Apple iPod nano 2GB シルバー MA477J/A

なお、この機能を利用するには、こちらでアソシエイトIDを所得し、こちらでAmazon Web Servicesのアカウントを取得して、Subscription IDというIDを入手しておく必要があります。

Amazon Associates for Blog Editor でファイルをダウンロードしたら、解凍し、解凍で得られた「blog-amazon-afl.xvcd」というファイルと「blog-amazon-afl.resources」というフォルダを、そのまま xfy Blog Editor をインストールしたフォルダ配下の「scripts」フォルダに置きます。

次に、「blog-amazon-afl.xvcd」の29行と30行にアソシエイトIDとSubscription IDを次のように入力し、上書きします。

29: <xvcd:user-data name="amazonafl:aflkey" value="アソシエイトID"/>
30:<xvcd:user-data name="amazonafl:devkey" value="Subscription ID"/>

あとは、通常の拡張コマンドのxfy Blog Editorへの登録と同じです。xfy Blog Editorを起動したら、記事一覧の画面で［Blog－ユーザーコマンド管理］を選択し、［ユーザーコマンド管理］ダイアログボックスを開きます。そして、［登録］ボタンをクリックし、［スクリプトファイル］で「blog-amazon-afl.xvcd」を指定し、メニュー名に「Amazon アソシエイト」と入力して［OK］ボタンをクリックします。そのあと、xfy Blog Editorを再起動すれば、コマンドが利用可能になります。

コマンドの利用方法は次のとおりです。

▼1.挿入する位置にカーソルを置いたら、［拡張コマンド－Amazon アソシエイト］を選択します。

▼2.言語を選択するダイアログボックスが表示されたら、「Japanese」を選びます。なお、言語選択のダイアログボックスが表示されるのは初回だけです。

▼3.設定のダイアログボックスが表示されます。［Amazon Associates ID］と［AWS Access Key ID］には、先に「blog-amazon-afl.xvcd」を編集したとき入力したIDが表示されますので、そのままにします。
▼4.［ジャンル］でジャンルを選びます。ここでは「エレクトロニクス」を選んでみました。
▼5.［検索文字列］で検索のキーワードを入力します。ここでは「iPod」と入力してみました。
▼6.［ソート順］で並べ方を指定します。ここでは初期設定の「売れている順番」にしています。
▼7.［検索］ボタンをクリックします。

▼8.検索結果が表示されます。

▼9.検索結果からリンクを作成したい商品を、「ここへドロップ」と書かれた箇所にドラッグ＆ドロップします。

▼10.画像が表示されたら、［OK］ボタンをクリックします。

▼11.記事中に商品のアフィリエイト用リンクが挿入されます。あとは、タイトルや文章を書いてサーバーに保存すればOKです。

このページは xfy Blog Editor を利用して作成されました。

セル内の文字配置を設定する(Ver.1.3.3.0)

表のセルの内の文字配置を設定できます。設定できるのは、左右位置が「左詰め」「中央」「右詰め」の3つ、上下位置が「上詰め」「中央」「下詰め」の3つです。また、設定の対象は「セル」「表」「行」「列」の4つです。「セル」だと現在のセル、「表」だと表全体、「行」だとカーソル位置にある行、「列」だとカーソル位置にある列が設定の対象になります。特定のセルの文字配置を設定するなら、手順は次のようになります。

▼1.配置を設定するセルにカーソルを置いたら、［表－セルの設定］を選択します。

▼2.［セルの設定］ダイアログボックスが表示されたら、［設定対象］で［セル］を指定します。
▼3.［左右の配置］で［右詰め］を指定します。
▼4.［上下の配置］で「中央」を徒弟します。
▼5.［OK］ボタンをクリックします。

▼6.セル内の文字の配置が変更されます。

このページは xfy Blog Editor を利用して作成されました。

表全体を選択する2つの方法(Ver.1.3.3.0)

表を削除したり、表全体のサイズを変更したりするときは、表全体を選択する必要があります。ところが、キー操作で表全体をうまく選択することは、かなり難しいと思います。ここでは、表全体を確実に選択する2つの方法を紹介します。

方法1：マウスを使う
▼1.表を囲む線（見えない場合もあります）にマウスポインタを合わせ、マウスポインタの形がになるポイントを見つけ、クリックします。

▼2.表全体が選択されます。

方法2：選択用のコマンドを使う
▼1.表中の適当なセルにカーソルを置きます。表中ならどこでもかまいません。

▼2.［表－表の選択］を選択します。

▼3.表全体が選択されます。

このページは xfy Blog Editor を利用して作成されました。

表の列を削除する(Ver.1.3.3.0)

表の列を削除するには、次のように操作します。

▼1.削除したい列にカーソルを置きます。ここでは「4月」の列にカーソルを置きました。

▼2.［表－列の削除］を選択します。［Ctrl］+［Delete］キーを押してもかまいません。

▼3.列が削除されます。「4月ヶの列が削除されていることが確認できます。

このページは xfy Blog Editor を利用して作成されました。

表に列を追加する(Ver.1.3.3.0)

作成した表に列を追加するなら、次のように操作します。

▼1.表中にカーソルを置きます。列は、カーソルのある列の左側が右側に追加されます。

▼2.［表－列の追加－右に追加］を選択します。左側に追加するなら［表－列の追加－右に追加］です。

▼3.カーソルのある列の右側に列が追加されます。

なお、現在の列の左側に追加するなら、ショートカットキーの［Ctrl］+［Insert］キーが便利です。

このページは xfy Blog Editor を利用して作成されました。

表の行を削除する(Ver.1.3.3.0)

表の行を削除するには、次のように操作します。

▼1.削除したい行にカーソルを置きます。

▼2.［表－行の削除］を選択します。または、［Shift］+［Delete］キーを押します。

▼3.カーソル位置の行が削除されます。

なお、現在のバージョン(Ver.1.3.3.0)では、複数の行をまとめて削除することはできないようなので、上記の手順で1行ごと削除する必要があります。

このページは xfy Blog Editor を利用して作成されました。

表に行を追加する(Ver.1.3.3.0)

作成した表に行を追加するには、次のように操作します。

▼1.表中にカーソルを置きます。行は、カーソルのある行の1つ上か下に追加できます。

▼2.［表－行の追加－下に追加］を選択します。

▼3.カーソルのある行の下に1行追加されます。

もしも、カーソルのある行の上に追加するなら、［表－行の追加－上に追加］を選択します。この場合は、［Shift］+［Insert］キーでも追加できます。

このページは xfy Blog Editor を利用して作成されました。

表を左右中央に配置する(Ver.1.3.3.0)

表の左右位置を設定することができます。次は左右中央に配置した例です。この場合、親要素の左右中央に配置される点に注意してください。

	４月	５月	６月	７月
渋谷店	1250000	980000	890000	1050000
新宿店	998000	895000	1000000	990000

手順は次のとおりです。

▼1.表を右クリックしてショートカットメニューを開き、［表の設定］を選択します。［表の設定］ダイアログボックスが開きます。

▼2.［表の配置］で左右位置を指定して［OK］ボタンをクリックします。ここでは［中央］を指定します。

▼表が左右中央に配置されます。

このページは xfy Blog Editor を利用して作成されました。

［Blog－ブラウザで開く］を選択したとき起動するブラウザを指定する(Ver.1.3.3.0)

サーバにアップした記事をブラウザで確認するときは、［Blog－ブラウザで開く］を選択すると、ブラウザが起動してブログが表示されます。このとき起動するブラウザは、Windowsで既定（または標準）に指定されているブラウザです。既定（または標準）のブラウザというのは、Webページを表示したり、ローカルのHTMLファイルを表示するとき、最優先で利用されるブラウザのことです。Windows環境であれば、通常はInternet Explorerが既定（標準）のブラウザになっているはずです。

ただし、Windows用のブラウザは他にもあります。Firefox、Netscape、Operaなどが有名ですし、最近はMacintoshの標準ブラウザであるSafariのWindows版（ベータ版）も登場しました。これらの複数のブラウザを使っている方も多いと思います。xfy Blog Editorでは、［Blog－ブラウザで開く］を選択したとき起動するブラウザを指定することができます。既定のブラウザはInternet Explorerにしておき、［Blog－ブラウザで開く］を選択したときはFirefoxを起動する、といった使い方ができるわけです。設定方法は次のとおりです。

▼1.［ツール－オプション］を選択して［オプション］ダイアログボックスを開きます。

▼2.［設定項目］で「Webブラウザ」を選択します。
▼3.［Webブラウザを指定する］をオンにし、［参照］ボタンをクリックします。

▼4.使用するWebブラウザのプログラムを指定して［開く］ボタンをクリックします。

▼5.もとのダイアログボックスに戻ったら、［OK］ボタンをクリックします。

▼6.［Blog－ブラウザで開く］を選択してみましょう。

▼7.指定したWebブラウザ（画面はFirefox）が起動するようになります。

このページは xfy Blog Editor を利用して作成されました。

文字に設定した書式･飾りを一括解除する(Ver.1.3.3.0)

［書式－文字スタイル］で文字に対して設定した書式･飾りは、すべてを一括解除することができます。手順は次のとおりです。

▼1.書式･飾りを解除したい文字を選択したら、［書式－文字スタイル－全解除］を選択します。

▼2.すべての書式･飾りが一括解除されます。

【参考】
設定した文字スタイルを登録して再利用する(Ver.1.3.3.0)
文字に複数の書式や飾りを一括設定する(Ver.1.3.3.0) 

このページは xfy Blog Editor を利用して作成されました。

設定した文字スタイルを登録して再利用する(Ver.1.3.3.0)

文字に複数の書式や飾りを一括設定する(Ver.1.3.3.0)で紹介した文字スタイルは、登録して再利用できます。よく利用する書式･飾りの組み合わせがある場合は、名前を付けて登録しておくことで、呼び出すだけで使えます。毎回、同じ設定を繰り返す必要はありません。手順は次のようになります。

▼1.文字スタイルを設定した文字中にカーソルを置いたら、［書式－文字スタイル－スタイルの設定］を選択します。

▼2.［スタイルの設定］ダイアログボックスが開いたら、［登録］ボタンをクリックします。

▼3.［スタイル名］に登録する名前を入力し、［OK］ボタンをクリックします。ここでは「強調文字1」としました。

▼4.もとのダイアログボックスに戻ったら［キャンセル］ボタンをクリックします。

以上で文字スタイルの登録は完了です。この例では、「水色の背景＋文字色が白＋罫線囲み＋フォントサイズ18pt」という書式・飾りの組み合わせに対して「強調文字1」という名前を付けて、登録したことになります。次に、登録した文字スタイル 「強調文字1」を使ってみましょう。

▼1.文字スタイルを設定する文字を選択したら、［書式－文字スタイル－スタイルの設定］を選択します。

▼2.［文字スタイル］ダイアログボックスが開いたら、［呼び出し］ボタンをクリックします。

▼3.［スタイル一覧］で「強調文字1」を選択し、［適用］ボタンをクリックします。

▼4.もとのダイアログボックスに戻ったら［OK］ボタンをクリックします。

▼5.選択した文字に文字スタイルが設定されます。

このように、文字に対してよく利用する書式・飾りの組み合わせがある場合は、「文字スタイル」として登録しておくと便利です。

【参考】
文字に複数の書式や飾りを一括設定する(Ver.1.3.3.0) 
文字に設定した書式･飾りを一括解除する(Ver.1.3.3.0)

このページは xfy Blog Editor を利用して作成されました。

文字に複数の書式や飾りを一括設定する(Ver.1.3.3.0)

「文字スタイル」を利用すると、文字のフォント、サイズ、背景色や文字色などを一度に設定することができます。次の「xfy Blog Editor」は文字スタイルを使って設定したものです。

ブログをxfy Blog Editorで書いてみました。

設定方法は次のようになります。

▼1.書式･飾りを設定する文字を選択します。
▼2.［書式－文字スタイル－スタイルの設定］を選択して［スタイルの設定］ダイアログボックスを開きます。

▼3.各タブで書式・飾りを設定しましょう。この例の場合は、まずは［フォント］タブで［文字サイズ］を「18ポイント」にします。

▼4.［飾り］タブに切り替え、［文字色］を「白」、［文字囲み線］で［一括設定］をオンにし、［上下左右］をチェックして［幅］と［色］を指定します。ここでは幅を「1.5ピクセル」、［色］を「黒」にします。

▼5.［背景］タブに切り替え、［背景色］をチェックして色を指定します。
▼6.［OK］ボタンをクリックします。

▼7.複数の書式・飾りが一括設定されます。

【参考】
設定した文字スタイルを登録して再利用する(Ver.1.3.3.0)
文字に設定した書式･飾りを一括解除する(Ver.1.3.3.0)

このページは xfy Blog Editor を利用して作成されました。

挿入したGoogle Mapsを削除する

Google Maps for Blog Editor Ver.2.0で挿入される地図は、全体がテーブル（表）で囲まれています。このため、地図全体を削除するには、テーブルを選択してから［Delete］キーで削除してください。以下に手順を示します。

▼1.挿入した地図の右端にマウスポインタを合わせます。そして、マウスポインタがの形になったらクリックします。

▼2.挿入した地図全体が選択されます。選択されたときは、↓こんな感じになります。

▼3.［Delete］キーを押すと挿入した地図が削除されます。

削除方法は以上です。［Shift］＋カーソルキーやドラッグで選択して削除することもできますが、一部のスクリプト等が残ってしまうと誤動作する可能性もあるので、上記の方法でテーブルをまるごと削除するのが確実だと思います。

なお、ソースが編集できるなら、ソース編集モードで次の部分を削除してもOKです。

<table border="0" class="bgmap">～</table>

けっこう長いので、テーブルの終わりを示す</table>を探すのが大変かも(^^ゞ

蛇足ですが、上記の border="0" を border="1"としてWYSIWYGモードに切り替えると、地図全体を囲んでいる表が確認できます。

このページは xfy Blog Editor を利用して作成されました。

画像を枠線で囲む(Ver.1.3.3.0)

画像には枠線付けることができます。たとえば次のような感じです、左が枠線を付けた画像で、右がオリジナルの状態です。ページの背景と画像の背景が同系統の色の場合（例：ページ背景も画像背景も白のような場合）、画像に枠線を付けることで境界を明確にすることができます。

また、貼り付けた後で枠線を設定できるので、枠線が必要な場合、あらかじめ画像を加工する必要もありません。設定方法は次のとおりです。

▼1.画像を右クリックし、［画像の設定］を選択します。［画像の設定］ダイアログボックスが開きます。

▼2.［枠線］をチェックし、［幅］と［色］を指定して［OK］ボタンをクリックします。

▼3.画像の枠線が表示されます。

ちなみに、本ブログで試用しているxfy Blog Editorの画面画像の多くにも、同じ方法で薄いグレーの枠線を設定してあります。

このページは xfy Blog Editor を利用して作成されました。

拡張コマンド：Google Maps for Blog Editor Ver.2.0の使い方

拡張コマンドのGoogle Maps for Blog Editor がバージョンアップして、Ver.2.0になりました。デザインも一新され、さらに使いやすくなっています。マーカーを挿入できるようになり、挿入したあとでマップの設定を簡単に変更できる編集機能も用意されています。↓は、新しいGoogle Maps for Blog Editorで挿入した地図です。

ヤフードーム33.595184130.36207415G_SATELLITE_MAP400400trueヤフードームhttp://maps.google.co.jp/mapdata?cc=jp&w=400&h=400&latitude_e6=33595184&longitude_e6=130362074&zm=3200 Web Services by Google

ヤフードーム Latitude : 33.595184 Longitude : 130.362074

必要なファイルをダウンロードしてxvcdファイルを「scripts」フォルダに置く方法、Google のサイトでAPIキーを入手する方法、入手したAPIキーをxvcdファイルの所定位置（blog-gmap.xvcd ファイルの26 行目）に入力する方法は、従来どおりです。先の Google Maps for Blog Editor  のページまたはGoogle Maps for Blog Editorで地図を挿入する(Ver.1.3.3.0) を参照してください。ここでは、インストール後の地図の挿入方法を紹介します。

▼1.新しいエントリを用意したら、［拡張コマンド－Google Maps］を選択します。
▼2.ダイアログボックスが開いたら、［住所、地名を入力］に表示したい住所や地名を入力し、［緯度・経度を取得］ボタンをクリックします。なお、APIキーをxvcdファイルに書いていれば、［Google API key］は自動的に入力されます。また、入力した住所・地名によっては移動・経度が取得できないケースもあるので、その場合は別の住所・地名で試してください。

▼3.緯度・経度が取得できたら、［マップ種類］、［ズーム］、［地図の幅］、［地図の高さ］などを指定して［地図のプレビューを取得］ボタンをクリックします。［マーカーを表示］をチェックして文字を入力すれば、地図内にマーカーを表示することも可能です。

▼4.プレビューが表示されたら［OK］ボタンをクリックします。なお、［マップ種類］で「航空写真」を選択しても、プレビューはノーマルの地図で表示されます。

▼5.編集エリアに地図が挿入されます。

▼6.［保存/サーバーへ反映］ボタンで保存したら、ブラウザで表示を確認します。

▼7.挿入時に［マーカーを表示］をチェックした場合は、地図中にマーカーが表示され、クリックすると設定した文字が吹き出しに表示されます。もちろん、地図をドラッグしてグリグリ動かすことも可能です。

挿入の方法は以上です。なお、今回のバージョンでは、挿入したあとで簡単に編集する機能も用意されています。次のように地図の下にカーソル（キャレット）を置いて、［拡張コマンド－Google Maps］を選択してください。再び設定のダイアログボックスが開き、設定を変更することができます。

新しいGoogle Maps for Blog Editor はデザインも一新されて、とても使いやすくなっています。ブログに地図を手軽に挿入するツールとして、おすすめです。

【参考】
Google Maps for Blog Editorで地図を挿入する(Ver.1.3.3.0)
Google Maps for Blog Editor

このページは xfy Blog Editor を利用して作成されました。

拡張コマンド:Count Down for Blog Editor の使い方

Count Down for Blog Editorは、指定した年月日まで残り何日あるかを自動的に計算し、挿入してくれる拡張コマンドです。次は、北京オリンピック開催（2008年8月8日～8月24日）までの残り日数を挿入した例です。

2008-08-08北京オリンピック開催まであと 442 日。

インストール方法は、こちらに詳しく載っています。インストール後の使い方は、次のようになります。

▼1.残り日数を挿入する位置にカーソルを置き、［拡張コマンド－Count Down］を選択します。

▼2.日付と記念日を設定するダイアログボックスが開くので、まずは［日付］の［▼］をクリックしてカレンダーを表示し、年月日を指定します。

▼3.［記念日］にその日の簡単な説明を入力します。入力すると、その下のプレビューの文章も変化します。
▼4.［OK］ボタンをクリックします。

▼5.残り日数が挿入されます。

なお、日時情報はhCalendar形式で挿入されます。このため、hCalendarに対応したアプリケーションで利用できます。次は、FirefoxにTails Firefox Extension 0.3 というアドオンを入れ、日時情報を挿入したブログを表示したところです。hCalendarのデータが含まれるページでは右下のマークが緑色に点灯し、マークをクリックするとそのデータがパネルに表示されます。

このページは xfy Blog Editor を利用して作成されました。

上付き文字/下付き文字を設定する(Ver.1.3.3.0)

ワープロと同様に、上付文字/下付文字を設定ではきます。↓こんな感じです。

H₂O　　256 = 2⁸

 

設定方法は次のとおりです。

▼1.上付き/下付きにする文字を選択します。
▼2.［書式－文字スタイル－上付き］または［書式－文字スタイル－下付き］を選択します。

▼3.上付き/下付き文字が設定されます。

なお、xfy Blog Editor上では、上付き/下付き文字が、ブラウザ上での表示する、少し大きく表示されるようです。このため、実際の表示はブラウザで確認した方がよいと思います。

このページは xfy Blog Editor を利用して作成されました。

拡張コマンド:Image of the Day for Blog Editor の使い方

Image of the Day for Blog Editorは、NASAのIMAGE OF THE DAY GALLERYから選ばれた"今日の一枚"の画像を取得し、記事に挿入する拡張コマンドです。コマンドを登録したら、［拡張コマンド－Image of the Day］を選択するだけで、カーソル位置に画像が挿入されます。次のような感じです。

NASA Image of the Day
Skylab -- America's First Manned Station	Mon, 14 May 2007 00:00:00 EDT
Astronaut Charles Conrad Jr., commander of the first manned Skylab mission, goes through a checklist of experiment activity during Skylab training at the Johnson Space Center

なお、この拡張コマンドの最新バージョンでは、記事タイトルに画像の説明文が自動的に挿入されます。そのまま投稿してもかまいませんが、独自のタイトルにする場合は、記事タイトルを書き換えてから投稿するとよいでしょう。

【参考】
拡張コマンド：Wikipedia Link for Blog Editor の使い方
拡張コマンドを使ってみよう～Image Thumbnail for Blog Editorを例に

このページは xfy Blog Editor を利用して作成されました。

拡張コマンド：Wikipedia Link for Blog Editor の使い方

拡張コマンド（「ユーザーコマンド」とも言います）の1つであるWikipedia Link for Blog Editor を使うと、記事中の単語にWikipediaへのリンクを簡単に設定することができます。たとえば、次の文章中の「一太郎」と「ATOK」という文字をクリックすると、Wikipediaの「一太郎」と「ATOK」のページに飛びます。これは、Wikipedia Link for Blog Editorを使って設定したものです。

ジャストシステムは、一太郎とATOKを生んだ会社として知られています。

設定方法は、文字を選択して［拡張コマンド－Wikipedia］と操作するだけです。念のため手順を示します。

▼1.文字を選択したら、［拡張コマンド－Wikipedia］を選択します。

▼選択した文字に、Wikipediaのその言葉のページへのリンクが設定されます。

▼3.［保存/サーバーへ反映］ボタンでサーバーに反映したあと、［Blog－ブラウザで開く］を選択し、ブラウザでリンクをクリックしてみてください。Wikipediaの該当ページにジャンプするはずです。

なお、［拡張コマンド］を選択したとき［Wikipedia］が表示されない場合は、拡張コマンドの「Wikipedia Link for Blog Editor」がインストール･登録されていません。Wikipedia Link for Blog Editor のページを参考にして、インストール･登録してください。

拡張コマンドのインストール・登録方法は基本的に共通ですので、拡張コマンドを使ってみよう～Image Thumbnail for Blog Editorを例にも参考になると思います。

ちなみに、Wikipedia Link for Blog Editorは、非常にシンプルに拡張コマンドで、改造にも適しています。本体のxvcdファイルを少し改造するだけで、Googleの検索に変更したり、その他のサイトを検索するようにできます。改造方法は、次回（多分）。

このページは xfy Blog Editor を利用して作成されました。

段落の余白を設定する(Ver.1.3.3.0)

段落の余白を設定することができます。たとえば、次の段落では上下左右の余白として1emを設定してあります。

xfy Blog Editorを使うと、ワープロのような操作でブログ記事を作成することができます。これまでのように、フォームに入力して何度もプレビューで表示を確認したり、HTMLのタグを入力する手間はいりません。しかも、xfy Blog Editorで生成されるのはXHTMLというマークアップ言語で記述されたテキストファイルなので、データを再利用するのにも向いています。

この場合、設定した余白は次の2つです。

• 外側の余白（前後の要素との距離）
• 内側の余白（段落の境界線と段落本文との距離）

上の段落では、余白を分かりやすくするために、段落本文の文字サイズと段落の境界線もあわせて設定しています。上の段落を例に、余白を設定する手順を示すと次のようになります。

▼1.余白を設定する段落中にカーソルを置きます。
▼2.［書式－段落スタイル－スタイルの設定］を選択します。［スタイルの設定］ダイアログボックスが開きます。

▼3.［フォント］タブで文字サイズを設定します。

▼4.［飾り］タブで段落の境界線を設定します。詳細は段落全体を罫線で囲む(Ver.1.3.3.0)を参照してください。

▼5.［余白］タブに切り替えて、［外側の余白］と［内側の余白］で上下左右の余白を設定します。
▼6.［OK］ボタンをクリックします。

▼7.段落のスタイルが設定されます（余白が変化したことに注目してください）。

なお、外側の余白と内側の余白を図示すると、次のようになります。

【参考】
段落全体を罫線で囲む(Ver.1.3.3.0)
段落全体の文字サイズと文字色を設定する(Ver.1.3.3.0)

Google Maps for Blog Editorで「インターネットサイト～を開けません。操作は中断されました」と表示される場合の対処方法

Google Maps for Blog Editorで地図を挿入する(Ver.1.3.3.0) の記事を作成中に、Google Maps for Blog Editorで地図を貼り付けたページを表示しようとすると、次のようなエラーが発生して、正しく表示できないトラブルに遭いました。

しかも、エラーが起きるのはInternet Explorer 7だけで、Firefoxでは起きません。何だろうと思って調べると、次のような記事がありました。

http://www.witha.jp/blog/archives/2005/07/googleie.html 

IE6の話のようですが、IE7にもあてはまるようで、どうやらページ全体が完全に読み込まれる前にGoogle Mapsのスクリプトが動き出すとIE6/7でエラーが発生するようです。このため、ページ（ブログ）全体が読み込まれたあとでスクリプトが実行されるように修正すればいいのですが、xfy Blog Editorの場合は、JavaSctiptに対応していないのでそれができません。

そこで、「blog-gmap.xvcd」には、あらかじめ次のように初期設定で2秒（2000ms）だけ処理を遅らせるタイマーが設定されています。

 <!-- Wait Timer for IE6 -->
 <xvcd:variable name="js_timeout" select="'2000'"/>

なので、ブログ記事が2秒以内に読み込まれた場合は地図が正しく表示されますが、表示される記事が長かったりトップページに表示する記事数が多かったりして、読み込みに2秒以上時間がかかると、前述のエラーが発生するようです。

実際、このHow to xfy Blog Editorでは、トップページに15件の記事を表示する設定にしてあったので、この問題が発生したようです。対処としては、「blog-gmap.xvcd」を編集してタイマーの数値を大きくするか、トップページに表示する記事数（エントリー数）を減らします。

「blog-gmap.xvcd」を編集した場合は、xfy Blog Editorを再起動する必要があります。トップページに表示する記事数は、ジャストシステムブログの場合、管理ページに入り、［ホーム］  > ［ ブログ］  > （自分のブログの名前）  >  設定  >  表示設定  で設定できます。

以上、ご参考までに。

このページは xfy Blog Editor を利用して作成されました。

Google Maps for Blog Editorで地図を挿入する(Ver.1.3.3.0)

拡張機能のGoogle Maps for Blog Editorを使うと、こんなふうにGoogle Mapsの地図を挿入することができます。

Web Services by Google

日光 Latitude : 36.747192 Longitude : 139.622108

---

この機能を利用するには、Google Maps APIキーを取得しておく必要があります。Google Maps APIキーは、次のページで取得できます。

http://www.google.com/apis/maps/

英語のページですが、取得は難しくありません。取得するときはブログのURLを指定します。1つのキーと1つのURLが対応していて、そのキーを使って登録したブログかどうかがチェックされ、正しければ地図が表示される仕組みになっています。

次に、以下のページからGoogle Maps for Blog Editorのファイル（zipファイル）をダウンロードします。ダウンロードするには、xfy Communityへの登録（無料）が必要となります。

https://www.xfytec.com/community/modules/mydownloads/singlefile.php?cid=108&lid=128

ダウンロードして、解凍したら、解凍で得られた「blog-gmap.xvcd」というファイルを、xfy Blog Editorをインストールしたフォルダにある「scripts」フォルダにコピーします。このあたりは、「ユーザーコマンドを使ってみよう～Image Thumbnail for Blog Editorを例に」とまったく同じです。

次に、テキストエディタで「blog-gmap.xvcd」を開き、23行目に取得したAPIキーを入力します（次の赤い箇所）です。

22:    <!-- Google -->
23:    <xvcd:user-data name="gapi_appkey" value="your Maps API key"/>

あとは、xfy Blog Editorを起動して、［ブログ－ユーザーコマンド管理］で「blog-gmap.xvcd」を登録します。コマンド名は「Google Maps」でよいでしょう。このあたりの手順は、「ユーザーコマンドを使ってみよう～Image Thumbnail for Blog Editorを例に」とまったく同じなので、そちらを参照してください。

登録が完了してxfy Blog Editorを再起動したら、準備完了です。以下に具体的な使い方を紹介します。

▼1.地図を挿入したい位置にカーソル置いたら、［拡張コマンド－Google Maps］を選択します。［Google Maps］ダイアログボックスが開きます。
▼2.［住所、場所を入力］の入力欄に表示したい場所、住所などを入力して［検索・緯度を取得］ボタンをクリックします。ここでは「日光」と入力しています。入力した地名によってはうまくいかない場合もありますので、その場合は地名を変えて試してみましょう。

▼3.［緯度］と［軽度］が取得できたら、［マップ種類］で地図の種類（通常の地図／航空写真）、［ズーム］で表示倍率（大きい数値ほど拡大されます）、［地図の幅］、［地図の高さ］を指定して［地図のプレビューを取得］ボタンをクリックします。

▼4.プレビューが表示されたら［OK］ボタンをクリックします。なお、地図の種類で「航空写真」を選択してもプレビューには反映されないようです（ズームや幅、高さは反映されます）。

▼5.編集画面に地図が挿入されます。ただし、編集画面上では地図は表示されず、薄い紫のエリアとして表示されます。
▼6.［保存/サーバーへ反映］ボタンをクリックしてサーバーに保存します。

▼7.ブラウザを起動して表示を確認します。

▼8.［航空写真］ボタンをクリックすると、航空写真にも切り替えられます。地図をドラッグして移動したり、左側のスライダーで表示倍率を変更することもできます。

【参考】
ユーザーコマンドを使ってみよう～Image Thumbnail for Blog Editorを例に

このページは xfy Blog Editor を利用して作成されました。

段落全体を罫線で囲む(Ver.1.3.3.0)

段落を罫線で囲むことができます。↓こんな感じです。

段落を罫線で囲むことができます。段落を罫線で囲むことができます。段落を罫線で囲むことができます。段落を罫線で囲むことができます。段落を罫線で囲むことができます。段落を罫線で囲むことができます。段落を罫線で囲むことができます。段落を罫線で囲むことができます。

▼1.罫線で囲む段落中にカーソルを置きます。
▼2.［書式－段落スタイル－スタイルの設定］を選択します。［スタイルの設定］ダイアログボックスが開きます。

▼3.［飾り］タブに切り替えます。
▼4.［文字囲み線］を指定します。全体を同じ線で囲むなら［一括設定］を指定します。［個別設定］を指定すれば、上下左右の線を個々に設定することもできます。

▼5.上下左右を一括設定できるように、設定項目が1つになります。

▼6.［上下左右］をチェックし、［幅］［線種］［色］を指定します。
▼7.［OK］ボタンをクリックします。

▼8.段落が指定した罫線で囲まれます。

このページは xfy Blog Editor を利用して作成されました。

段落全体の背景色を設定する(Ver.1.3.3.0)

xfy Blog Editorを使うと、段落全体に背景色を設定することができます。たとえば、次のような感じです。

ジャストシステムが開発したxfy Blog Editorは、WYSIWYGでブログ記事を書くことができるツールです。記事だけでなく、ブログのデザイン全体を取り込むこともできます。

設定方法は次のとおりです。

▼1.背景色を設定する段落中にカーソルを置きます。段落内であれば、どこでもかまいません。

▼2.［書式－段落スタイル－スタイルの設定］を選択します。［スタイルの設定］ダイアログボックスが開きます。ショートカットキーは［Ctrl］+［D］キーです。

▼3.［背景］タブに切り替えます。
▼4.［背景色］をチェックします。
▼5.右側の［▼］をクリックして色の一覧を表示し、使いたい色を選択します。
▼6.［OK］ボタンをクリックします。

▼7.背景色が設定されます。

なお、段落全体の文字サイズと文字色を設定する(Ver.1.3.3.0)の方法と組み合わせると、次のような段落も作成できます。

ジャストシステムが開発したxfy Blog Editorは、WYSIWYGでブログ記事を書くことができるツールです。記事だけでなく、ブログのデザイン全体を取り込むこともできます。

【関連ページ】
段落全体の文字サイズと文字色を設定する(Ver.1.3.3.0)

このページは xfy Blog Editor を利用して作成されました。

段落全体の文字サイズと文字色を設定する(Ver.1.3.3.0)

xfy Blog Editorでは、段落単位で文字サイズや文字色などのスタイルを設定することができます。たとえば、次の段落は文字サイズを13ptで文字色を赤にしています。

xfy Blogb Editorを使うと、WYSIWYGでブログ記事を書くことができます。記事だけでなく、ブログのデザイン全体を取り込むこともできます。

手順は次のとおりです。

▼1.スタイルを設定したい段落中にカーソルを置きます。この方法では段落中の文字全体のスタイルが設定されるので、段落中にカーソルを置くだけでかまいません。なお、段落とは［Enter］キーで区切られた範囲です。

▼2.［書式－段落スタイル－スタイルの設定］を選択します。［スタイルの設定］ダイアログボックスが開きます。

▼3.［フォント］タブで［文字サイズ］をチェックし、サイズを指定します。

▼4.［飾り］タブに切り替えます。
▼5.［文字色］をチェックし、その右横の［▼］をクリックし、色を選択します。
▼6.［OK］ボタンをクリックします。

▼7.段落全体の文字サイズと文字色が設定されます。

【関連ページ】
段落全体の背景色を設定する(Ver.1.3.3.0)

このページは xfy Blog Editor を利用して作成されました。

水平線を挿入する(Ver.1.3.3.0)

次のような水平線を挿入できます。線色や幅、高さ、左右の配置などは挿入したあとで設定できます。

---

---

---

---

挿入の手順は次のとおりです。

▼1.水平線を挿入したい位置にカーソルを置いたら、ツールバーの［水平線挿入］ボタンをクリックします。または、［挿入－水平線］を選択します。

▼2.カーソル位置に水平線が挿入されます。

▼3.水平線を選択したら、右クリックしてメニューから［水平線の設定］を選択します。［水平線の設定］ダイアログボックスが開きます。

▼4.［配置］や［幅］など、必要な項目をチェックしてから、各項目ごとに設定します。設定したら［OK］ボタンをクリックします。

▼5.水平線の設定が変更されます。

このページは xfy Blog Editor を利用して作成されました。

説明付きリストを作る(Ver.1.3.3.0)

説明付きリストは、箇条書きの1つで、言葉の定義などを表示させたいとき便利です。たとえば、次のような使い方ができます。

一太郎

ジャストシステムが開発した日本語ワードプロセッサ。20年以上の歴史を持つ純国産ソフトウェアの代表である。

ATOK

ジャストシステムが開発した日本語変換システム。高い変換精度を誇り、電子辞典との連係機能などの情報検索機能も備える。古くからのファンが多い。

作成方法は次のとおりです。

▼1.説明付きリストを開始する位置にカーソルを置きます。

▼2.ツールバーの［説明付きリスト］ボタンをクリックします。

▼3.カーソル位置に薄紫で［項目］と表示され、文字が入力できる状態になります。

▼4.用語を入力します。ここでは「一太郎」と入力してみました。入力したら［Enter］キーを押します。

▼5.次の行の自動的に字下げされた位置に薄紫で［説明］と表示され、文字が入力できる状態になります。

▼6.用語の説明文を入力します。入力したら説明文の最後で［Enter］キーを押します。

▼7.次の行の先頭に薄紫で［項目］と表示され、次の用語を入力できる状態になります。

▼8.用語を入力します。ここでは「ATOK」と入力してみました。入力したら［Enter］キーを押します。

▼9.次の行の自動的に字下げされた位置に薄紫で［説明］と表示され、文字が入力できる状態になります。

▼10.説明文を入力します。入力したら、説明文の最後で［Enter］キーを押します。以後、同じ操作を繰り返せばいくつでもリストを追加できます。

▼11.こでは、説明付きリストを終了してみましょう。次行の先頭に薄紫で［項目］と表示されたら、［項目］を右クリックし、ショートカットメニューの［リストから解除］を選択します。

▼12.リストが解除され、通常の段落になります。

【関連項目】
箇条書き（番号なしリスト/番号付きリスト）を作成する
箇条書き（リスト）を解除する

このページは xfy Blog Editor を利用して作成されました。

太字、斜体、アンダーラインを設定する(Ver.1.3.3.0)

次のように、文字に対して太字、斜体、アンダーラインを設定できます。操作方法は一太郎やワードと同じです。

太字、斜体、アンダーライン、太字＋斜体、太字＋アンダーライン、斜体＋アンダーライン、太字＋斜体＋アンダーライン

設定するには、文字を選択して以下のいずれかの操作を実行します。

	メニュー操作	ボタン	キー操作
太字	［書式－文字スタイル－太字］		［Ctrl］+［B］
斜体	［書式－文字スタイル－斜体］		［Ctrl］+［I］
アンダーライン	［書式－文字スタイル－アンダーライン］		［Ctrl］+［U］

このページは xfy Blog Editor を利用して作成されました。

文字の背景色を設定する(Ver.1.3.3.0)

次のように、文字には背景色を設定できます。文字色を設定する(Ver.1.3.3.0)の方法と組み合わせて、文字と背景に別々の色を設定することもできます。

xfy Blog Editorによってブログの作成･更新がとても楽になります。

設定方法は次のとおりです。

▼1.背景色を設定したい文字を選択します。
▼2.［書式－文字スタイル－背景色］を選択します。［背景色］ダイアログボックスが開きます。

▼3.［背景色］をチェックしたら右側の［▼］ボタンをクリックし、カラーパレットから色を選択します。
▼4.［OK］ボタンをクリックします。

▼5.背景色が設定されます。

このページは xfy Blog Editor を利用して作成されました。

文字色を設定する(Ver.1.3.3.0)

次のように、本文の文字には自由に色を設定できます。

サクラサク

設定手順は次のようになります。

▼1.色を設定する文字を選択します。

▼2.ツールバーの［文字色］ボタンの［◆］をクリックし、カラーパレットを表示します。
▼3.設定したい色をクリックします。

▼4.選択を解除すると、色が設定されたことが確認できます。

なお、ツールバーの［文字色］ボタンには、前回設定した色が記憶されます。このため、文字を選択して［文字色］ボタンをクリックすると、前回設定した色をすぐに設定することができます。

このページは xfy Blog Editor を利用して作成されました。

見出しを設定する/解除する(Ver.1.3.3.0)

以下のように、xfy Blog Editorでは6段階の見出しを作成できます。

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

作成手順は次のようになります。

▼1.新規記事を用意します。下の画面は記事一覧で［エントリーの追加］ボタンをクリックした直後の状態です。

▼2.見出しの文字を入力します。

▼3.［Enter］キーで改段します。これによって、入力した文字を1つの段落にします。

▼4.見出しの段落中にカーソルを置いて、ツールバーの［段落タイプ］ボタンの［▼］をクリックし、「見出し1」～「見出し6」を選択します。数値の小さい見出しほど上位の見出しです。なお、段落全体が薄い紫の線で囲まれるのは、ここが1つの段落であることを意味しています。

▼5.見出しが設定されます。

見出し1～見出し6は、けっして文字サイズを設定するために使わないでください。見出しの設定は、「ここは大見出し」「ここは中見出し」……というように、あくまで見出しの上下関係を設定する機能だからです。文字のフォトン・サイズを設定する方法はこちらを参照してください。

なお、見出し1～見出し6は、xfy Blog EditorではXHTMLの次のタグによって記述されます。

見出し1	<h1>～</h1>
見出し2	<h2>～</h2>
見出し3	<h3>～</h3>
見出し4	<h4>～</h4>
見出し5	<h5>～</h5>
見出し6	<h6>～</h6>

このページは xfy Blog Editor を利用して作成されました。

表を挿入する(Ver.1.3.3.0)

新しいバージョン（1.3.3.0）では、デザインを選択できるなど、表の挿入機能が大幅に強化されています。たとえば、次のような表も簡単に挿入できます。ここでは、基本的な表の作り方を紹介します。

太郎2007	150	120
花子2007	98	88
三四郎2007	78	75
ATOK2007	55	65

▼1.表を挿入したい位置にカーソルを置いて、［表－表の挿入］を選択します。［表の挿入］ダイアログボックスが開きます。

▼2.行数、列数、表の幅、ヘッダ/フッタの有無、スタイルなどを選択します。［枠線］［配置］［背景］なども設定できます。前バージョンと比較すると、設定できる内容がとても増えているのが分かります。設定したら［OK］ボタンをクリックします。

▼3.カーソル位置に表が挿入されます。

▼4.文字、数値を入力して表を完成させます。

前バージョンでの表の作り方は、こちらに書きました。前バージョンが行数、表の幅くらいしか設定できなかったのに比べると、新しいバージョンの表作成機能は、格段に進歩しているのがわかります。すごく成長が早い！

このページは xfy Blog Editor を利用して作成されました。

NEWS:xfy Blog Editorがバージョンアップしました

xfy Blog Editorがバージョンアップした模様です。強化された機能などの詳細は以下のページに載っています。

http://www.justblog.jp/xberup07322/

画面デザインも少し変更され、より洗練された印象です。How to xfy Blog Editorの記事も、以降は新しいバージョンでアップしていきます。

このページは xfy Blog Editor を利用して作成されました。

インデント（字下げ）を設定する/解除する

インデントの例

インデントの例

インデントの例

上のように、段落の先頭をインデント（字下げ）することができます。字下げしたい段落中にカーソルを置いて［書式－インデント－増加］を選択すると、5文字分字下げされます。［書式－インデント－増加］を選択するごとに、段落の先頭が右方向に動きます。字下げした段落を元に戻すには、［書式－インデント－減少］を選択します。［書式－インデント－減少］を選択するごとに、段落の先頭が5文字分左方向に動きます。また、次のショートカットキーも便利です。

• ［Ctrl］+［M］キー …… ［書式－インデント－増加］と同じ
• ［Shift］+［Ctrl］+［M］キー …… ［書式－インデント－減少］と同じ

設定したインデントを解除するなら、インデントを設定した段落中にカーソルを置いて、［書式－インデント－解除］を選択します。

このページは xfy Blog Editor を利用して作成されました。

目次

• xfy Blog Editorの最新バージョンが出ました New
• Google Mars for BlogEditorを試してみる(Ver.1.3.5.0) 
• タグを強調表示するメリットは？(Ver.1.3.5.0) 
• 記事のXHTMLコードのツリー構造を確認する(Ver.1.3.5.0)
• ハイパーリンクのリンク先が新しいブラウザウィンドウに表示されるようにする(Ver.1.3.5.0)
• 文字に設定したハイパーリンクを解除する(Ver.1.3.5.0)
• タイトルにはHTMLのタグが使える(Ver.1.3.5.0)
• Windows XPとWindows Vistaで拡張コマンドのxvcdファイルが表示されるようにする(Ver.1.3.5.0)
• 拡張コマンドをドラッグ＆ドロップで登録する(Ver.1.3.5.0)
• タグを強調表示する(Ver.1.3.5.0)
• NEWS:xfy Blog EditorがR6にバージョンアップ 
• 表の枠線の表示形式を変更する 
• 画像を左に寄せて右側に文字を配置する(Ver.1.3.4.0) 
• NEWS:xfy Blog Editorの書籍を執筆いたしました
• 2007/07/19版のxfy Blog EditorをWindows Vistaにインストールする(Ver.1.3.4.0)
• 画像のサイズをオリジナルに戻す(Ver.1.3.4.0) 
• 記事をインポートする(Ver.1.3.4.0)
• 記事をエクスポートする(Ver.1.3.4.0) 
• AFPBB Newsの記事と写真を引用する(Ver.1.3.4.0)
• NEWS:xfy Blog EditorがR5にバージョンアップ！
• 拡張コマンド:Amazon Associates for Blog Editorの使い方
• セル内の文字配置を設定する(Ver.1.3.3.0)
• 表全体を選択する2つの方法(Ver.1.3.3.0)
• 表の列を削除する(Ver.1.3.3.0)
• 表に列を追加する(Ver.1.3.3.0)
• 表の行を削除する(Ver.1.3.3.0)
• 表に行を追加する(Ver.1.3.3.0)
• 表を左右中央に配置する(Ver.1.3.3.0)
• ［Blog－ブラウザで開く］を選択したとき起動するブラウザを指定する(Ver.1.3.3.0)
• 文字に設定した書式･飾りを一括解除する(Ver.1.3.3.0) 
• 設定した文字スタイルを登録して再利用する(Ver.1.3.3.0) 
• 文字に複数の書式や飾りを一括設定する(Ver.1.3.3.0)
• 画像を枠線で囲む(Ver.1.3.3.0)
• 拡張コマンド：Google Maps for Blog Editor Ver.2.0の使い方 
• 拡張コマンド:Count Down for Blog Editor の使い方 
• 上付き文字/下付き文字を設定する(Ver.1.3.3.0) 
• 拡張コマンド:Image of the Day for Blog Editor の使い方
• 拡張コマンド：Wikipedia Link for Blog Editor の使い方 
• 段落の余白を設定する(Ver.1.3.3.0) 
• Google Maps for Blog Editorで「インターネットサイト～を開けません。操作は中断されました」と表示される場合の対処方法
• Google Maps for Blog Editorで地図を挿入する(Ver.1.3.3.0) 
• 段落全体を罫線で囲む(Ver.1.3.3.0) 
• 段落全体の背景色を設定する(Ver.1.3.3.0) 
• 段落全体の文字サイズと文字色を設定する(Ver.1.3.3.0) 
• 水平線を挿入する(Ver.1.3.3.0) 
• 説明付きリストを作る(Ver.1.3.3.0)
• 太字、斜体、アンダーラインを設定する(Ver.1.3.3.0)
• 文字の背景色を設定する(Ver.1.3.3.0) 
• 文字色を設定する(Ver.1.3.3.0) 
• 見出しを設定する/解除する(Ver.1.3.3.0) 
• 表を挿入する(Ver.1.3.3.0)

  ---

• インデント（字下げ）を設定する/解除する　
• ブログサービスを登録する
• ハイパーリンクを設定する
• 新しい記事を投稿する
• ブログと同じデザインで記事が書けるようにする（テンプレートの作成）
• 画像を挿入する
• 記事を保存したらすぐに公開されるようにする
• ドラッグ＆ドロップで画像を挿入する
• 投稿済みの記事を修正するには
• 投稿した記事を削除する
• 改行と改段
• 「このページは xfy Blog Editor を利用して作成されました。」という文章が入らないようにする
• 表を作成する
• 記事を公開しないで書きかけにする
• 追記の使い方～本文に書ききれない文章を書く
• 拡張コマンドを使ってみよう～Image Thumbnail for Blog Editorを例に
• 文字のフォント、サイズを設定する
• 作成した記事をブラウザで確認する
• 文字を左寄せ/センタリング/右寄せする
• 箇条書き（番号なしリスト/番号付きリスト）を作成する
• 箇条書き（リスト）を解除する
• 
  このページは xfy Blog Editor を利用して作成されました。

箇条書き（リスト）を解除する

箇条書き（リスト）の作成については、箇条書き（番号なしリスト/番号付きリスト）を作成するを参照してください。ここでは、作成した箇条書きを解除する方法を紹介します。

▼1.解除したい箇条書き中にカーソルを置きます。
▼2.［書式－リスト－解除］を選択します。

▼3.箇条書きが解除され、各項目の1つ1つが独立した段落となります。

このように、箇条書きを解除するときは、箇条書き全体を選択する必要はありません。箇条書き中の任意の位置にカーソルがあれば大丈夫です。また、解除すると、各項目はそれぞれが独立した段落になります。

このページは xfy Blog Editor を利用して作成されました。

箇条書き（番号なしリスト/番号付きリスト）を作成する

xfy Blog Editotで作成できる箇条書き（リスト）には、「番号なしリスト」「番号付きリスト」「説明付きリスト」の3種類があります。ここでは、「番号なしリスト」と「番号付きリスト」の作り方を紹介します。手順は「番号なしリスト」の作り方を示しますが、「番号付きリスト」もクリックするボタンが異なるだけで作り方は共通です（番号なしリストでは［番号なしリスト］ボタン、番号付きリストでは［番号付きリスト］ボタンをクリックします）。

箇条書きの作り方には、2つの方法があります。1つは、箇条書きの設定をしてから、あとで項目を入力していく方法です。もう1つは、項目を先に入力して、あとで箇条書きの設定をする方法です。ここでは、両方の手順を紹介します。

【手順：番号なしリストを作る（後で項目を入力する】

▼1.箇条書きを作成する位置で［Enter］キーほ何回か押し、空の段落をいくつか作っておきます。
▼2.箇条書きを作成する位置にカーソルを置きます。

▼3.ツールバーの［番号なしリスト］ボタンをクリックします。

▼4.カーソル位置に「項目」という文字が追加され、薄紫で表示されます。これは、この箇所に文字が入力できることを示しています。箇条書きの文字を入力します。

▼5.文字を入力したら、入力した文字の末尾で［Enter］キーを押します。

▼6.次の項目が入力できる状態になるので、続けて次の項目を入力します。

▼7.同様の手順を切り返して必要な項目を入力したら、箇条書きの次の段落の位置をクリックするか、カーソルキーを使ってカーソルを次の段落に移動します。

▼8.箇条書きが作成され、次の段落から新しい本文が入力できる状態になりました。

以上が、箇条書きの設定を先に行って、あとから項目を入力する方法です。次に、先に項目を入力し、あとで箇条書きを設定する手順を示します。

【手順：番号なしリストを作る（先に項目を入力する）】

▼1.箇条書きの項目を1段落ごとに入力します。項目を1つ入力したら必ず［Enter］キーを押して改段し、1項目＝1段落とします。

▼2.入力した項目を選択します。ドラッグしても、［Shift］＋カーソルキーで操作してもかまいません。なお、箇条書きは段落単位で設定されるため、必ずしもすべての文字を選択しなくても大丈夫です。選択した範囲に箇条書きにする段落が一部でも含まれていれば、その段落の文字全体が箇条書きになります。

▼3.ツールバーの［番号なしリスト］ボタンをクリックします。

▼4.選択した範囲が箇条書きになります。箇条書きの次の段落の位置をクリックするか、カーソルキーを使ってカーソルを次の段落に移動すれば、次の段落から本文を書けるようになります。

このページは xfy Blog Editor を利用して作成されました。

文字を左寄せ/センタリング/右寄せする

左寄せ

センタリング

右寄せ

こんな具合に、文字を「左寄せ」「センタリング」「右寄せ」することができます。配置を設定したい段落中にカーソルを置き、ツールバーの［左寄せ］［センタリング］［右寄せ］の各ボタンをクリックするか、［書式－文字揃え］でメニューを開いて［左寄せ］［センタリング］［右寄せ］の各コマンドを選択するだけです。

注意するのは、文字揃えされるのは段落単位だということです。段落は［Enter］キーで区切られた範囲です。たとえば、次のようになっているとします。

（文章1）xfy Blog Editorの世界へようこそ！［Shift］+［Enter］キー
（文章2）xfy Blog Editorはワープロ感覚でブログが書ける新感覚のツールです。

この場合、（文章1）と（文章2）は［Shift］+［Enter］キーで区切られている（改行されている）ので、1つの段落となります。このため、文字揃えを実行すると、（文章1）と（文章2）は同じ動きをします。一方、次のように［Enter］キーで区切られている（改段されている）と（文章1）と（文章2）は別々の段落として扱われるので、それぞれに異なる文字揃えを設定することができます。

（文章1）xfy Blog Editorの世界へようこそ！［Enter］キー

（文章2）xfy Blog Editorはワープロ感覚でブログが書ける新感覚のツールです。

このページは xfy Blog Editor を利用して作成されました。

作成した記事をブラウザで確認する

xfy Blog Editerで作成し、［保存/サーバーへ反映］ボタンをクリックして保存した記事は、［Blog－ブラウザで開く］を選択すると、ブラウザを起動して表示を確認できます。ただし、［詳細設定］タブの［公開設定］で［公開］を指定して保存しないと確認することはできません。また、［保存］ボタンでローカルにだけ保存した記事もブラウザで確認することはできません。

なお、いったん公開した記事を編集して［保存/サーバーへ反映］ボタンをクリックした場合は、記事がすぐに公開されますから、［Blog－ブラウザで開く］を選択すると、すぐにブラウザで表示を確認することができます。次は、すでに公開済みの記事を編集し、ブラウザで表示を確認する手順です。

▼1.記事を編集し、［保存/サーバーへ反映］ボタンをクリックして保存します。
▼2.［Blog－ブラウザで開く］を選択します。

▼3.ブラウザが起動して、記事が表示されます。

このページは xfy Blog Editor を利用して作成されました。

文字のフォント、サイズを設定する

メイリオにしてみましたが．．．

文字にフォント、サイズを設定できます。設定方法は、一太郎やワードと同様にも文字を選択してフォントやサイズを選択するだけです。ただし、フォントを設定しても、そのページを見るユーザーの環境に指定したフォントがなければ、指定どおりには表示されない点に注意してください。たとえば、先の文字にはWindows Vistaで採用された「メイリオ」というフォントを設定していますが、メイリオのインストールされていないPC環境では、別のフォント（代替フォント）で表示されることになります。

フォント、サイズの設定手順は次のとおりです。

▼1.フォント、サイズを設定する文字を選択したら、［書式－文字スタイル－フォント･サイズ］を選択します。［フォント･サイズ］ダイアログボックスが開きます。

▼2.［フォント］と［文字サイズ］のチェックボックスをチェックして、［フォント］の［選択］ボタンをクリックします。フォントを選択するダイアログボックスが開きます。

▼3.［フォント］の［▼］をクリックしてフォントを指定します。ここでは、「メイリオ」を指定してみました。
▼4.［代替フォント］では指定したフォントがない場合に代わりに使用するフォントのファミリー名を指定します。「serif」は文字の端にひげが付く明朝系の書体、「sans-serif」はひげがつかないゴシック系の書体、「mosospace」は文字幅がすべて一定の書体を意味しています。これらを指定すると、そのPC環境にある同じ系統の書体が使用されます。
▼5.［フォント］と［代替フォント］を指定したら［OK］ボタンをクリックします。

▼6.もとのダイアログボックスに戻ったら、［文字サイズ］を指定して［OK］ボタンをクリックします。ここでは「20pt」を指定しています。

▼7.フォントと文字サイズが設定されます。

ちなみに、この方法で設定したフォント、文字サイズは、スタイルシート（CSS）によって指定されます。［ソース］タブをクリックしてソースを確認してみると、次のようにインラインのスタイルシートで不穏とと文字サイズが指定されていることが確認できます。

<span style="font-family:'メイリオ',serif; font-size:20.0px;">メイリオにしてみましたが．．．</span>

このページは xfy Blog Editor を利用して作成されました。

拡張コマンドを使ってみよう～Image Thumbnail for Blog Editorを例に

xfy Blog Editorには、ユーザー自身が新しいコマンド（拡張コマンドまたはユーザーコマンド）を開発・追加できるという特徴があります。すでに、たくさんの拡張コマンドが公開されていますが、ここでは、最近公開された「Image Thumbnail for Blog Editor」という拡張コマンドの使い方を紹介します。これは、記事中に画像のサムネイルを挿入し、サムネイルをクリックするとオリジナルの画像が別ウィンドウに表示できるようにする拡張コマンドです。オリジナルのxfy Blog Editorの場合、記事に画像を挿入できるだけなので、この機能は用意されていませんが、Image Thumbnail for Blog Editorを追加することで、xfy Blog Editorでできることが広がるわけです。

なお、拡張コマンドを登録する方法はすべて共通です。このため、試してみたい拡張コマンドがあったら、ここで解説するのと同じ手順でxfy Blog Editorに登録し、試してみてください。Image Thumbnail for Blog Editorを登録する手順は次のとおりです。

▼1.以下のサイトでImage Thumbnail for Blog Editor を適当なフォルダにダウンロードします。なお、ダウンロードするにはxfyフォーラムにログインする必要があります。ユーザー登録していない場合は、登録してからログインする必要があります。

https://www.xfytec.com/community/modules/mydownloads/singlefile.php?cid=58&lid=135

▼2.ダウンロードしたZIPファイルを解凍し、できた「blog-thumbnail.xvcd」というファイルを、xfy Blog Editorがインストールされているフォルダ配下にある「scripts」という名前のフォルダにコピーします。私が使っているWindows Vistaであれば、標準でインストールした場合、次のフォルダになります。

c:\Program Files\JustSystems\xfy Basic Edition\scripts

ここまでで、登録前の準備は完了です。

▼3.xfy Blog Editorを起動したら、恥一覧の画面で［Blog－ユーザーコマンド管理］を選択します。［ユーザーコマンド管理］ダイアログボックスが開きます。

▼4.［登録］ボタンをクリックします。

▼5.［参照］ボタンをクリックします。

▼6.ファイルを指定するダイアログボックスが開くので、「scripts」フォルダにコピーしたスクリプトファイル（blog-thumbnail.xvcd）を指定して［開く］ボタンをクリックします。このように、拡張コマンドを登録するときは、「scripts」フォルダにコピーした拡張子「.xvcd」のファイル（スクリプトファイル）を指定します。

▼7.もとのダイアログボックスに戻ったら、［メニュー名］にコマンドの名前を入力して［OK］ボタンをクリックしのます。ここでは「Image Thumnail」と入力します。

▼8.もとのダイアログボックスに戻ると、［ユーザーコマンド一覧］に「Image Thumnail」が追加されたことが確認できます。［閉じる］ボタンをクリックします。

▼9.ここでいったんxfy Blog Editorを再起動します。xfy Blog Editorは、起動するときに拡張コマンドを自分自身に追加します。このため、新たに追加した拡張コマンドを利用するときは、xfy Blog Editorを再起動する必要があるのです。

拡張コマンドの登録は以上です。ここでは、Image Thumbnail for Blog Editorを例にしましたが、その他の拡張コマンドでも、ダウンロードするファイル、解凍でできるファイル（xvcdファイル）が異なるだけで、操作方法は共通です。

次に、登録した拡張コマンド Image Thumbnail for Blog Editorを実際に使ってみましょう。まずは、結果からお見せします。右下の馬の画像が、 Image Thumbnail for Blog Editorで挿入した画像です。サムネイルまたは「Full Size」のリンクをクリックすると、別ウィンドウにオリジナルサイズの画像が表示されます。

[Full Size]

挿入の手順は次のようになります。

▼1.［拡張コマンド－Image Thumbnail］を選択します。［Create Thumnail］ダイアログボックスが開きます。

▼2.このダイアログボックスで画像ファイルを指定します。［URL］の［...］ボタンをクリックし、画像ファイルの一覧から選択してもかまいせんが、このダイアログボックスに画像ファイルをドラッグ＆ドロップしてもかまいません。

▼3.ここでは画像ファイルをダイアログボックスにドラッグ＆ドロップします。

▼4.画像ファイルがセットされたら、［WIDTH］で幅、［HEIGHT］で高さ、［FLOAT］で左右位置（left/right）、［TITLE］でタイトルを指定して［OK］ボタンをクリックします。すると、先のようなサムネイル画像が挿入されます。

拡張コマンドは、xfy Blog Editorの白眉ともいうべき機能です。使用できる拡張コマンドは、次のページに載っていますので、面白そうな拡張コマンドを見つけたら、ダウンロードして試してみてください。

ブログにいろいろ足してます

また、拡張コマンドそのものを開発するための資料としては、たとえば次のようなページがあります。

ユーザーコマンド拡張を使う

さらに詳しい資料は、xfy Communityにありますので、興味を持たれたらアクセスしてみてください。ちなみに私は、拡張コマンドを開発できるほどのスキルはありません。ただ、「もっと面白くて便利な拡張コマンドができたらいいな」とBlog Editorの一ユーザーとして思っています。

このページは xfy Blog Editor を利用して作成されました。

追記の使い方～本文に書ききれない文章を書く

xfy Blog Editorの編集画面では、文章を入力できるエリアが2つあります。１つは「このページは xfy Blog Editor を利用して作成されました。」という文章の前のエリア、そしてもう1つが後ろのエリアです。後ろは「追記」を書くエリアです。「追記」とは、本文に書ききれない内容を書くところです。追記に書いた文章は、「続きを読む～」というリンクとして表示され、リンクをクリックすると、追記の文章が表示されるようになります。というわけで、以降の文章は追記に書いてみますので、続きを読みたい方は、下の「続きを読む～」のリンクをクリックしてくださいませ。

このページは xfy Blog Editor を利用して作成されました。

記事を公開しないで書きかけにする

ブログを始めると、記事を公開するまでにはいたらなくても、タイトルだけ書いておいたり、記事のネタにするメモや素材だけをとりあえず書いておきたいことがあります。方法は2つあります。

1つは［詳細設定］タブの［公開設定］で［未公開（下書き）］を指定して［保存/サーバーへ保存］ボタンをクリックする方法です。この場合、書いた内容はローカルとサーバの両方に保存されますが、公開はされません。したがって、見ることができるのは自分だけです。

もう1つは、ローカルにだけ保存する方法です。xfy Blog Editorは、作成した記事をローカル（つまりあなたのコンピュータのハードディスク）と、サーバ（ブログサービスを提供している会社が管理しているコンピュータ）の2カ所に保存できます。［保存/サーバーへの保存］は、この2カ所（ローカルとサーバー）に保存する機能を持っています。一方、［保存］ボタンはローカルにだけ保存してサーバーには保存しません。ローカルに保存しますので、たとえインターネットに接続していなくても記事を保存しておくことが可能です。この場合は、一太郎などで文書を保存するのとまったく同じ仕組みになります。

したがって、まだ公開したくない記事、書きかけの記事、メモなどは、［保存］ボタンでローカルにだけ保存し、完成したら［保存/サーバーへ保存］ボタンをクリックして、サーバーにも保存するようにするとよいと思います。なお、その場合でも、［詳細設定］タブの［公開設定］で［未公開（下書き）］を指定したままだと公開されたことにはなりません。［公開設定］を［公開］にして、はじめてインターネット上の不特定多数のユーザーの目に触れることになります。

このページは xfy Blog Editor を利用して作成されました。

表を作成する

xfy Blog Editorを使うと、↓このような表が簡単に作成できます。

	定価	部数
一太郎2007のすべて	1680	30000
花子2007のすべて	1680	25000
三四郎2007のすべて	1680	20000

手順は次のようになります。

▼1.表を挿入したい位置にカーソルを置いたら、ツールバーの［表挿入］ボタンをクリックします。または、［表－表の挿入］を選択します。［表の挿入］ダイアログボックスが表示されます。

▼2.［行数］と［列数］を指定して［OK］ボタンをクリックします。

▼3.カーソル位置に表が挿入されます。

▼4.表のセルに文字や数値を入力していきます。なお、文字を入力してもセル（列）の幅は自動的に広がりませんが、ここでは気にする必要はありません。

▼5.セルの幅（列の幅）を変更するには、縦線を直接ドラッグします。ここでは、「一太郎のすべて」と入力したセルの右側のセルを右方向にドラッグしています。

▼6.セルの幅が広がりました。特定のセルだけでなく、列の幅全体が広がった点に注目してください。

▼7.同様にして文字や数値を入力し、セル幅（列幅）をドラッグで調整して表を完成させます。なお、入力するセルを変更するには、セルを直接クリックしてもかまいませんし、次のキーも便利です。
次のセル：［Tab］キー
前のセル：［Shift］+［Tab］キー

このページは xfy Blog Editor を利用して作成されました。

「このページは xfy Blog Editor を利用して作成されました。」という文章が入らないようにする

xfy Blog Editorで記事を作成すると、初期設定では記事の末尾に「このページは xfy Blog Editor を利用して作成されました。」という文章が入ります。この文章を入れたくない場合は、直接削除してかまいません。また、新規記事の作成直後にこの文章を入れたくない場合は、次のように設定します。

▼1.記事一覧の画面で［ブログ－オプション］を選択します。［オプション］ダイアログボックスが開きます。

▼2.［xfy Blog Editorページへのリンクの挿入］で［しない］を指定して［OK］をクリックします。

▼3.［エントリーの追加］ボタンをクリックして新規記事の作成画面を表示してみましょう。

▼4.「このページは xfy Blog Editor を利用して作成されました。」という文章が入らなくなります。

でも、せっかくxfy Blog Editorで書いているなら、この文章は入れておいた方がいいかもしれません。Googleなどで「このページは xfy Blog Editor を利用して作成されました。」という文章で検索すると、xfy Blog Editorで書かれたブログを検索することができたりしますので．．．

このページは xfy Blog Editor を利用して作成されました。

改行と改段

xfy Blog Editorでは、［Enter］キーを押すと改段になります。改段すると、その前にある文章全体が<p>～</p>で囲まれて1つの段落となります。

［Shift］+［Enter］キーを押すと改行になります。改行すると、その位置に<br/>タグが挿入されます。

このページは xfy Blog Editor を利用して作成されました。

投稿した記事を削除する

xfy Blog Editorでは、投稿した記事をいつでも削除できます。手順は次のとおりです。

▼1.記事一覧で削除したい記事の［削除］ボタンをクリックします。

▼2.確認のメッセージが表示されたら［はい］ボタンをクリックします。これで、サーバ/ローカルともに記事が削除されます。

このページは xfy Blog Editor を利用して作成されました。

投稿済みの記事を修正するには

ブログの記事は、投稿したあとで自由に修正することができます。書きかけで保存した記事の続きを書く場合も、ここの操作で記事を呼び出して編集することになります。手順は次のとおりです。

▼1.xfy Blog Editorを起動したら、記事一覧で修正したい記事の［編集］ボタンをクリックします。

▼2.記事が読み込まれ、編集できる状態になります。

▼3.文章を変更したり、画像を追加するなどして記事を修正します。

▼4.［保存/サーバーへ保存］ボタンをクリックします。これで、ローカルとサーバーに記事が保存されます。なお、［保存］ボタンをクリックした場合は、ローカルにのみ保存してサーバーには保存されません。

このページは xfy Blog Editor を利用して作成されました。

ドラッグ＆ドロップで画像を挿入する

画像はドラッグ＆ドロップでも挿入できます。百聞は一見にしかず、ということでドラッグ＆ドロップで挿入する操作は↓のようになります。

このページは xfy Blog Editor を利用して作成されました。

記事を保存したらすぐに公開されるようにする

xfy Blog Editorの初期設定では、保存した記事はすぐに公開されず、下書き状態となります。このため、記事を書いて［保存/サーバーへ保存］ボタンをクリックすると、以下のようなメッセージが表示されます。

公開状態で保存するためには、［はい］ボタンでメッセージを閉じ、［詳細設定］タブに切り替えて［公開設定］を［公開］にしてから、もう一度［保存/サーバーへ保存］ボタンをクリックする必要があります。いったん公開にすると、xfy Blog Editor側で下書き状態に戻せないため、初期設定が［未公開（下書き）］になっていると考えられますが、中にはすぐに公開された法が都合がよい、という方もいると思います。以下のように設定すれば、［保存/サーバーへ保存］ボタンをクリックしたとき、公開状態で保存されます。

▼1.［Blog－オプション］を選択します。

▼2.［公開設定］で［公開］を指定して［OK］ボタンをクリックします。


このページは xfy Blog Editor を利用して作成されました。

画像を挿入する

↑こんなふうに画像を挿入するには、次のように操作します。

▼1.画像を挿入する位置にカーソルを置いたら、［挿入－画像］を選択します。［画像の挿入］ダイアログが開きます。

▼2.［URL］の［参照］ボタンをクリックします。［画像の選択］ダイアログが開きます。

▼3.画像ファイルを選択して［開く］ボタンをクリックします。

▼4.元のダイアログに戻ったら、そのまま［OK］ボタンをクリックします。

▼5.画像が挿入されました。クリックして選択します。

▼6.画像の右下にマウスポインタを合わせ、□マークをドラッグしてサイズを変更します。四隅の□をドラッグすれば、縦横比を保ったままサイズ変更できます。

▼7.ドラッグしたらボタンを離します。

▼8.サイズが変更されました。画像の外をクリックして選択を解除します。

▼9.はい、完成。(=^..^=)ミャー

このページは xfy Blog Editor を利用して作成されました。

ブログと同じデザインで記事が書けるようにする（テンプレートの作成）

xfy Blog Editorの初期設定では、Movable Typeの初期設定で使用されるデザインで記事を書くことができます。自分のブログのデザインをxfy Blog Editorの編集画面にも反映するには、サーバ側で設定されているのと同じテンプレート（HTMLファイルやスタイルシートのテンプレート）をxfy Blog Editor側（つまりローカル）にも用意する必要があります。手動で用意することもできますが、けっこう面倒。しかし、xfy Blog Editorが対応しているブログサービスであれは、簡単な操作でサーバ側のテンプレートをローカルにコピーし、ブログの記事と同じデザイン画面で記事を書いたり編集したりできるようになります。ここでは、ジャストブログを例に、その手順を紹介しましょう。

▼1.記事一覧の画面でジャストブログのサーバを選択したら、［Blog－Blogページからテンプレート作成］を選択します。［Blogページからテンプレート作成］ダイアログが開きます。

▼2.［Blog URL］に自分のブログのURLが設定されていることを確認し、［OK］ボタンをクリックします。なお、テンプレートを作成するには、最低1つは記事が投稿されている必要があります。

▼3.必要なファイルのダウンロードがスタートします。

▼4.ダウンロードが完了すると、［編集領域の設定］ダイアログが開きます。ここでは、タイトルエリア、本文エリア、追記エリアの設定を行います。「ここにタイトル」「ここに本文」「ここに追記」と書かれた部分が、タイトル、本文、追記のエリアと一致していない場合は、ここで修正します。ジャストブログの場合、正しく設定されるはずですから、通常はそのまま［OK］をクリックして大丈夫です。

▼5.記事の一覧に戻ったら、［エントリの追加］ボタンをクリックして編集画面を開いてみましょう。

▼6.これが編集画面です。本ブログの「How to xfy Blog Editor」のデザインそのままで、記事を書けることがわかると思います。

▼本記事を書いている途中のxfy Blog Editorの画面を、一部拡大したところです。デザインそのままで書けるので、アップしたときのイメージもつかみやすくなります。

このページは xfy Blog Editor を利用して作成されました。

新しい記事を投稿する

新しい記事を投稿する手順は次のとおりです。

▼1.xfy Blog Editor起動直後の記事一覧画面で、［エントリーの追加］ボタンをクリックします。

▼2.記事の作成画面に切り替わります。初期設定では、↓このようなデザインとなります。

▼3.「ここにタイトル」と書かれた箇所に記事のタイトル、その下の点線で囲まれた箇所に本文を入力します。それ以外の箇所は編集できません。
▼4.記事を書いたら［詳細設定］タブに切り替えます。

▼5.カテゴリーを選択します。右側で選択して［追加］ボタンをクリックして指定してください。
▼6.［公開設定］を指定します。初期設定では［未公開（下書き）］が指定されていますので、すぐに公開する場合は［公開］を指定します。なお、いったん［公開］にして投稿した場合は、xfy Blog Editorで［未公開（下書き）］に設定を変更しても未公開状態には戻せないので注意してください。ここでは［公開］を指定しましょう。

▼7.その他の［キーワード］や［トラックバック送信］などを必要に応じて設定したら、［保存/サーバーへ反映］ボタンをクリックします。これで、サーバとローカルに同時に保存が行われます。
▼8.保存が終わったら［一覧へ戻る］ボタンをクリックします。

▼9.記事一覧に保存した記事が追加されます。作業を終了するなら、［ファイル］－［終了］でxfy Blog Editorを終了できます。各記事右端にある［編集］ボタンをクリックすれば、再び記事を編集することができます。

このページは xfy Blog Editor を利用して作成されました。

ハイパーリンクを設定する

リンクを挿入するには、次のように操作します。ここでは、「ジャストブログ」という文字列に「http://www.justblog.jp/」を設定する例を紹介します。

▼1.ハイパーリンクを設定する文字列を選択したら、［挿入］－［ハイパーリンク］を選択します。［ハイパーリンクの挿入］ダイアログが開きます。

▼2.［URL］にリンク先ページのURLを入力します。URLをクリップボードにコピーし、［Ctrl］+［V］キーで貼り付けると簡単です。

▼3.ハイパーリンクが設定されます。設定した文字列にマウスポインタを合わせると、ステータスバーにリンク先のURLが表示されます。

実際に、次のリンクは上記の操作で設定しました。同じ方法で画像にも設定できます。

ジャストブログがスタートしました。

このページは xfy Blog Editor を利用して作成されました。

ブログサービスを登録する

xfy Blog Editorで記事を投稿・管理するためには、まず利用しているブログサービスをxfy Blog Editorに登録する必要があります。xfy Blog Editorは、さまざまなブログサービスに対応していますが、ジャストブログであれば、一覧から「ジャストブログ」を選択するだけで登録することができます。ここでは、ジャストブログを登録する手順を解説します。

▼1.記事一覧の画面で［Blog－Blogサービスの管理］を選択します。

▼2.［追加］ボタンをクリックします。

▼3.［種類］で登録するブログサービスを選択して［次へ］ボタンをクリックします。ジャストブログなら「ジャストシステムブログサービス」を選択すればOKです。

▼4.ブログを作成するとき指定してログイン名とパスワードを設定して［完了］ボタンをクリックします。「ジャストシステムブログサービス」の場合は［エンドポイントは設定する必要はありません。］

▼5.［登録サービス一覧］に「http://app.justblog.jp/api」と表示されていることを確認して［OK］ボタンをクリックします。なお、「http://app.justblog.jp/api」が選択されているときは、下の［選択したサービスのblog］にはジャストブログで作成した自分のブログのタイトルが表示されます。

▼.6.これで準備完了です。新しい記事を投稿するには、［エントリーの追加］ボタンをクリックします。

なお、「ジャストブログ」以外のブロググサービスの登録方法は、以下のページに詳しく載っています。

https://www.xfytec.com/community/modules/news/article.php?storyid=104

このページは xfy Blog Editor を利用して作成されました。

まずは一発目

てすとです～