トップページ改造で検索がもっと便利に
今回はブログ型からサイト型へとトップページを改造する過程で、見た目だけでなく検索のしやすさにも手を入れました。
モバイル版：検索ボタンを常に右上に固定（既に導入ずみ）
以前、モバイル表示では、ヘッダーを固定するように改造しました。その結果、常に画面右上に検索ボタンが表示されるようになり、どの記事を読んでいてもすぐに検索できるようになっています。「ちょっと別の記事を探したいな」と思ったときも迷わず操作できるはずです。
PC版：検索窓はまだサイドバーだけ
一方で、PC版では検索窓はヘッダーには固定されていません。現在は記事一覧や各記事ページのサイドバーに表示される仕組みです。もしPC版でも、モバイルと同じようにヘッダー右上に検索ボタンを設置できれば、さらに使いやすくなりそうです。
検索窓をヘッダーに固定するには？
検索窓をヘッダーに固定する方法はウェブ上で色々と見つかります。ただ、多くはPHPコードの編集が必要で、デザイン崩れや他のレイアウトへの予期せぬ影響を受けることも…。このサイトでは「簡単にウェブサイトを“作る”ヒント」をお届けすることをモットーにしているので、複雑なコード沼には入りません。シンプルな工夫で、見た目と操作性を改善していきます。
スキン変更で検索ボタンが設置できた！
PHPコードの編集をしたくない、と模索した検索窓の設置ですが、結論はとてもシンプルでした。Cocoonのスキンを変更するだけで解決したのです。
grayishスキンで見違えるトップページ
試しに「手書き風ノート」から「grayish」スキンに変更してみたところ、トップページの右上にしっかりと検索窓が表示されました。しかも、固定ヘッダーの直下には、以前から参考にしていた「高橋商店」のトップページを思わせるデザイン――無地背景スライドに、装飾文字だけが浮かぶ構成が再現されたのです。さらに画面下部には「Scroll」の文字がスタイリッシュに示されていて、とても印象的な仕上がりになりました。
grayishスキンの魅力
紹介サイト「grayish（グレイッシュ）へようこそ！最初はこの記事から」によれば、このスキンはCocoonの機能を活かしながら、比較的簡単に“サイト型風”ブログを作れることを目指して開発されたとのことです。特徴のひとつが、フロントページのメインビジュアルを画面いっぱいに表示できること。まさに私が探していた「ブログ型のまま、シンプルでサイト風に見えるフロントページ」を実現してくれるスキンでした。ありがたいですね。
9月の作業まとめとこれから
これで9月のウェブサイト改造はひと区切り。10月に入ったら、アメリカ・ポートランド渡航のためにしばらく更新はお休みしますが、帰国後はまた次のステージへ進めていきたいと考えています。
