プレイ日記制作の手順(htmlエディタ編)

htmlエディタで行う、プレイ日記の制作手順の一例を載せておきます。
今回は、alphaEDITというフリーソフトを使用したhtmlの編集になります。htmlエディタは他にもあるのですが、今回は操作が分かりやすいこちらを例に、制作の手順を書いていきます。
※タグなどの説明は省略しました。

用意するもの

  • プレイ日記化する文章
  • リサイズ・加工・修正した画像
  • alphaEDIT
  • このサイトでダウンロードできるテンプレート

①html編集の前の準備なのですが、htmlファイルを送るときはあらかじめフォルダを作って、その中にhtmlと画像を入れておきましょう。

tejunhtmljunbi

フォルダ内の画像を指定してhtmlに読み込ませましょう。間違ってマイピクチャの画像を指定して、送った後に画像が無かった…なんてことを防ぐためです。
また、画像は一度指定したらファイル名やフォルダの階層などを変えないでください。変えた場合は再度指定しなおしてください。

②まず、テンプレートをalphaEDITで開いてください。
ファイルメニューから「開く」でファイルを読み込むことができます。

tejunhtml1

中央寄せ、背景色が黒、文字色がグレーのhtmlファイルが開かれました。
なお、今回は画像キャプチャを撮る関係でalphaEDITのサイズを小さくしていますが、使いやすいサイズにして起動していただいて構いません。

③次に、事前に用意した文章をコピーしてペーストします。
文章の一例です。テキストエディタではなく、ワードや一太郎で用意しても大丈夫です。

tejunhtml2

このように、事前に改行を入れたり、画像を配置する箇所に印をつけておくと、後々の編集が楽になります。
この文章を、alphaEDITの※この行に本文を挿入してください。の箇所にペーストします。

tejunhtml3

この段階で、プレイ日記っぽくなりましたね。
直接※この行に本文を挿入してください。の箇所に文章を入力していくことも可能ですが、後々文章の構成を直すことを考えると、事前に文章を用意しておく方が無難です。

また、テンプレートを開いた段階で、htmlファイルを別名保存しましょう。テンプレートを直接編集してしまうと、次回以降使えなくなります。
それから、ファイルメニューの「ページのプロパティ」より、htmlのタイトルを決めることが出来ます。たとえばプレイ日記第279弾であれば、

プレイ日記 SDガンダム・ブダペスト ガードリーダーは約束を守る男

というタイトルがついています。タイトルはわざわざつけなくても問題ありませんが、余裕がある人はちょっと笑えるような面白いタイトルをつけましょう。

④次に、画像となっている箇所に、画像を挿入します。
画像となっている箇所を選択しておいて、挿入メニューから画像を選択してください。

tejunhtml4

画像サイズなども指定できますが、事前に適切なサイズに編集した画像を用意し、alphaEDIT側で画像サイズを指定しないようにしてください。
挿入する画像を選んだら、「OK」をクリックします。

tejunhtml5

このように、画像が挿入されました。

⑤最後に、フォントサイズ、フォントカラーを指定します。
どちらも画面上部のバーか書式メニューから編集可能です。

tejunhtml6

⑥以上で完成です。完成例はこちらになります。

今回の手順はあくまで一例です。より簡単にhtmlを作れるフリーソフトがあるかもしれませんし、有料のソフトであればもっと簡単に制作できるはずです。
色々と試して、自分に合ったやり方を見つけてください。

また、alphaEDITには3種類の画面があります。

tejunhtml7

WYSIWYG(ウィシウィグ。What You See Is What You Getの略で、見た目通りのまま編集ができる機能)と、htmlソース、そしてプレビューです。
WYSIWYGが、今まで説明した画面になります。ホームページの画面通りに編集ができる画面です。また、プレビューは、名前の通り編集したhtmlのプレビュー画面になります。
htmlソースは、ソースを直接編集することができます。つまり、テキストエディタで編集するように、タグを一つ一つ挿入・修正していくことが可能です。
ホームページビルダーやDreamweaverなど、大抵のWYSIWYGでの編集に対応しているhtmlエディタには、ソースを直接編集する機能が備わっています。
alphaEDITでの制作に慣れたら、htmlソース画面での編集、あるいはテキストエディタによるhtml制作にトライするのもオススメです。

戻る