静的ブログのテーマは、主流が海外製のテンプレートで、調整や修正を行うことが多く、中国語コンテンツのレイアウトにはあまり考慮されない。

本文

半月ほど前にブログのスタイルシートを調整したところ、長年バックエンドサービス開発をしているだけで、フロントエンドは素人の私だ。前後とも半日かけて苦戦した結果、デザインが不合理だった。そこで閃いて、よく読む技術ブログ（infoq、开源中国など）のデザインが良いなと思い、参考にできないかと考えた。ソースコードを調べて関連する要素を特定しようとしたが、霧だらけだった。 フロントエンドの友人がこの部分を見て笑ってしまうだろう… 指定された要素を特定することも分からなかった。分からないことは気にせず、週末に時間があったので、立ち止まって考えた。以前Pythonでスクレイピングツールを書いたとき、似たようなものを使っていたような気がした。

要素検査

そうです、ブラウザに標準搭載されている要素検査ツールを使って、スタイルシートをコピーしたり、指定した要素の位置を特定したりするのは、あっという間です。selector で要素を特定したり、hugo で user define css を新規作成したりすることも可能です。

• 元素のコピー
• outerHTML のコピー
• セレクタのコピー
• JS パスのコピー
• スタイルのコピー
• XPath のコピー
• 完整的 XPath のコピー