最近、私は自分のウェブサイトにリフレッシュを與えました - 楽しいソロプロジェクト！それは私の創(chuàng)造的なアウトレットであり、自己表現(xiàn)と実験のためのスペースです。これは完全なオーバーホールではなく、新鮮な塗料のコートのようなものではありませんでした。私が使用した興味深いテクニックのいくつかを探りましょう。

Hoeflerフォントを使用したタイポグラフィ

インクウェルフォントファミリーは素晴らしいです！重量、セリフ、サンセリフ、大文字のスタイルを混ぜるのが大好きです。以前のデザインでInkwellを使用していましたが、ブログの投稿ボディテキストには少し遊び心があると感じました。私の執(zhí)筆スタイルはカジュアルですが、常にではありません。Inkwellの陽気な性質(zhì)は、これ以上深刻なトピックに適していませんでした。以前は、理想的なサンとペアリングしていましたが、組み合わせはオフに感じました。

今回は、ボディコピーのためにホイットニーを選びました。気楽な雰囲気を維持していますが、より簡(jiǎn)単なコンテンツでうまく機(jī)能します。

SASSでブログロールをスタイリングします

テーブルをストライプするゼブラは簡(jiǎn)単です：

 TR：nth-??child（偶數(shù)）{
  背景色：var（ -  color-1）;
}
TR：nth-??child（odd）{
  背景色：var（ -  color-2）;
}

しかし、4色をサイクリングするのはどうですか？ The :nth-childセレクターは、オフセットを使用して、これをきれいに処理します。リスト項(xiàng)目のSASS例は次のとおりです。

 li {
  ＆：nth-??child（4n）a {
    色：$ blue;
  }
  ＆：nth-??child（4n 1）a {
    色：$ Yellow;
  }
  ＆：nth-??child（4n 2）a {
    色：$ RED;
  }
  ＆：nth-??child（4n 3）a {
    色：$紫;
  }
}

このアプローチは、色付けされたブログロールを作成しました。プロジェクトに既存の存在のためにSASSを使用しました。 CodeKitはコンピレーションを簡(jiǎn)単に処理しました。そして、はい、ブログロールは再びクールです！

効率的なYouTube埋め込み

私は巧妙なクリックするYouTubeテクニックを使用しました。多くのリソースをロードする完全なYouTube iframeを埋め込む代わりに、靜的畫像プレースホルダーを使用しました。これにより、同様のユーザーエクスペリエンスを維持しながら、パフォーマンスが大幅に向上します。

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Y8Wp3dafaMQ" srcdoc="*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}<a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'>?</a>" title="ダークナイトライズ：何が問題になったのですか？ -  WiseCrackエディション" width="560"></iframe>

カスタム投稿タイプとデータ構(gòu)造

私は構(gòu)造化されたデータを強(qiáng)く支持しています。 WordPressでは、これには多くの場(chǎng)合、高度なカスタムフィールドなどのプラグインを組み合わせたカスタム投稿タイプが含まれます。これにより、柔軟なデータ処理が可能になり、將來のサイトの変更が簡(jiǎn)素化されます。

動(dòng)的バイオジェネレーター

私のバイオセクションは複雑ではありません。18を作成しました<div>要素（3長(zhǎng)さ<em>2スタイル</em>3コードタイプ）とJavaScriptを使用してそれらを切り替えます。クラス文字列はユーザ??ーの選択に基づいて計(jì)算され、他の人を隠しながら対応するバイオを明らかにします。<pre class="brush:php;toolbar:false"> $（ &quot;。バイオチョイス入力&quot;）。on（ &quot;change&quot;、function（）{ var lengthclass = &quot;.bio-&quot; $（ &quot;input [name = length]：checked&quot;）。attr（ &quot;id&quot;）; var styleclass = &quot;.bio-&quot; $（ &quot;input [name = style]：checked&quot;）。attr（ &quot;id&quot;）; var codeclass = &quot;.bio-&quot; $（ &quot;input [name = code]：checked&quot;）。attr（ &quot;id&quot;）; var selector = onedclass styleclass codeclass; $（ &quot;。bio&quot;）。hide（）; $（selector）.show（）; }）;</pre> <p> jQueryは、すでにサイトに統(tǒng)合されていたため（FitVidsとともに）使用しました。將來の書き換えには、jQueryの削除とバイオオプションの合理化が含まれる場(chǎng)合があります。</p> <h3 id="ztext-jsおよびアニメヘッダー"> ztext.jsおよびアニメヘッダー</h3> <p>ヘッダーはztext.jsを使用し、Webby Flairのタッチを追加します。このレベルのアニメーションは、交通量の多いサイトにはそれほど適していない場(chǎng)合がありますが、訪問者の頻度が低いサイトではうまく機(jī)能します。</p> <h3 id="SVGの背景とフッター効果"> SVGの背景とフッター効果</h3> <p>更新されたSVGバックグラウンドサイトを使用して背景を作成しました。 <code>background-attachment: fixed 、デスクトップにスライドアウトフッター効果を含めました。フッター効果には洗練が必要になる場(chǎng)合があります。動(dòng)的な背景でより影響力があります。

フィルターを使用した一貫したリンクスタイリング

さまざまなセクションでは、さまざまなハイライト色を使用し、セクションのリンクをそれぞれの色にリンクしました。これは議論の余地があるかもしれませんが（一貫したリンクの色が好まれることがよくあります）、視覚的に魅力的です。 filter: brightness(120%); Trickは、すべての色にわたって一貫したホバースタイルとフォーカススタイルを保証し、スタイリングを簡(jiǎn)素化します。

 A：フォーカス、.button：フォーカス、
A：ホバー、.button：ホバー{
  フィルター：明るさ（120％）;
}

これは比較的迅速な更新であり、主にCodepen Challengeに觸発されました。しかし、いつものように、ある小さな変化が別の変化につながり、私は最初に計(jì)畫されていたよりも多くの重要な変更を加えることになりました！