私の個人的なサイトのささいなこと

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

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

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

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

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

テーブルをストライプするゼブラは簡単です：

 TR：nth-​​child（偶数）{
  背景色：var（ -  color-1）;
}
TR：nth-​​child（odd）{
  背景色：var（ -  color-2）;
}

しかし、4色をサイクリングするのはどうですか？ The :nth-childセレクターは、オフセットを使用して、これをきれいに処理します。リスト項目の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はコンピレーションを簡単に処理しました。そして、はい、ブログロールは再びクールです！

効率的な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>

カスタム投稿タイプとデータ構造

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

動的バイオジェネレーター

私のバイオセクションは複雑ではありません。18を作成しました<div>要素（3長さ<em>2スタイル</em>3コードタイプ）とJavaScriptを使用してそれらを切り替えます。クラス文字列はユーザ​​ーの選択に基づいて計算され、他の人を隠しながら対応するバイオを明らかにします。<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は、すでにサイトに統合されていたため（FitVidsとともに）使用しました。将来の書き換えには、jQueryの削除とバイオオプションの合理化が含まれる場合があります。</p> <h3 id="ztext-jsおよびアニメヘッダー"> ztext.jsおよびアニメヘッダー</h3> <p>ヘッダーはztext.jsを使用し、Webby Flairのタッチを追加します。このレベルのアニメーションは、交通量の多いサイトにはそれほど適していない場合がありますが、訪問者の頻度が低いサイトではうまく機能します。</p> <h3 id="SVGの背景とフッター効果"> SVGの背景とフッター効果</h3> <p>更新されたSVGバックグラウンドサイトを使用して背景を作成しました。 <code>background-attachment: fixed 、デスクトップにスライドアウトフッター効果を含めました。フッター効果には洗練が必要になる場合があります。動的な背景でより影響力があります。

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

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

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

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