通信研究会のホームページですが、最近になって大きな変化がありました。ブログシステムを採用したということです。

ホームページからのデザイン移植

ブログシステムにははてなブログProを採用しました。主な理由として、豊富なWebGUIとカスタマイズ性、そして、Markdownによる記述が可能であったという点です。Wordpressを構築することも検討しましたが、主に保守性の部分ではてなブログのほうが優れていると判断しました。

で、やはり2-net.jpと一体的に運用するという観点から、はてなブログにデザインを移植するという話になりました。ただ、実際にやっていることは移植というよりも再現に近いものになっています。

以下、2-net.jpをホームページ、blog.2-net.jpをブログといいます。

作成しやすいはてなブログのテーマ

はてなブログのデザインは実は比較的簡単に作れると思っています。

まず、サンプルのテーマがGitHubで提供されているのでこれをクローンします。

このリポジトリには、デザインをリアルタイムでブログでプレビューできるサーバーシステムが含まれています。

なので、いちいちデプロイしなくてもデザインが確認できる！これは非常に助かりました。

ちなみに今回は、テーマストアに公開することもなく、CSSを直接ブログデザインに貼り付けています。一通り修正できたら、テーマの公開も検討しますが、そんなにきれいなものではないので、多分しないかなぁ・・・（ご連絡くれたらソースコードは差し上げます）。

ホームページとブログの大きな違いとして「サイト全体のアーキテクチャ」が自分で決める事ができるかどうかという部分があります。

ホームページの場合、HTML・CSSともに私が作成していますが、ブログの場合、基本的にはブログシステムがアーキテクチャを提供し、私が触ることができるのはCSSによるデザインと一部のカスタムパーツのみとなります。つまり簡単に言えば、自由度は低いというわけです。

なので、ブログではユーザ側が変更できる範囲でカスタマイズして、ホームページに合わせていくという作業が中心となるわけです。これが移植というよりも再現に近いといった理由。実際、100%ホームページを再現することはできませんでした。

一般的にSaaSの形で提供されているブログシステムは自由度が低い事が多いです。ただ、その中でもはてなブログは自由度が高く、デザインも融通が効く方です。

特にスタイルについては、（Proであれば）すべての要素に対して変更を加える事が可能でした。

なので、ホームページの再現自体はそれほど難しくありません。そのままホームページのstyle.cssから、対応する部分にコピペするだけで済むのですから。それで、コンテンツの中身自体は再現することができました。

他方で、かなり困ったのがヘッダーの部分。

以前の戯言でも書きましたが、ホームページにおいてヘッダーの部分は画面の上部に固定されています。ヘッダーには「大阪電気通信大学通信研究会」という文言と、3つほどリンクを掲載しています。

ホームページでは、これらはまとまって<header>というタグで囲まれています。

では、ブログではどうなっているのでしょうか。

はてなブログでは、ヘッダーの部分の内容のカスタマイズについては「タイトル」と「タイトル下」というブロックに分かれて決められています。ただ、残念ながらこれらの２つのブロックはともに独立しています。つまり、ホームページのように一つにまとめてデザインするということができないのです。

ここで問題となったのが、blurの設定。タイトル部分とタイトル下部分にそれぞれblurを適用した場合、blurが分離されてしまいました。

結果としてどのような対策を講じたのかというと、タイトル部分の背景をタイトル下の部分までカバーできるようにして、その上にタイトル下のコンテンツを重ねました。こうすることで、ホームページの表示自体は再現できたと思います。

このブログに合わせてホームページも変更した部分もあります。フッター部分です。

フッターはこれまで、帯型のフッターを採用していましたが、これを廃止し、他のコンテンツと合わせて島型のフッターに変更しました。

これに合わせて、以前お伝えしていた「フッターが浮く問題」は意図的に再発するようにしました。島型に変更したことによって浮いていても気にならなくなりましたしね。

ということで、ひとまずデザインの再現が完了。

この先は、ブログで使えそうなスタイルを順次追加していく予定です。どうしていくかはお楽しみに。ということでほなまた。

西田（総合情報学部情報学科 2021年入学）

通信研究会OB。当ホームページの保守運用を支援しています。組み込み系のソフトウェアエンジニア。応用情報技術者・修習技術者。