banner
yawnhaaa

yawnhaaa

一个已经活了两个世纪的人
github
ホームアーカイブ

装修Xlog

182
AI 翻訳
この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示
AI が生成した要約
D姐的文章中提到了她的横幅在浏览器宽度调整时不会动，所以作者决定根据D姐的样式代码来装修自己的Xlog。文章中详细介绍了D姐的样式代码，包括字体管理、主题色和鼠标样式的区分、字体变量的定义、横幅、底部和媒体查询等内容。作者还分享了使用4EVERYLAND的方法和如何更改D姐的样式代码。最后，作者展示了一些代码示例。

前言：DIYGOD（以下称为 D 姐）の記事を読んでいると、D 姐のバナーがブラウザの幅に合わせて動かないことに気づきました。D 姐のスタイルコードを参考にして、自分の Xlog を装飾してみました。

零、D 姐のスタイルコードの分析#

1、フォントの細分化管理#
@import url("https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreenr.css");

.xlog-page-index,
.xlog-page-post {
font-family: "LXGW WenKai Screen R", sans-serif;
}

  

@font-face {
font-family: SFCompactRounded;
font-weight: 300;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeidme3gx5cgofwznbtccc7vnfi2acecdzaiy7yfcjyq4e3qgzqwzem);
}

@font-face {
font-family: SFCompactRounded;
font-weight: 400;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeif5baqci7hr4s6ax2a4osvhaayuuipffbww6oydibxx6qgueklc2a);
}

@font-face {
font-family: SFCompactRounded;
font-weight: 500;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeihidx5w2sagmed5zwtlmkceht6ni3akqxvvbnob4uz63sfdpwh5wu);
}

@font-face {
font-family: SFCompactRounded;
font-weight: 600;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeihe3bpdk7yojbcghhiufqe62smr7y2fcm5gagm2nq2l6cgynpauou);
}

D 姐は非常に細かく、異なるフォントのウェイトに応じて異なるフォントを定義しています。このコードは今回の装飾には使用しませんでした。

