塾のホームページをスマホ対応にしてみた

2022年3月24日 11:28

このたび、知り合いの塾のホームページ(Webサイト)をスマホ対応、いわゆる「レスポンシブWebデザイン」にする手伝いをしたので、その際の内容を記載します。

目標

とにかく以下2点の対応をやりたいと思いすすめました。

スマホ向けのホームページにする、いわゆる「レスポンシブWebデザイン」にする。
旧来のホームページでは、スマホで見るには文字が小さすぎたり、とにかく見ずらいので。
ホームページの上部にメニューを表示する
自分がホームページをみるときに、常にメニューを頼りにしているので。

687円/月 (初期費用：1738円(本代))

中小規模の塾では特に費用が気になるところですが、ランチ代程度で月々維持できます。上記の内訳詳細は以下です

本代： 1738円 (Webなどでも情報は得られるかと思いますが、一冊は手元においたほうがスムーズに進められると思います。私が使用したおすすめ本は後ほど記載します)
レンタルサーバー代：524円/月
独自ドメイン代：1952円/年(一年契約です。月額換算で163円です)

12時間程度 (＝6時間x2日)

私の場合は以下の条件でしたが、6時間x2日程度で、合計12時間程度かかりました。もっとかかるかと思っていたので、比較的簡単にできるんだなと思いました。

私のホームページ作成経験：既存のホームページの内容を編集したことぐらいはありましたが、イチから立ち上げたことなどはありませんでした。サーバーのレンタル経験もありませんでした。
塾のホームページは旧来のパソコン表示向けのものがありました。つまりコンテンツ(文章)はすでにあるため、今回はコンテンツそのものは作成しなおす必要がありませんでした。

とにかく『いちばんやさしいWordPressの教本第5版 5.x対応人気講師が教える本格Webサイトの作り方』に沿って進めれば、一通り出来上がると思います。この本はとにかくわかりやすかったです。何がわかりやすくしていたのか…

この本で特に以下がわかりました：

この本に沿って作成したら、おおむね満足するホームページになったのですが、以下の3点はまず気になり変更しました。

(1)「サイトのタイトル」の文字を大きく
サイトのタイトルはやや大き目にして、目立たせたいと思い、調整しました。
「外観」—>「カスタマイズ」—> 「追加CSS」に以下を追加。

.site-header-logo {
  font-size: 30px; 
}

(2) 本文の文字を大きく
スマホで見るにはだいぶ小さい文字だったので、朝日新聞デジタルのデフォルトの文字の大きさを参考に(朝日新聞はどれぐらいが適当か考えているだろう思い)、調整しました。
「ExUnit」 —> 「CSSカスタマイズ」に以下を設定。

p { font-size: 18px; }

(3) ヘッダーと、フッターの色を変更する
ヘッダーはお好みの色に、フッターは地味めの色に変更したいと思い、以下で変更しました。
「外観」—>「カスタマイズ」—> 「追加CSS」に以下を追加。

.site-header {
    background-color: #E6E6E6;
}

.site-footer {
    background-color: #F6F6F6;
}

以下も気になっているのですが、対応しませんでした。「Lightning G3 Pro Pack」という有料のものを使用すると、これらを容易に対応できそうですが、費用優先で対応しませんでした。

この記事が気に入ったらサポートをしてみませんか？