ノート風のおしゃれな日記ページを作ろう

　ノートを背景画像にしたおしゃれな日記ページの作成支援エディターを作りました。この背景素材は無料Web素材 Web-Stylish!でフリーで入手したものでそのまま使用しています。このページで作成したテキスト内容はHTMLとして出力できるので、テキスト作成後はそれをパーツとして自分のサイトに貼りつけるだけです。また、この日記部分のレイアウトはCSSで管理していて、サイトに合わせて自由に設定できます。

⇒サンプルページ

エディターの使い方

　エディタのノートの部分をクリックすると、編集用のフォームが現れます。フォームには始めノートに書かれている内容が表示されます。フォームを書きたい内容に変更し、それが終わったら「入力完了」というボタンを押します。ここではまだ、テキストの文字揃えが適用されていません。各々の段落をクリックすると色が反転し、文字揃えのアイコンが表示されるので、段落ごとに文字揃えを行います。

　テキスト内容を保存するには、「HTML出力」ボタンをクリックします。するとフォームの内容がHTML要素に変換されるので、これをコピーしてブログなどの記事に貼りつけます。

　HTMLを再編集したいときは、フォームにHTMLを入力した状態で「HTML読み込み」ボタンをクリックします。するとフォーム内容からHTMLタグが取り払われテキストだけになります。ただし、改行や文字揃えなどの情報がリセットされてしまうので、その部分を修正する必要があります。

注意点など

・背景画像を使っているため横幅の調整はできず、きっかり760pxに固定されます。
・ノート画像の背景部分は透過されていないので、サイトもしくは貼りつける部分の背景色は、画像と同じ#F3EECDにしてください。
・フォームの改行部分に という記号が現れることがありますが、これは要素を空にすると改行として認識されないため、自動的に挿入されたものです。この部分は空白として表示されるので削除の必要はありません。
・ノートの罫線は画像（サイズ28*38）を使っているので、ユーザーが文字サイズを変更するとレイアウトが崩れてしまいます。CSS側で罫線画像をなくして対処することができます。
・このノートの背景画像を使用する場合、ページに提供サイト名とリンクの記載が必要になります。詳細はこちらのページに。