なぜあなたのブログをカスタマイズ？

あなたのブログをカスタマイズすることは、それが目立つのを助けて、より記憶に残ることができて、ツールHashNodeのすべてで我々がそれを楽しむのが楽しいと我々に提供するのを助けます.私は私が使用しているすべてのトリックですので、あなたが気づいている可能性があります多くのそれを試してきた.
今、私はあなたがHashnode大使である必要があると言うことによってこれをすべて書きます.あなたが大使になる方法を知らないならば、彼らはそれを説明しますhere - それはかなり簡単です.
ストラップイン、それは少し長い読み取りのですが、それはよく価値がある!

カスタムナビゲーションリンク

私が言うことができる限り、あなたは実際にちょうどあなたのブログのナビゲーションにカスタムリンクを加えることができません、しかし、あなたはカスタムページ規則を使用している同じ効果を成し遂げることができます.
あなたのブログダッシュボードに「ページを作成する」新しいページに行くことによって、あなたのブログにページを加えることによって始めてください.

その後、ちょうど“高度”に頭を傾ける必要がありますし、希望のURLに作成されたページからリダイレクトを追加します.

カスタムCSS

さて、あなたのブログをカスタマイズする最も明白で強力な方法の1つは、カスタムCSS機能です.HashNodeには、いくつかのDOSと寄付と共に対象となるクラスのリストがあります.

独自のテキストを追加

今、あなたは実際には、テキストを含む純粋なCSSを使用してHTMLにコンテンツを追加することができます知っていない人のために!あなたがこれをする方法はcontent: '' プロパティ:before or :after 要素のセレクタ.
例えば、私はホームページに大きな“マイブログ”タイトルを追加しました.

.blog-author-area:before {
    content: 'My Blog.';

    margin-bottom: 100px;

    font-size: 80px;
    color: transparent;

    background: linear-gradient(91.71deg, #ff7c7c, #63e3ff 99.36%);
    background-clip: text;
    -webkit-background-clip: text;
}

挿入画像とSVGS

再度CSSのコンテンツプロパティを使用すると、また、あなたのブログのどこにでも自分のイメージを挿入することができます!
以前と同様のアイディアcontent: '' プロパティ:before or :after 要素のセレクター、このときだけcontent: url(/path/to/image)Contentプロパティに慣れているあなたのためであっても、1つのライナーを使用してプロパティにSVGを実際に埋め込むことができます.

background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='black' stroke-width='7' stroke-dasharray='15%2c 15%2c 1' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");

それはきれいではありません、しかし、それは仕事をさせます、そして、それは私がホームページで私のブログのロゴのまわりで微妙な少しの点線を加えた方法です.

CSSアニメーション！

CSSについての偉大なことの一つは、簡単にアニメーションを任意の要素に追加できることです.任意のテキストや画像を使用して、以前に言及したコンテキストプロパティを使用して自分自身を追加!
私はあなたがCSSアニメーションですることができるすべてに飛び込みません-多くがあります、しかし、ここで、私はどのように私のブログのロゴのまわりに小さな境界線を持っていますか?

.blog-author-area:after {
    [...]

    /* The animation */
    animation-name: spin;
    animation-duration: 40000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

変更スタイリングとレイアウト

明らかなものは、あなたのブログ上の既存の要素のすべてにスタイルを追加し、追加することができます.これは色、影、フォントサイズ、およびほとんどすべての太陽の下に他のものが含まれます.
また、あなたのブログのレイアウトを変更することができますし、最も簡単な方法フレックスボックスを使用しています.あなたが既にFlexboxに精通していないならば、私は非常に推薦しますthis guide and cheat sheet CSSトリックから.
フレックスボックスを使用すると、既存のHTML構造から独自の応答レイアウトを作成することができますも、これらの2つのいずれかを使用して任意のレイアウトの順序を逆にする

.container {
  flex-direction: row-reverse | column-reverse;
}

自分のドメインを使う

そして最後に、最高の機能のHashNode無料で含まれています.あなたのブログを指すようにあなたのドメイン名を設定することはあなたのブログダッシュボードの「ドメイン」設定に行って、そこの指示に従って簡単です

あなたがこの記事を楽しむならば、私のbogの会報を購読するために自由に感じてください.また、私についての詳細を学ぶことができるかをタッチhere.
あなたの下にあなたのブログコメントをカスタマイズすることについての質問があるならば、私はあなたに戻ります!