第8回　プロフィールページの完成と記事追加

今回の講義では、前回まで作成していたプロフィールページのHTMLとCSSを引き続き調整し、ページとして完成させる作業を行った。ローカル環境で表示を確認しながら、画像、文字、余白、配色などを修正し、サイト全体の雰囲気に合うように整えた。また、本来はVirtualminを使ってファイルをアップロードする予定だったが、アカウント情報の確認が必要で、今回は一時的にアップロード作業までは行えなかった。

作業の中で難しかった点は、ファイル名やリンク指定の大文字・小文字、さらに余分な空白によって、ページが最初は正常に開かなかったことである。原因を確認するために、HTMLファイル名やリンク先の記述を一つずつ見直し、不要な空白を削除して修正した。今回の経験から、Web制作ではデザインだけでなく、ファイル名やパスの細かい記述も正確に確認する必要があると分かった。

また、新しい記事として、ヨーロッパの観光地であるイタリア・ローマについて紹介する記事を追加した。次回は、Virtualminへのログインを確認し、完成したプロフィールページを正式に公開したい。

第7回　プロフィールページの調整と記事追加

今回の講義では、前回に引き続き、作成したHTMLファイルをサイト上で公開する方法や、ファイルマネージャーへのアップロード、メニューからページへリンクする方法について学んだ。ローカルで作成したページを正しく表示するためには、保存場所やリンク設定を確認することが大切だと分かった。

今回の作業では、先週から進めているプロフィールページのHTMLとCSSの調整を続けた。画像や文字の配置、色の使い方を見直し、サイト全体の雰囲気に合うように修正した。また、新しい記事として、東京の葛西臨海公園について紹介する記事を追加した。

さらに、記事を個別に開いたときに、小魚が動くようなアニメーション効果を加え、海や公園のイメージが伝わりやすくなるよう工夫した。次回は、記事の内容を増やしながら、表示の見やすさも改善していきたい。

第6回　プロフィールページ制作とCSS調整

今回の講義では、Drupalを用いたサイト制作を進めながら、HTMLとCSSによってページの構造やデザインを整える方法について学んだ。Webページを作成する際には、文章や画像をただ配置するだけではなく、見出し、段落、画像、リンクなどを適切に使い、利用者にとって見やすい構成にすることが重要だと分かった。また、CSSを用いることで、色、余白、文字の大きさ、画像の配置などを調整でき、サイト全体の印象を統一できることを理解した。

今回の作業では、プロフィールページの制作を進めた。まず、自分のサイトの雰囲気に合うように、AIを利用して個人イメージ画像を作成し、その画像をプロフィール部分に挿入した。さらに、講義課題の内容に沿って、VS Codeを使いながらHTMLコードを作成し、名前、趣味、星座などの自己紹介情報を整理して表示できるようにした。その後、CSSを用いて背景色や文字色、画像のサイズ、余白などを調整し、ページ全体がかわいらしく統一感のある印象になるよう工夫した。

今回の講義では、Web標準に準拠したページ構成と、CSSを用いたデザイン調整について学んだ。HTMLでは見出しや段落、画像などのタグを適切に使うことで、情報を分かりやすく整理できることを理解した。また、CSSを利用することで、ページの余白や画像サイズを調整でき、サイト全体の見やすさを高められることも学んだ。

今回のサイト更新では、トップページに「About Us」の説明を追加し、このサイトの目的や内容が訪問者に伝わるようにした。また、最初の記事として、東京のおすすめ観光スポットである東京タワーについて紹介する記事を公開した。記事では、東京タワーの魅力やおすすめポイントをまとめ、記事の最後には場所が分かりやすいようにGoogleマップも追加した。

難しかった点は、Googleマップを記事内に挿入する作業である。地図の埋め込みコードを正しく貼り付け、記事の下部に自然に表示されるように調整するのに時間がかかった。また、画像を入れる際にはサイズが大きすぎるとページ全体のバランスが崩れるため、画像の大きさや配置にも注意する必要があった。

今回の講義では、Drupalサイトの管理方法やバックアップの重要性、著作権表示について学んだ。サイトを公開する際には、デザインだけでなく、安全性や使用する画像・文章にも注意する必要があると分かった。

今回のサイト更新では、旅行をテーマにしたインタラクティブな世界地図を追加した。Drupalの本文編集欄にHTMLコードを直接入力し、地図上のラベルをクリックすると、各国の観光地情報やおすすめコメント、Googleマップの情報を確認できるようにした。また、サイト全体のテーマカラーに合わせて、かわいらしいアニメーションや装飾も追加した。

難しかった点は、Drupalでブロックを追加し、世界地図を見やすい位置に配置することである。地図、文章、装飾のバランスを取るのに時間がかかった。今回の作業を通して、Webサイト制作では機能だけでなく、見やすさや操作しやすさも大切だと感じた。次回は、紹介する国や観光地を増やし、さらに使いやすいページにしたい。

　本講義では、Composerを使ってDrupalにモジュールをインストールする方法を学びました。  
具体的には、公式サイトで「Admin Toolbar」のコマンドをコピーし、Virtualminのターミナルで ⁠cd public_html⁠ を実行してからインストールを行いました。

　その後、Drupalの管理画面の「拡張機能」から有効化することで、管理メニューを使いやすいプルダウン形式に変更できました。  
 

　最後に、Virtualminは大学のネットワーク内からしかアクセスできないため、学外からは必ずVPNを利用する必要があることを学びました。今後はこの方法を活用して、サイトに必要な機能を追加していきたいです。