tot編集部のホームページを更新してみよう

2023年春号_vol.47 収録

編集：田山康一

ことの経緯

tot編集部が今まで使ってきたHPは開設から10年近くとなっています。長年使ってきたホームページのテーマが今の活動のやり方に合わなくなってきました。そこで、少数精鋭状態の部員が奮起して新しいテーマを使ってホームページを変えることにしたのです。拙い知識で挑んだ更新記録をやさしい目でどうぞ。

今までのホームページ

ページの上部に、過去の表紙がスライドショーになっていて、ページの左サイドにTwitterがみられる設計です。

最新のお知らせは題名のみの掲載でした。

問題点

メインであるスライドショーにある画像を変更が簡単にできないので最新号の表紙を並べることができないこと、ホームページ閲覧の大きな目的であるバックナンバーが見ずらい問題点がありました。

改良点

Twitterがホームページからみられたのは好評だったのでそれを維持しつつ、スライドショーの内容を簡単に変えることができるようにします。また、バックナンバーを追いやすくすること、さらにお知らせの内容が目立たない問題もあったのでレイアウトを変更してホームページも稼働していることをもっとわかりやすくさせたいと思います。

totホームページの仕様

totではWordPressという無料のホームページ作成ツールを用いてホームページを運営しています。

このWordPressは世界で最も使われていると言われています。

また、オープンソースであることから、様々な拡張機能が提供されているため、自分にあった機能をホームページに追加することができるメリットがあります。

まずは、何をすべきかを確認し何をいつまでにやるのかを明確にさせていきました。今回立てた計画はこちら！（2月5日時点）

必要な機能を決める(2/8)
テーマを決める(2/12)
レイアウトを決める(2/15)
ホームページを作成する(2/23)
さらにほしい機能を追加する(2/25)
セキュリティ対策をする(2/27)
新しいホームページに切り替える(2/28)

1.必要な機能を決める

ホームページのテンプレートにはすでにいくつかの機能が含まれています。それらの機能が自分たちに合ったものなのかを判断しながらテンプレートを選択する必要があります。今回は以下の6つの機能が必要だと考えました。

パソコン版・モバイル版・タブレット版すべてに対応するレスポンシブル機能
過去の表紙を流せるスライドショー機能
SEO機能（検索をしたときに検索結果候補の上位に持ってくることができる機能）
ツイッターのページを表示できるようにレイアウトが左右に分割できる。
なるべく維持コストを下げたいので有料版があって無料版がつかえる。（有料版があるとサービスが終了しにくい特徴があるが、お金を払いたくないという団体の思いもある。）
できれば日本語版の解説

2.テーマを決める

ここでは、ホームページで使うテーマを部員から募集しホームページに適しているものを一つ選択しました。

1.で決めた必要な機能を満たすものを選んでいきます。

あとから気づくのですがここで、ホームページの出来栄え、難易度が決まってきます。

今回、部員にはページのレイアウトを左右に分けられる機能を持っていれば良いということだけを条件に好きなテーマを選んでもらいました。

すると、部員から寄せられたテーマの数は30個。

ここから、条件にあてはまるものを選択して選択肢は10個。

そのうえで、独断と偏見で「Stock Photos」というテーマを選びました。

ちなみに、日本語対応しているものは選択肢にはなかったので英語版で頑張ることにしました。

3.レイアウトを決める

ホームページの構成を決めます。

どのページにどの情報を載せるのか、またどこまで詳しく載せるのかを決めておきます。

今回この部分に関しては、今までのホームページがあるのでそれを参考に決定しました。

タイトル	内容
ホーム	SNS、スライドショー、最新のお知らせ
totについて	ご挨拶、totの説明、メンバー
バックナンバー	PDFファイル
過去のお知らせ	過去のお知らせの一覧
配架場所一覧	キャンパスの地図
コンタクト	コンタクトフォーム

ホームページの構成案

4.ホームページを作成する

いよいよ、ホームページの作成に入ります。

といっても、そのままホームページのテーマを変更して終了というわけにはいきません。

今まで使ってきたテーマには合わないページが出てきてしまうため、その部分を修正する必要があります。

ただ、このまま作成すると修正している自分の拙いパソコン操作を全世界に見せてしまうことになるため、一度ホームページを非公開にするか、新しいテーマのホームページをテストモードで作成するかの2種類の選択をとることができます。

今回は、仮想空間で作成することを選択しました。WordPressのテストモードを使えるように拡張機能をダウンロードし、いざ作成です。

思っていたのと違う、、

一度今のレイアウトで新しいテーマに当てはめたところ、思った以上にぐちゃぐちゃに、、、。

ちなみにこのテーマのホームページには作成例として右のようなものが掲載されていたのですが、なんだか違う。

もっといえば、説明文を読んでもスライドショーの作り方の説明がないことや、文字一つ一つに大きさやフォント、色などを設定する必要があり、とてつもなく面倒くさいことが判明。

ここから一気に計画が崩れることに、、、。

とにかくやるしかない。

ホームページには各機能の設定方法が書かれているため、書かれている部分に関しては、ある程度順調に進めることができます。

背景の設定もテストモードでも画像を入れ込むことができますし、重要ポイントだったTwitterとの連携もスムーズに行うことができました。

若干知らない英単語が出てきたり謎の日本語訳に惑わされつつも背景の設定やローディング画面の設定などいままでできなかった設定がどんどんできるようになりだんだん楽しくなってきました。

しかし、スライドショーの設定方法が見つからずいつまでたってもゴールが見えません。

しかも、無料版では4枚の画像しか設定できないらしい！？

CSSの設定

スライドショーの設定で悩んでいると、CSSというもので設定できることがわかりました。

このCSSとは、テーマに含まれていない機能を自分で追加できる機能のことです。

しかも、機能に合わせていろいろなサイトでCSSの例を出してくれています。

これをコピーアンドペーストすれば問題ないでしょう。

いよいよ完成へ・・・

このような作業を経てできたページがこちら！

未だに完成に至っておらず、新ホームページは5月に公開の予定です。(2023/6/3 公開)

また、何か進展があったら紹介します。

ホームページの更新作業で学んだこと

高校の授業でhtmlを使ってウェブページを作成したことがあるという何も自慢にならない状態でホームページの更新に挑戦してみました。

将来ホームページの更新を行うことになる人へ伝えます。

下準備と勉強は欠かさないように！