ブログデザインを一新しました！

どうも！携帯のキャリアをMNPで切り替えようとして失敗し、現在電話ができません（泣）どうも、サンドマンです。

さて、今回は小ネタを一つ。

数日前より準備を進め、本サイトのデザインを一新いたしました！

まあまあ、企業のそれっぽいデザインに近づいたと思う。

近頃、僕らのガレージの活動も盛り上がりを見せてきており（ありがとうございます！）、WebサイトやSNSを見た方からの問い合わせもちょいちょい増えてきました。

そういった方に、この「僕らのガレージ」がどういったところかを知っていただき、「一度足を運んでみよう！」を思っていただくきっかけとして、本サイトの充実は必要不可欠だな、と以前より感じていたわけです。

その一環として、デザインを一新し、見やすくしました！（自粛中にできること、ですね）また、利用案内ページを新設し、「ガレージに行きたい人・見たい人」がまずどうしたらいいのか、わかるようにしました！

（機材紹介やプロジェクトなど、工事中の他ページも順次更新してまいります。）

このWebサイトは、GoogleのBloggerというプラットフォームで作っています。

プログラミングの知識がなくとも、簡単にブログが作れるようにデフォルトの「テーマ」がいくつか用意されているのですが、凝ったページを作るにはいろいろ不足しています。。。

そこで、外部で配布されているBlogger用のテーマを探し、見つけたのがSimplify2というテーマでした。

これの良さは、まるで企業のサイトではないか？というそれっぽさだけでなく、「レスポンシブ」なデザインであるということです。つまり、見る人の画面・ウィンドウサイズに合わせて、見やすいようにレイアウトを崩さず変えてくれるデザインなわけです。PC・スマホどちらでも見やすくなりました！

このデザインをBloggerに適用するには、ダウンロードしたテーマのxmlファイルを、bloggerの編集画面にインポートすればOKです。しかし、デザインの細かい変更がしたい時には、xmlファイルの中身をいじる必要があります・・・

Bloggerの編集画面でもできますが、使いづらいので自分のPCにVisual Studio Codeをインストールし、xmlファイルを編集！（普通のテキストエディタではなぜか開かなかった・・・）

何これ2500行以上あるよ・・・（泣）

変更すべき箇所として、

などがあります。様々なブログ（「ぷろぐらまー」、「初心者が書き残すBloggerカスタマイズ」など）を参考に編集していきました。

さらに、一部、色やサイズを変更したいところもあり。。。そんな時は変更したい箇所がxmlのどこに記述されているのか探す必要があります。その際には、編集中のブログをwebで表示させた状態で、webブラウザの「開発者ツール」を使い手がかりを探っていきます。

Chromeの「デベロッパーツール」。

サイト上の部品がソースコードのどの部分なのかを探していく。

ちょっと知っている方に説明すると、色やサイズなどの情報は、「スタイルシート(CSS)」に格納されているので、各パーツがCSS中で記載されているどのクラス（class）に対応しているかわかれば、手がかりになりそうです。（もっと楽な方法があるかもですが・・・）

手がかりを見つけたら、xml内のスタイルシート記載エリア（<style>〜</style>）より目的の箇所を見つけ、手直しするだけです・・・

テンプレートから、それっぽいサイトにするのに10時間くらいかけてしまいました・・・

今回のデザイン変更のこだわりをちょっとだけご紹介します！

タイトル画像は元のデザインでも使われていたものを流用。さらにサブテーマ「モノづくりのための秘密基地」という文言を追加。

これは、Mr.H氏との雑談の中で、「僕らのガレージ」を端的に表現すると何か？ということを考えた際に出た最良の答えです。

タイトル画像を大きく見せるため、メニューバーの高さも40%増量しました。

また、メニューの背景色も微妙に変えました。この色は、いわゆる「青焼き」の色をイメージしています。

全体的にあえてもう少し「無骨感」を演出したかったのですが、私の技術力不足でそこまでに至りませんでした。。。

メニューバーには「お知らせ」ボタンを作り、イベント予告やその他重要告知などを見られるようになっています。

あと、ものすごく細かいことですが、PCでご覧の方は、タブをご覧ください。

当ガレージのマスコットキャラクター「あんぐりー君」が復活しました（笑）

（あんぐりー君の秘密はこちら。）

広告の位置がおかしい、よくわからない表示が残ってる、など、

まだまだ改善点は残ってますので、今後ちょこちょこ手直ししていきます・・・

など、ご要望あれば、本記事のコメント欄などにどしどしお寄せください！

それでは！

（サンドマン）

2020年5月26日火曜日