もう xlog のページスタイルを変更する必要はありません、もっと素敵なページを見つけるまで😜
まず、xlog についての印象を話しましょう。基本的なブログとして十分ですが、
自分の好みに合わせて変更したい強迫観念のあるブロガーにとっては本当に難しいです。
慣れてくると、不満な点はありませんが、壁に阻まれること以外です！
以下はスタイルの図です
以下は最終版の CSS コードです
/*--副題のカラフルさ*/
.whitespace-pre-wrap {
background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
color: transparent;
-webkit-background-clip: text;
-webkit-animation: slide 2s infinite linear;
animation: slide 5s infinite linear;
}
/*--マウスで選択したスタイルの記事の概要がダイナミックに大きくなる*/
.xlog-post:hover {
transform: scale(1.2);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
.xlog-post {
padding: 1rem;
}
/*---マウスで選択したスタイルのアーカイブ記事リストがダイナミックに大きくなる*/
.items-center.-mx-2:hover {
transform: scale(1.2);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
/*--マウスで選択したスタイルのボタンが大きくなる*/
.button:hover {
transform: scale(1.2);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
/*--ナビゲーションバーをトップに移動*/
.xlog-site-navigation {
position:absolute;
top:0px;
}
/*--リンクボタンの位置を変更しない*/
.pl-1 {
margin-left:auto
}
/*--バナーの位置を調整*/
.py-12 {
padding-bottom: 20px;
padding-top: 45px;
}
/*--リンクの上下の位置を調整*/
.flex.text-gray-500 {
padding-bottom: 10px;
}
/*--トップのコードレイン*/
.border-zinc-100 {
background-image:url('https://xlog.app/_next/image?url=https%3A%2F%2Fipfs.4everland.xyz%2Fipfs%2Fbafkreibiivd46q6qfd6dzri6j6ltw53tzrudcqk7fmxhsj32qbqer7zkra&w=1920&q=75');
background-repeat:repeat;
}