今回はサイトの最終確認を行い、条件を満たしていないところの修正を行った。具体的にはログインリンクがまだ消せていなかったり、フロントページに記事が載っていてしまっていたり、備忘録インデックスがフロントページにブロック化していなかったりしたので、そこの修正を行った。また、資料に書いてあった
<button type="button" onclick="history.back();">
← 元のページに戻る
</button>
をこの備忘録に実装してみた。これを実装することで、記事一覧やカテゴリページなど、どこから記事を開いた場合でも比較的自然に前の画面に戻れるのが利点だと感じた。また、JavaScriptを使うときに、drupalの設定で、bottanが自動的に使用禁止になるので、それを削除したあとにもう一回書き直す必要があった。これは以後も気を付けていきたい
１．内容と目的
私の「知識を共有する」を目的としたウェブサイトでは、閲覧者がサイトを見たときに、どこにどんな関連の記事があるのかが分かりやすくすることを追及している。よって、Bookモジュールを導入し、科目・章のような構造で学習内容を整理できるのかを検証した。
２.導入したモジュール
Bookモジュール
３.検証内容
４.設定した項目
今回はCSSを用いてホームページのデザインをさらに改良した。特にどこを変えたかというと、メニューボタンの色や形、ホバー時の発行エフェクトなどを変更した。ホームページなどのボタンも初期の設定でダサい青色の帯がついていたのでそこを取り除いた。背景については、目標としては、CSSのみで回路基板のような表現ができるかを試してみたが、思ったようにいかず、実現には限界があると感じた。
今回はWebページの見栄えを改善するために、テーマのカスタマイズをCSSを使って行った。今まで、既存のテーマのスライダーを使っていたが、表示する元の画像によって、白い空白ができていて見栄えが悪かった。そこで、CSSを使って、空白をなくす工夫を行った。具体的にはファイルマネージャーに、
.flexslider .slides li {
height: 400px;
overflow: hidden;
}
.flexslider .slides img {
width: 100%;
height: 100%;
object-fit: cover;
}を入力した。すると、切り抜き表示にすることができた。しかし、それでは二枚目のスライド以降が横に黒い空白が生まれてしまったため、元の画像をパノラマ比率にし、よこに画像を設定することで改善した。今後は、見た目のデザインだけでなくユーザーが利用しやすいサイトにすることを心掛けていきたい。
モジュールの導入ということで、今まで記事を書いてきいぇページ同士の関連性が分かりにくいと感じていたので、bookモジュールを導入した。親ページと子ページをせっていすることで、利用者が順番に内容を学べる校正を簡単に作成できることが分かった。
今回の演習を通して、単にページを増やすだけではなく、情報をわかりやすく整理することもWebサイト制作では重要であると感じた。特に、自分が作成している知識をまとめるサイトではJavaやSQLなどの学習を章ごとに分類し、それぞれを関連づけて表示できるため、利用者にとって見やすいサイトになると考えた。
今後はほかのモジュールも導入していきたい
今回の講義では、前回VScodeで作ったHTMLをcssとリンクさせる作業を行った。難しかったことは、フォルダを作る際に、パスがこんがらがってしまって、profile.html にcssファイルをリンクをリンクさせるときにエラーが出てしまったことだ。どこを通っているのかを明確に理解しながらやる必要があると実感した。自分の持っている画像などを使いたいときにこのHTMLの書き方は死ぬほど出ると思うので、もう間違えないようにマスターしたい。
また、画像貼り付けと背景の色を変えることまではできたので、来週も授業までにそれを自分のWebサイトに公開できるようにしたい。
また授業外の環境整備で、備忘録と自分の記事を分けたかったが、見やすく題名が表示されなかったので、ブロックのレイアウトをいじって、「備忘録ビュー」と「得た知識」の二つに分けるようにした。
ホームページのスライドも整えた。
来週の目標は、記事内で閲覧者向けの簡単なクイズを出題できるように、drupalを調整したい。
今回はWebページ作成として、HTMLを使ったプロフィールページの準備を行った。私は今までの学習で、JAVAやSQLを扱うことは多かったが、恥ずかしい話、まだHTMLを書く機会はなかったので、新鮮な体験であり、学びが多かった。
まず、VScodeを使ったことがなかったので、VScodeの使い方を理解した。まず、フォルダを作成し、.htmlの拡張子を使って、ブラウザで内容が確認できるようにした。最初は使い方が分からず、難しかった。
次に、HTMLの基本構造を理解した。HTMLではファイルの先頭にDOCTYPE宣言をし、htmlタグ、headタグ、bodyタグを配置した。headタグは設定情報であり、ブラウザには表示されず、ブラウザに表示される部分はbodyタグの中に記述することを学んだ。この違いは今後htmlを用いるうえで重要だと考える。
そして、今回は自己紹介を表でつくるので、tableタグを使った。<table>,<tbody><tr><th><td>の順番で作成した<th>はタイトルのようなもので<td>はその答えのようなものを記述した。
今回は自分のサイトにあったテーマ選びを行った。配信されていたテーマを１０個近くインストールし、試していたが、なかなか自分の納得できるものはなかった。しかし、試行を繰り返した結果、自分の好きな画像をホームで張り付けられるテーマにたどり着いた。ここまで、行きつくのが非常に難しかった。スライドはいくつか設定できるらしいが、私のテーマは「知識」なので、知識に沿った画像を張り付けられるように試行錯誤を繰り返していきたい。
また、今日行った作業として、ホームとMarkov日記の位置を入れ替えることだ。操作不慣れで、どこから変更すればいいかが戸惑ったが、サイト構築＞メニュー＞メインナビゲーションで入れ替えることができた。今後同様の操作をする際に、忘れないようにこの備忘録に記しておく。
次回の課題は、テーマをもう少し凝ることと、そろそろ備忘録だけではなく、自分の「知識」を発表できるような環境設定をすることを目標とする。
今日の授業では、zoomに置いて行かれて、講義資料との戦いだった。特に、フィルターの条件で、タグを＝備忘録にするのにやり方が分からなくて、時間を浪費した。
講義資料を追えば、サイトの設定をすることはできたが、どの設定がどういう風に機能できているのかがまだ全然わかっていないので、一つ一つ、この学期で理解していきたい。具体的にはインデックスを設定したが、これがサイトのどこに機能しているのを理解するのが難しい。
自分のサイトに合うテーマを探すことを次の授業までの自分の課題としたい。今はこのサイトは自分の得た知識をまとめたサイトを作ろうと思っているので、知的な印象を感じられるようなテーマ選びをしていきたい。
サーバーに入れないなどのトラブルがあったが、講義資料通りに進めていけば、追いつくことができた。
ターミナルの設定が一番難しかったが、大学１年の時にならった、C言語の秀丸と近いものだったので、理解することができた。
サイト名がDrupalのままであるのが謎で、どうやって修正すればいいのかを知りたい。
Copyright 2020· All rights reserved
Designed by Zymphonies