今回はサイト作成の練習として
パソコンのチュートリアルサイトを
作って公開してみようと思います。
完成品は下記の URL で体験できます。
パソコンのチュートリアルサイト
スマートフォンのチュートリアルサイト
自分のホームページや SNS で活動している人は
ネタとして一緒にパソコンのチュートリアルサイトを作ってみませんか？
これから作り方を説明していきます。
サイトを作る
まずはサイトを作っていこうと思います。
基本的には「テキスト」「説明画像」「次へ前へボタン」の
3個を各ページに配置したいと思います。
下記のソースを編集して
自分なりのパソコンのチュートリアルサイトを
作ってみて下さい。
下記のソースを改変するだけなら
html の初歩の知識だけで作成する事が出来ます。
10 ページ以上作ると良いと思います。
まずは page1.html から page10.html まで作ってみましょう。
<html>
<head>
<title>パソコンのチュートリアルサイト | 会社名</title>
<meta name="description" content="パソコンのチュートリアルサイトです。"/>
</head>
<body>
エクスプローラーというアプリを開こう</br></br>
これから</br>・エクスプローラーというアプリを習得する。</br>・ブラウザで検索できるようになる</br>という流れを目指します。</br></br>まずはエクスプローラーというアプリについて習得します。</br>まずは画面の一番下のバーのフォルダのアイコンを左クリックします。</br>するとエクスプローラーが起動します</br>
<img src="page2_image.png" alt="説明画像" width="600" height="350">
</br></br>
<a href="page1.html"><< 前へ</a> <a href="page3.html">次へ >></a>
<script>
</script>
</body>
</html>
今回はサイト作成の体験のため、
スクリーンショットをペイントで編集して説明画像を作り、
html ファイルをメモ帳で編集する事を推奨します。
エクスプローラーとペイントとメモ帳を使うことが出来るならば
この項目はクリアできます。
作ったサイトは一旦ブラウザで確認しましょう。
GitHub にアップロードする
次に作ったパソコンのチュートリアルサイトを
GitHub に公開します。
皆が使えるようにする
次に皆が使えるようにしましょう。
下記の参考サイトの
5. ページの公開
の部分を参考にして
他の人が使える状態にしましょう。
ReadMe にはサイトの URL を載せて
説明用の文章も URL 付きで載せておくと良いでしょう。
URL は page1.html の URL を載せます。
宣伝しよう
次に自分の所有している
ホームページや SNS で
作ったサイトを URL 付きで宣伝しましょう。
パソコンのチュートリアルサイトを作るのは
ホームページや SNS のネタとして
面白い部類だと思います。
以上パソコンのチュートリアルサイトの
作り方を紹介しました。
サイト作成をした事が無い人にこそ
この体験をして頂きたいと考えております。
パソコンのチュートリアルサイトではなく
スマートフォンのチュートリアルサイトでも構いません。
とにかく作成する事が大切と考えております。
あなたの作成したチュートリアルサイトが
パソコンやスマートフォンを使える人を
増やすきっかけになるかもしれません。
それは素晴らしい事ではありませんか？
この記事を見て
サイト作成に挑戦頂けたならば
これ以上嬉しい事はありません。
この記事が皆さんのサイト作成をする
きっかけになれますように。
閲覧ありがとうございました。
余談
この記事を見てスマートフォンの
チュートリアルサイトを作成した方は
是非コメント下さい。
内容が良ければ母に使ってもらいます。
自分でも作るつもりではいますが
私は良質なスマートフォンのチュートリアルサイトを
切望しています。
これは愚痴になってしまいますが
スマートフォンは操作が難しい割に
操作方法について検索したとしても
順番にみる事である程度操作できるようになるようなサイトは
見つかりませんでした。
私のこの記事の
「テキスト」「紹介画像」「次へ前へボタン」の形式でいいので
そんなサイトが増えて欲しいと切望しているのです。
操作が難しいスマートフォンの
説明ページは絶対に需要があると思っていますし、
何より作るのが簡単な部類のハズなのです。
説明ページで最も大事なのは
サイト作成の技術ではありません。
あなたの説明力のハズです。
何卒よろしくお願いします。
スマートフォンのサイトを作る場合は
下記のコードを改変する事を推奨します。
<html>
<head>
<title>スマートフォンのチュートリアルサイト | 会社名</title>
<meta name="description" content="スマートフォンのチュートリアルサイトです。"/>
<style>
html {
font-size: 200%;
}
</style>
</head>
<body>
タッチを習得しよう</br></br>
タッチは指を一瞬触って</br>すぐに指を離す作業を言います。</br></br>
<img src="page2_image.png" alt="説明画像" width="600" height="350"></br></br>
<a href="page1.html"><< 前へ</a> <a href="page3.html">次へ >></a>
<script>
</script>
</body>
</html>