電子絵日記の作り方

 

用意するもの

  1. パソコン、またはスマートフォン。
  2. テキストエディタとテキストファイルの作り方の知識。
  3. 画像編集ソフトとその扱い方。
  4. HTMLのちょっとした知識。
  5. プログラムを動作させるローカル環境。
  6. 記事(プログラム)を公開する環境。

 

補足説明

パソコンやスマホはインターネットにつながっている必要があります。テキストエディタは単機能のもので十分です。

HTMLについては《プログラミングの初歩1》などの記事を参照してください。

プログラムを動作させるローカル環境とは記事を公開する前に、自前のパソコンだけで試しに実行させる環境であり、ごく一般的なパソコンならば、暗黙のうちにこの環境にあります。

まずはローカル環境で絵日記を作成することが最初の目標です。

最後に世界中の多くの人に読んでもらうためには、記事を公開しなければなりません。公開サーバーにアップロードすることです。

学校など投稿を受け付けているサイトにアップします。SNSを運用するための十分な知識が得られたら自分のホームページを持ちましょう。



望んでもいないのにやたらと広告がつくことに抵抗がなければ、上に挙げた無料のブログやホームページを運営することができます。

そこには壁にぶち当たっても難題を自ら解決する力と意欲が要求されます。

解決策はほとんどネット上にありますが最適解を見つけるまでには地道な努力が必要です。

まずは高いハードルは見送り、徐々に力を養いましょう。

 

具体的な作成手順

  1. 絵日記の原稿用紙を作る。用紙の上部にはヘッダー領域、次に絵を載せる領域を用意する。最後に本文領域とする。日本語の絵日記ならば上図のように縦書きが多く、最上部に絵日記画像、その下右にヘッダー、左側に縦書きの本文が定番ですが、縦書きは初心者にとってハードルが高く今回は、見栄えよりも作りやすさを重要視して横書きにする。

    紙媒体の原稿用紙は単色が割安になるが、電子媒体は色付きでも変わりないのでお祭り騒ぎのような色は避けながら落ち着いた色を選択する。



    上の画像はWindowsに付属しているペイントで作成。

  2. 絵日記画像を作る。お絵かきソフトなどで手書きする雰囲気で作れれば最高。絵日記作品をコンクールなどに出品する場合はおすすめできないが、そうでなければ著作権フリーなカット集などから実際に体験した内容と似た画像を確保することも可能。
  3. 絵日記の文章を作成する。テキストに絵文字(📖)を入れてインパクトを付けることもできる。
  4. 上から、日付、絵日記画像、本文の順に配置されるようにposition absolute属性を利用して調整する。
  5. ローカル環境で動作を確認する。
  6. 記事を公開する。

 

動作例

  1. 家族四人で花火大会に出かける日の朝の情景を日記にした。
  2. そのほか、花火大会会場への道すがら峠の茶店における一家団欒を付け加えた。

電子絵日記のサンプル-01

8月11日(土) 快晴
お盆前に、おとうさん、おかあさん、ぼく、いもうとの四人で花火大会に出かけてきました。その日は早起きして、近くの広場でラジオ体操に参加し、となりのおねえちゃんからハンコを押してもらいました。

途中、峠の茶店によって、いもうととぼくはかき氷、おとうさんとおかあさんはところてんを食べました。

 

サンプルコード

<html>
<head>
<style type="text/css">
.figure {
	background-image: url("https://aidesign.lolipop.jp/wp-content/uploads/2018/07/enikki-82.png");	/* 絵日記原稿用紙 */
	width:  450px;													/* 縦横を原寸に */
	height: 633px;													/* 縦横を原寸に */
	font-size:26px;													/* フォントサイズ */
}
</style>
</head>
<body>
<span style="font-size:32px">電子絵日記のサンプル-01</span>
<Div style="position:relative;">
<div class="figure"><span id="mdy" style="position:absolute; left:150px; top:29px;">8月11日(土) 快晴</span></div>
<img style="position:absolute; left:65px; top:75px; width:320px; height:240px" src="https://aidesign.lolipop.jp/wp-content/uploads/2017/08/enikki5.png">
<div style="position:absolute; left:22px; top:330px; width:408px; height:270px; border:0px solid blueviolet; font-size:21px;"><span>お盆前に、おとうさん、おかあさん、ぼく、いもうとの四人で花火大会に出かけてきました。その日は早起きして、近くの広場でラジオ体操に参加し、となりのおねえちゃんからハンコを押してもらいました。</span>
<p>途中、峠の茶店によって、いもうととぼくはかき氷、おとうさんとおかあさんはところてんを食べました。</p>
</div>
</Div>
</body>
</html>

 

さいごに

事を仕上げるには階段を上るように一段ずつ進めることが大切です。絵日記を書いたり、ブログを始めるにも周辺の知識を吸収することが必要です。

img要素とは

HTML文書の本文に画像を表示させたい場合は、「img要素」を使います。img要素は、imgタグを使って、下のように書きます。

<img src=”URL” width=”幅” height=”高さ” alt=”代替テキスト”>

 

テキストエディタによるテキストの編集に加えて、簡単な画像を扱えるようになると記事が華やかになります。画像の扱い方を習得しましょう。

 

コメントを残す

下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください