フォーラム:見出しのデザインを変えてみよう

出典: 謎の百科事典もどき『エンペディア(Enpedia)』
ナビゲーションに移動 検索に移動
フォーラム:メインページ > 見出しのデザインを変えてみよう 終了
このフォーラムは既に終了しています。返信や話題の追加はご遠慮ください。

「エンペディアの見た目をもっと変えていこうキャンペーン」第2弾です。(ちなみに第1弾はテンプレート・トーク:Highlighter

節名 [ 編集 ]


このセクションタイトル。そう、おそらくエンペディアンの皆さんが見飽きているこの表示。「内容に一区切りをつける」時に使う見出しですが、MediaWiki既定 即ち Wikipedia と同じものです。独自性を追求出来ないかと思い、見出しのデザインを変える提案をします。CSSで簡単に変えることが出来るので、手間はあまりかかりません。一番の問題は"しっくり来るデザインが見つかるかどうか"です。という訳でフォーラムを立て、コミュニティの皆さんのご意見を請おうと思います。--1108-Kiju/Talk 2023-03-12T00:29:55 (JST)

  • 原案:Special:diff/710547 - 360度さん。ご多忙ということで、代わってフォーラムを立ち上げさせていただきます(Diff)。
  • メモ:一応書いておきます。セレクタは== $1 ==が「h2」、その後両端の「=」を増やすごとに数字が上がります。

案やコメント[編集]

(除去)

で見出し名が緑色、ボックスに囲まれるようになります。後は調整して標準名前空間のみに表示させる感じに。ただ、結構スタイルが汚いです。--1108-Kiju/Talk 2023-03-12T00:35:13 (JST)

  • 大筋の方向性について:大賛成です。ウィキペディアとの差別化を図って、もっと見た目が華やかなサイトにしましょう。
    • h2 以降だけでなく、h1(冒頭のタイトル表示)を変えるのも重要だと思っています。
  • 今後の提案方法について:参加者全員がいちいち、CSSを利用者ページに転記するのは手間ですから、スクリーンショットも一緒に呈示するようにしましょう。ただ、エンペディアにアップロードするとサーバーを圧迫してしまう上に、記事のスクリーンショットはCCライセンス的にどうなんだ、という面倒くさい問題が生じるので、外部サイトのアップローダーこれなど)を使うことにしましょう。
  • 細かな実装方法について(理解できなければ読み飛ばしてもOK)
    • タグに直接CSSを指定するのは望ましくないので、「h1」に指定したいときは「h1.firstHeading」か、単に「.firstHeading」と指定するのが望ましいです。ただし、h2 以降については特にクラスが用意されていないので、単に「h2」「h3」と書くしかないのですが.....(「h2 .mw-headline」という指定方法もあるが.....そこまでやる必要あるのか?)
    • 「目次」も h2 タグが付いているので、明示的に避けるには「h2:not(#mw-toc-heading)」と記載するのが吉です。 後述のとおり、h2:not([id]) でいいかも。
    • (備忘録)真面目に・几帳面にやろうとするなら、サイト全体に反映する前に、PC/スマホ、各種ブラウザ、Vector/モノブックスキン での見え方の違いをチェックする必要があります(ダルすぎ………)。とりあえず「提案する段階」では、各々の環境でキレイに表示されていれば問題ないと思います。
  • 私からの提案:このようなデザインはいかがでしょうか。ソースは私のユーザーページ見てください。
  • その他の案について:こういったページこういったページで紹介されているデザインは、ほぼ全て実現可能です。(一部、不可能なものもあります。)ただ、候補があまりに多すぎると、合意を形成するのが難しくなりそうですが………
---謎の管理者もどき BadEditor 2023-03-12T01:14:10 (JST)
  • 追記 この程度の CSS に著作権などないので、転記するときには「履歴継承」をしなくて大丈夫です。(したい人はしてもよろし)---謎の管理者もどき BadEditor 2023-03-12T01:27:28 (JST)
  • おおー!いいデザインだと思います。h2が使われているほとんどのページに馴染んでいます。--1108-Kiju/Talk 2023-03-12T01:19:48 (JST)
メインページ の h2 が大変なことになっている……(1108-Kiju さんのソースでも、私のソースでも両方)。その他のページでも凝ったCSSを指定していた場合、衝突してしまう可能性・大。解決方法は、えーと、ゆっくり考えます。何かしらやり方はあるはず。---謎の管理者もどき BadEditor 2023-03-12T01:23:21 (JST)
「ある特定のClass/Idが指定された時だけすべてinitialに」とかどうでしょう。--1108-Kiju/Talk 2023-03-12T01:25:32 (JST)

┌───┘
なんかすぐに解決方法、思いつきました。id も class も style も指定されていない、生身の h2 限定で CSS を適用すればよさそうですね(ここ見て)。---謎の管理者もどき BadEditor 2023-03-12T01:37:42 (JST)

あ、そうか。灯台下暗しでした。--1108-Kiju/Talk 2023-03-12T01:53:34 (JST)

BadEditorさん提案のデザインをCSSにコピペしてやってみました。全体的にはとても良い感じだと思うんですが、個人的にはh3以下はちょっと主張が強すぎると感じました。何か装飾を付けるなら、h2と同じ系統の色を使って、もう少し大人しい感じにしたほうがいい気がします。--Written By 360度 (Talk) 2023-04-01T23:16:27 (JST)

  • h3~h4 について、こんな感じでどげんでしょうか? MediaWikiデフォルトのh3~h4って、見出しなのか、単にちょっと太くて大きい文字なのか、よく分かんないですよね。---謎の管理者もどき BadEditor 2023-04-03T10:27:18 (JST)
    • ありがとうございます。いい感じだと思います。--Written By 360度 (Talk) 2023-04-09T21:58:10 (JST)
  • しばらくユーザーCSSで試していたんですが、ファイルページの見出しだけ適用されてないですね。ソース見たらfilelinksって個別のidが指定されていたので、これも個別に指定する必要があるんだと思います。--Written By 360度 (Talk) 2023-04-09T21:58:10 (JST)
  • 追記 節単位での編集プレビュー画面における「脚注プレビュー」のh2も適用されていないことを確認しました。こちらは、mw-ext-cite-cite_section_preview_references_headerというidが指定されています。--Written By 360度 (Talk) 2023-04-25T20:18:36 (JST)
  • ご確認ありがとうございます。こちらを追加した案で再提案します。.....「脚注プレビュー」に関しては、むしろ無いほうがいいんじゃないかなと思ったり。---謎の管理者もどき BadEditor 2023-04-26T09:08:18 (JST)
    • 対応ありがとうございます。他のアイデアが出る気配はないですし、これに変更しちゃっていいんじゃないかなと思ったり。--Written By 360度 (Talk) 2023-05-02T00:00:26 (JST)
  • 情報 BadEditorさんのCSSを1ヵ月間使いましたが、特に問題はありませんでした。--1108-Kiju/Talk 2023-05-02T00:14:05 (JST)
  • 異論がなければ実行するぞーーーーーー!!! ---謎の管理者もどき BadEditor 2023-05-02T20:18:57 (JST)

変更しました[編集]

異論なかったので変更しました。感想はこちらまで。---謎の管理者もどき BadEditor 2023-05-14T13:56:15 (JST)

  • 慣れという可能性もあるので一様には言えませんが、古い方に戻せるようにしてもいいのではないでしょうか?commomで変更可であるようには見えますが。--かちゅう (トーク) 2023-05-14T19:56:35 (JST)
    • ガジェット化いたしました。特別:個人設定 から「オリジナルの見出し」のチェックを外すことで、戻せるようにしました。---謎の管理者もどき BadEditor 2023-06-02T21:32:52 (JST)

スマホで「H3~H4」の見出しが崩れることが多かったので、オリジナルデザインはPC版でのみ適用されるように変更しました(差分)---謎の管理者もどき BadEditor 2023-07-30T15:26:12 (JST)

終了提案[編集]

確認 もう誰も興味なさそうなので、しばらく反対意見がなければ一旦このフォーラムを終了しようと思いますがいかがでしょうか。--Written By 360度 (Talk) 2023-09-05T15:35:50 (JST)

対処 特に異義はないようですので、以上でこのフォーラムは終了とします。--Written By 360度 (Talk) 2023-09-25T22:13:43 (JST)