2、昼夜モードのテーマカラーとマウスカーソルのスタイルを区別#
:root {
    --theme-color: #ff9800;
    --font-fans: SFCompactRounded, PingFang SC, Microsoft YaHei, Lato, sans-serif;
    --header-height: max(50vh, 400px);
    cursor: url(https://ipfs.4everland.xyz/ipfs/bafkreihm4v5gpjkv5lboaqhdfmou4mlpvfjkgbn24ywrfivdk7tolgzkke), default;
    --tw-backdrop-blur: n
}
3、フォント変数の定義#
@font-face {
    font-family: 'Candyshop';
    src: url(https://ipfs.4everland.xyz/ipfs/bafkreiaztv4ex5zlllmz5jqkrc3uouggdwfy6rrenemtdf3erlbd6bmfwm);
    font-display: swap;
}
4、全体のバナー#
1）バナー画像スタイル
.xlog-banner img {
    max-width: 100%;
    width: 300px;
}
2）情報ボックス
.xlog-site-info {
    border: 1px solid #fff;
    transition: .3s ease;
    z-index: 1;
}
3）ユーザー名
.xlog-site-name {
    color: var(--theme-color);
    font-family: Candyshop;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1.414px 0 0 #fff, 1.414px 0 0 #fff, 0 -1.414px 0 #fff, 0 1.414px 0 #fff;
    font-size: 35px;
}
4）夜間モードの情報ボックス
.dark .xlog-site-info {
    border: 1px solid var(--border-color);;
}
5）アバター枠
.xlog-site-icon {
    width: 110px;
    height: 110px;
}
6）記事リスト
.xlog-post {
transition: .3s ease;
}
5、フッター#
footer {
    position: relative;
    margin-top: 210px;
}
/* フッター要素の前に画像を挿入 */
footer:before {
    content: ' ';
    background: url(https://ipfs.4everland.xyz/ipfs/bafkreigq3m2bj76jl7abz6i5rlzegutcrfc2j2nqkcypksbeyu67fsymoy) no-repeat center;
    height: 368px;
    width: 100%;
    display: block;
    position: absolute;
    top: -295px;
    left: 0;
    pointer-events: none;
}
6、いくつかのメディアクエリ#
@media (max-width: 640px) {
    .xlog-site-info {
        padding: 1rem;
    }
}

@media (min-width: 640px) {
    .xlog-post:hover {
        transform: scale(1.02);
        box-shadow: rgb(0 0 0 / 10%) 0 10px 50px;
        background-color: #fff;
        z-index: 9;
    }

    .dark .xlog-post:hover {
        background-color: var(--hover-color);
    }

    .xlog-site-info:hover {
        transform: scale(1.03);
        -webkit-font-smoothing: antialiased;
    }
}

一、装飾を始める#

1、4EVERYLAND の使い方を学ぶ#

4EVERYLAND
ウォレットを接続した後、Storage->Bucket->New Bucket->フォント、画像などのリソースをアップロード->CID をコピー
例えば、私の可愛い前髪の CID は

bafybeifliw6wwf2kw3vfzhch3nyv2hgdrkb74qarmzsr53jxxmqwb3ggai

これを以下のリンクに結合します：

https://ipfs.4everland.xyz/ipfs/[CID]

つまり：

https://ipfs.4everland.xyz/ipfs/bafybeifliw6wwf2kw3vfzhch3nyv2hgdrkb74qarmzsr53jxxmqwb3ggai

アクセスしてみると、可愛い前髪にアクセスできます。

2、好きなフォントを探す#

私はGoogle Fontsに行きました。

ダウンロード後、ttf/otf ファイルを 4EVERYLAND にアップロードします。

3、D 姐のスタイルを変更する#
@font-face {
    font-family: 'Candyshop';
    src: url(https://ipfs.4everland.xyz/ipfs/[CID]);
    font-display: swap;
}
4、以上は参考までに#

D 姐のスタイルコードを理解した後、実際には自分のリソースを 4EVERYLAND にアップロードし、Xlog の CSS コードブロックがアクセスできるようにすることです。私にとって難しいのは、エロ画像 好きな画像を見つけることです。

二、コードの展示#

/* フォントを設定 */
@font-face {
    font-family: 'YawnFont';
    src: url(https://ipfs.4everland.xyz/ipfs/bafybeigcxr7fhpf4e3p2a6mrxfbqoxzeckcvtusnszirz57f3rmjtfgbym);
    font-display: swap;
}

/* テーマカラー、マウススタイルなどを設定 */
:root {
    --theme-color: #ff9800;
    --font-fans: sans-serif;
    --header-height: max(50vh, 400px);
    cursor: url(https://ipfs.4everland.xyz/ipfs/bafkreieeqamkk3p65nj4quf4vrpkzqfl2yonns2av7wctbpf4gko4gpkia), default;
}

/* 前髪を覆うスタイルを解除 */
@media (min-width: 640px) {
    .sm\:backdrop-blur-sm {
        --tw-backdrop-blur: none !important; /* 不要な値に上書き */
        -webkit-backdrop-filter: none !important; /* 不要な値に上書き */
        backdrop-filter: none !important; /* 不要な値に上書き */
    }
}

/* 前髪を覆うスタイルを解除 */
.backdrop-blur-sm {
        --tw-backdrop-blur: none !important; /* 不要な値に上書き */
        -webkit-backdrop-filter: none !important; /* 不要な値に上書き */
        backdrop-filter: none !important; /* 不要な値に上書き */
}

/* ヘッダー全体 */
/* 個人情報ボックス */
.xlog-site-info {
    border: 1px solid #fff;
    transition: .3s ease;
    z-index: 1;
}

/* バナー画像スタイル */
.xlog-banner img {
    width: auto !important;
    margin: auto !important;
}

/* ユーザー名 */
.xlog-site-name {
    color: var(--theme-color);
    font-family: YawnFont;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1.414px 0 0 #fff, 1.414px 0 0 #fff, 0 -1.414px 0 #fff, 0 1.414px 0 #fff;
    font-size: 35px;
}


/* 暗いモードの情報ボックス */
.dark .xlog-site-info {
    border: 1px solid var(--border-color);;
}

.dark .xlog-banner {
    background: #1e2024 !important;
}

.xlog-banner {
    background: #f6f6f6 !important;
}

/* アバター枠 */
.xlog-site-icon {
    width: 110px;
    height: 110px;
}

/* メディアクエリ */
@media (max-width: 640px) {
    .xlog-site-info {
        padding: 1rem;
    }
}

/* 投稿リスト */
/* 記事リスト：アニメーション時間を調整 */
.xlog-post {
    transition: .3s ease;
}

/* メディアクエリ（ページ幅が640px未満の場合）：1、カーソルが記事リストに移動すると拡大、影、背景色；2、暗いモードでカーソルが移動すると背景が変更；3、情報ボックスに移動すると拡大、フォントが滑らかになる */
@media (min-width: 640px) {
    .xlog-post:hover {
        transform: scale(1.02);
        box-shadow: rgb(0 0 0 / 10%) 0 10px 50px;
        background-color: #fff;
        z-index: 9;
    }

    .dark .xlog-post:hover {
        background-color: var(--hover-color);
    }

    .xlog-site-info:hover {
        transform: scale(1.03);
        -webkit-font-smoothing: antialiased;
    }
}

/* フッター */
/* フッターのスタイル */
footer {
    position: relative;
    margin-top: 444px;
}
/* フッター要素の前に画像を挿入 */
footer:before {
    content: ' ';
    background: url(https://ipfs.4everland.xyz/ipfs/bafybeih3rgmdz4cvoj2web2yc7fgf7gplo6ds5qabokvzhocfqnm6m66iq) no-repeat center;
    height: 554px;
    width: 100%;
    display: block;
    position: absolute;
    /* top: -350px; */
    left: 0;
    pointer-events: none;
}

三、まとめ#

私は常にフロントエンドが世界を救うと信じています。頑張りましょう。

ps：古い IE は CSS で JS コードにアクセスできると記憶しています。形式も url (...) でした。あまり記憶が定かではありませんが、もし本当ならサーバーにとっては大きな脅威です。手動で @D 姐

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。