はてなグループのHTMLやCSSの整理、改善を行いました(主に開発者向け)
本日はてなグループのHTMLや基本的なCSSの記述を行っているbase.css、Hatena2系テーマを変更し、HTML構造の改善や不具合の解消を行いました。
Hatena2系テーマ更新
Hatena2-blackやHatena2-pinkなど、Hatena2系のテーマを更新し、掲示板やあしか、トピックツリーなどグループ本体のページで、これまでレイアウトが崩れていた箇所を修正し、指定をしていなかった箇所にも新たにCSSの記述を追加して、グループ全体できれいに表示されるようになりました。
各機能ごとにHTMLのbodyタグにidを指定しました
これにより、トップページ(#hatena-group-top)や掲示板(#hatena-group-bbs)、あしか(#hatena-group-task)など、機能ごとにデザインの変更が容易になりました。
掲示板の検索フォームをタイトルの横に移動しました
これまでは掲示板ページではヘッダの検索フォームが掲示板内検索になっておりましたが、このページだけ他のページと挙動が異なっていたため、ヘッダの検索は全ページ共通とし、掲示板のページではタイトルの横に検索フォームを追加しました。
HEADタグ内に記述されていたCSSを外部のCSSファイル(base.css)に移動しました
掲示板、あしか、ファイル一覧などでHTMLのHEADタグ内に記載されていたCSSを base.css に移動しました。これまでHEADタグ内に記載された指定が後に記述されているために、管理画面から入力した指定が反映されないことがありましたが、入力した指定が優先されるようになりました。
不具合の解消
以下の不具合を解消しました。はてなアイデアにてご指摘いただきましたユーザー様、ありがとうございました。
- hotstarモジュールを設置した際に、一部のテーマで☆が縦に表示されてしまう(idea:17214)
- 細いヘッダを適用すると一部のページでレイアウトが崩れてしまう(idea:17223)
- 掲示板の一部のページでページ上部の広告の表示が崩れる不具合
- 広告にid="bbsheader"がかかり、bbsheaderが2つ指定されていたため、広告に指定されていたidを削除しました
- 掲示板をツリー表示にした場合に、多くのテーマで表示が崩れる不具合
- 掲示板の検索結果でパンくずリストが2つ表示される不具合
- あしかのタスク編集画面でパンくずリストが2つ表示される不具合
- 該当ページのHTMLの構造を変更しました
- 細いヘッダを使用している時に、日記以外のページでも日記の検索ボタンが表示される不具合
- 日記以外のページでは「日記」の検索ボタンを表示しないようにしました
一部HTMLの構造やbase.cssの指定を変更しておりますので、個別に対応されていたテーマによっては意図しない表示になってしまう場合もあるかもしれませんが、より正しいHTML構造へと改善されておりますので、何卒ご了承ください。