ポータルサイトのフォーカス画像のデザインに関するいくつかの結論

フォーカス画像は、画像、テキスト、動的なインタラクティブ効果を統合したコンテンツを表示する方法です。注目を集める（いわゆるフォーカス）、ページレイアウトを最適化する、その他多くの側面で非常に重要な役割を果たします。これは、コンテンツが最も重要となるポータル Web サイトでは特に重要です。
私はこのプロセスでいくつかの経験を積んできたので、皆さんと共有したいと思います。このテンプレートは、Sohu や Sina のような大規模なポータルに適しています。個人の Web サイトやビジネス Web サイトには適さないかもしれません。それはまた別の問題です。

1. 愚かであればあるほど良い（ポイント3と組み合わせる）
編集者は HTML を嫌います。特に、時間的制約が厳しく、頻繁に更新されるページの場合、編集者がフォーカス画像の HTML にコンテンツを直接コピーできるようにすると、非常に致命的になります。
2. 競合を防ぐためのプラグアンドプレイ
クラス名 (CSS クラス) が長くなりすぎることを恐れないでください。必要に応じてプレフィックスとサフィックスを追加できます。より一意にする方がよいでしょう。
フォーカスイメージ機能は比較的独立しています。多くの場合、ページが N 日間公開された後、突然フォーカスイメージを変更したくなります。フォーカスイメージのクラス名が一般的すぎる場合 (title、head、main など)、ページに適用したときに説明できないスタイルの競合が発生すると悲劇になります。
3. ビジュアルデザイナー
フォーカスイメージデザイナーを設計すると、編集者はデザイナーを使用してデータを入力し、ワンクリックでフォーカスイメージコードをすばやく生成できます。

4. スタイルは構造や動作から切り離す必要がある
編集者はフォントの色や背景色などを簡単に変更できます。

5. HTMLテンプレート技術を使用する
構造 (html) と動作 (js ロジック) を分離します。公式のjQueryテンプレートプラグインを検討することができます

6. 超大規模ポータルサイト（Sohu や Sina など）では、SEO はコンテンツよりも優先順位が低くなることがよくあります。
なぜ？このタイプのウェブサイトはすでに誰もが知っているので、検索する必要がないからです。
これにより、JS を使用してフォーカスイメージの HTML コードを動的に生成できるという事実が決定されます。ただし、このタイプの HTML コードは SEO に適していません。

最後の文：大規模なポータルサイトのフォーカス画像については、JSONデータとHTMLテンプレート技術を組み合わせて、jsでフォーカス画像を動的に生成し、フォーカス画像に関連するHTMLコードを大量にページに配置します。編集者はそれを嫌うでしょうし、ウェブサイトのコンテンツの更新効率にも影響します。

<<: Vueプラグインの詳しい説明

>>: aタグのhref属性とonclickイベントの比較