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

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

サンプルページ

エディターの使い方

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

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

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

注意点など

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

日記エディター

テーマ選択 
 
タイトル
 
 テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト。
 テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト。
 
 テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト。
 
全文選択
入力完了
HTML出力
HTML読み込み

CSSファイルと画像素材

CSSファイル(UTF-8にエンコードされています) Notebook.css(1KB)

背景画像
罫線用ドット画像(サイズ28×38)⇒ 
 
ノート用背景画像
(※他者様の画像を使用している都合上ダウンロードはこのページからではなく、こちらのページにて利用規約を確認の上、ダウンロードするようお願いします)
 
・ヘッダー部分
 
・テキスト部分
 
・フッター部分

なお、エディターのみ別途ダウンロードできます。 ⇒日記エディター ZIPファイル

動作確認: Firefox4.0Chrome11.0IE6-9

横浜のホームページ制作・ネットショップ作成/Studio FIX Inc.