レンサバ活用例Tipsその他このサイトについて運営者情報お問い合わせプライバシーポリシーレンタルサーバーの始め方レンタルサーバー、ドメイン取得サービス、Webサイト運営、WordPress等の情報をお届けします。Webページを作って公開する」といったこともできます。ここではその手順について説明します。レンタルサーバーにはいくつか種類がありますが、ここでは「共用サーバー」を使った場合を説明します。詳細な説明はしていません。真似してみて、分からないところだけ個別に調べた方が早く覚えられると思います。分からない方は、基礎的なところだけは先に覚えておくことをお勧めします。その際に使えるコンテンツも用意したいと思っています。Webページを作る例を説明します。用意するファイルは以下です。以下のように記述します。</main></body></html>画像の数だけ以下の部分を追加します。width="300"></a>それぞれの属性は以下を参考にしてください。画像ファイルを表示する幅(ホントは、heightも指定した方が良い)FTPクライアントソフト(FileZillaなど)を使って、これらのファイルを同じ階層にアップロードします。Webページ用に新たにディレクトリを作り、そこにアップロードするのがよいと思います。いうディレクトリを作り、そこにアップロードします。Webブラウザからこのディレクトリにアクセスしてみましょう。すると、最初にも載せた画面が表示されるはずです。アクセスしています(アドレスバーを確認してください)。写真画像が並んで表示されています。どれか1つクリックすると、その画像だけが表示されます。Webブラウザのアドレスバーを見ると、この画像ファイルがそのまま表示されていることが分かります。これは、画面が遷移したということです。元の画像一覧ページに戻るには、再度アドレスバーに元のURLを入力してアクセスするか、Webブラウザの「戻る」を使うことになります。この操作はちょっと面倒です。今後は画像をクリックしたら画面の遷移を行うのではなく、そのまま画像が前面に拡大表示されるようにしてみましょう。そのために、JavaScriptのライブラリを使います。用意するファイルは以下となります。ファイルが増えただけです。以下のように記述します。ファイルを読み込んでいます。ファイルパスを指定しています。後で、ここのパスに合うようにディレクトリ名を調整します。画像の数だけ以下の部分を追加します。width="300"></a>それぞれの属性は以下を参考にしてください。1つのグループだと見なしてくれていろいろ便利な動きをしてくれます。Webサイトから、ライブラリをダウンロードします。いうファイルがダウンロードされますので、これを解凍します。いう名前に変更します。JavaScriptファイルへのパスが一致するはずです。ファイルの準備はこれで終わりです。以下のファイルとディレクトリをサーバーにアップロードすることになります。ファイルをサーバーにアップロードします先ほどと同じように、FTPクライアントソフト(FileZillaなど)を使って、こられのファイルを同じ階層にアップロードします。いうディレクトリを作り、そこにアップロードすることにします。Webページにアクセスしますでは、Webブラウザからこのディレクトリにアクセスしてみましょう。見た目は、先ほどと変わりません。左の画像をクリックしてみましょう。先ほどとは違い、画像が手前にズームして表示されました。Webブラウザのアドレスバーも元のままです。これは、画面遷移は起きずに、画像が拡大表示されたということです。ここで、画面右下の×(バツ)をクリックすると画像の拡大表示が元に戻ります。続けて次の画像が見たい場合は、拡大画像の右半分のどこかをクリックします。すると、右隣の画像の拡大表示に切り替わります。これは、右矢印キーを押しても同じです。同様の操作で、3枚目の画像まで進むことができます。逆に、拡大画像の左半分をクリックすると左の画像に移動しますし、左矢印キーでも同様の操作ができます。画像を右クリックして「名前を付けて画像を保存」することもできます。JavaScriptのライブラリを1つ使うだけで、随分と便利になることが分かると思います。レンタルサーバー(共用サーバー)で、パスワード制限を掛ける機能が用意されているので、それを使って特定の人だけに今回のページを公開することもできます。その場合は、レンタルサーバーの管理パネルから行うことになります。Webページを公開する手順について説明しました。JavaScriptのライブラリを使うことで、機能を追加するやり方についても説明しました。CSSのライブラリが多数存在しています。無料で使えるものも多いです。Webページをもっと豪華にしてみるのも面白いと思います。WPプラン」を利用する手順を説明します。サイトの始め方について説明します。無料機能の1つである「WordPress機能」を利用する手順を説明します。