2 年前、百度の検索結果に「動画一覧」、「百家号」、「百度株式通」、「百度健康」などの混乱したものが含まれているのに耐えられず、「百度検索結果を最適化する」という記事を書きました。
2 年後、百度は依然としてこの状態で、「AI 返信」、「弾幕インタラクション」などの新しい機能が追加されました💩。
個人的には、検索エンジンはユーザーに検索結果を表示するだけで良いと思います。そんなに多くの華やかな機能を作る必要はありません。この精神に基づいて、最近、以前作成したスタイルを再最適化し、ダークモード（ここで AC-baidu - リダイレクトスクリプトのダークモードがひどすぎると文句を言いたい… ダークモードでは多くの場所の文字が見えません）と自動同期スタイルソース（スクリプトと連携する必要があります）の 2 つの新機能を追加しました。
AC-Baidu-CSS#
百度検索の元の効果と AC-Baidu-CSS を組み合わせた AC-baidu - リダイレクト効果の比較：
::: gallery
https://cdn.vinking.top/dghGtC3JrGtwvBx.webp
https://cdn.vinking.top/moAI2z0J8cUOUXD.webp
https://cdn.vinking.top/caZ4PCtl8LavZlY.webp
:::
以下のリンクで私が使用している同じルールを見つけることができます：
インストールガイド#
使用前の準備#
AC-Baidu-CSS を使用するには、以下の手順に従ってください：
- ブラウザに Tampermonkey 拡張機能とAC-Baidu リダイレクトスクリプトをインストールして有効にしてください。
- AC-Baidu リダイレクトスクリプトの設定ページにアクセスします。
- 以下の画像に従って AC-Baidu リダイレクトスクリプトを設定します。
グローバル設定項目#
百度設定項目#
これで AC-Baidu リダイレクトスクリプトの設定が完了しました。次に AC-Baidu-CSS を導入します。
AC-Baidu-CSS の設定#
方法 1、自動スタイルソースの同期（推奨）#
AC-Baidu リダイレクトスクリプトには外部スタイルシートを解析する機能がないため、以下のスクリプトを使用して自動スタイル同期機能を実現する必要があります：
// ==UserScript==
// @name 百度样式优化【订阅】
// @namespace https://www.vinking.top/
// @version 2.4
// @description 通过订阅相应的 CSS 规则，实现跨设备同步屏蔽效果。
// @author Vinking
// @match https://www.baidu.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=baidu.com
// @grant GM_xmlhttpRequest
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
(function () {
"use strict";
// 订阅源
const cssLink = "https://sub.vinking.top/style.css";
// 预定义的CSS样式
const predefinedCSS = `
.flex {
display: flex;
}
.align-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.setting {
transition: all 0.35s ease-in-out;
padding: 3px 11px;
border-radius: 6px;
border: none;
text-align: left;
margin: 0px 5px;
cursor: pointer;
color: #666;
text-overflow: ellipsis;
white-space: nowrap;
background: rgb(240, 240, 240);
}
#ADBlock_Setting {
position: fixed;
top: 60px;
right: 20px;
background-color: rgba(209, 213, 219, 0.6);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
padding: 20px;
border-radius: 10px;
border: none;
z-index: 9999;
& > textarea {
width: 400px;
height: 400px;
border: none;
border-radius: 10px;
padding: 10px 5px;
resize: none;
margin: 10px 0px;
position: relative;
}
& > textarea:focus {
outline: none;
}
& button {
transition: all 0.35s ease-in-out;
padding: 3px 11px;
border-radius: 6px;
border: none;
text-align: left;
margin: 0px 5px;
cursor: pointer;
color: white;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
background: #3478bf;
}
& > h2 {
margin: 0 0 10px 0;
font-size: 20px;
}
& > p {
margin: 0;
font-size: 12px;
}
& > textarea::-webkit-scrollbar {
width: 5px !important;
height: 5px !important;
background-color: transparent !important;
}
& > textarea::-webkit-scrollbar {
width: 6px;
height: 0;
}
& > textarea::-webkit-scrollbar-corner {
background: unset;
}
& > textarea::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5) !important;
border-radius: 5px;
}
& > textarea::-webkit-scrollbar-thumb {
background: rgba(135, 135, 135, 0.4);
border-radius: 6px;
}
& > textarea::-webkit-scrollbar-track {
background-color: transparent !important;
border-radius: 5px;
}
& > textarea::-webkit-scrollbar-track {
background: rgba(135, 135, 135, 0.1);
}
& > textarea::-webkit-scrollbar-track {
background-color: #fff;
}
}
.ADBlock_hidden {
display: none;
}
.wrapper_new #u {
top: 50px;
}
@media screen and (min-width: 1225px) {
.wrapper_new #u {
top: 0px !important;
}
}`;
GM_addStyle(predefinedCSS);
const savedCSS = GM_getValue("cssContent");
if (savedCSS) {
GM_addStyle(savedCSS);
}
window.addEventListener("DOMContentLoaded", () => {
function createElementWithClassAndId(tag, className, id, textContent) {
const element = document.createElement(tag);
element.className = className;
element.id = id;
element.textContent = textContent;
return element;
}
function addStylesButton(uElement) {
const addButton = createElementWithClassAndId(
"button",
"setting",
"ADBlock_Button",
"ルール設定"
);
uElement?.insertBefore(addButton, uElement.firstChild);
return addButton;
}
function createSettingsDiv() {
const settingsDiv = createElementWithClassAndId(
"div",
"ADBlock_hidden",
"ADBlock_Setting",
""
);
settingsDiv.innerHTML = `
<h2>現在使用しているフィルタールール</h2>
<p id="syncTime"></p>
<p>ルールソース：${cssLink
.replace(/(http|https):\/\//, "")
.replace(/\/.*/, "")}</p>
<textarea id="ADBlock_Rule"></textarea>
<br />
<div class="flex align-center justify-center">
<button id="ADBlock_Save" class="setting">保存</button>
<button id="ADBlock_Close" class="setting">閉じる</button>
<button id="ADBlock_Updata" class="setting">URLから更新</button>
<input type="checkbox" id="ADBlock_AutoUpdate" />自動更新
</div>`;
document.body.appendChild(settingsDiv);
return settingsDiv;
}
const uElement = document.getElementById("u");
const addButton = addStylesButton(uElement);
const settingsDiv = createSettingsDiv();
const updateButton = document.getElementById("ADBlock_Updata");
const saveButton = document.getElementById("ADBlock_Save");
const closeButton = document.getElementById("ADBlock_Close");
const textarea = document.getElementById("ADBlock_Rule");
const syncTimeLabel = document.getElementById("syncTime");
const setting = document.getElementById("ADBlock_Setting");
const settingsButton = document.getElementById("ADBlock_Button");
const autoUpdateCheckbox = document.getElementById("ADBlock_AutoUpdate");
autoUpdateCheckbox.checked = GM_getValue("autoUpdate", false);
settingsButton.addEventListener("click", () => {
setting.classList.toggle("ADBlock_hidden");
});
autoUpdateCheckbox.addEventListener("change", (event) => {
GM_setValue("autoUpdate", event.target.checked);
});
const formatTime = (time) =>
new Date(time)
.toLocaleString(undefined, {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
})
.replace(/(\d+)\/(\d+)\/(\d+), (\d+:\d+:\d+)/, "$1/$2/$3 $4");
const updateTime = `ルール同期時間：${formatTime(
new Date(GM_getValue("lastUpdate", 0))
)}`;
// 次回の更新までの日数を計算
const now = new Date();
const lastUpdate = new Date(GM_getValue("lastUpdate", 0));
const oneWeek = 7 * 24 * 60 * 60 * 1000;
const daysUntilUpdate = Math.ceil(
(lastUpdate.getTime() + oneWeek - now.getTime()) / (1000 * 3600 * 24)
);
syncTimeLabel.textContent = `${updateTime} (次回の更新まで${daysUntilUpdate}日)`;
const cssContent = GM_getValue("cssContent", "");
textarea.value = cssContent;
saveButton.addEventListener("click", async () => {
GM_setValue("cssContent", textarea.value);
GM_addStyle(textarea.value);
setting.classList.add("ADBlock_hidden");
});
closeButton.addEventListener("click", () => {
setting.classList.add("ADBlock_hidden");
});
updateButton.addEventListener("click", () => {
updateCSSFromUrl(updateButton);
});
document.addEventListener("click", (event) => {
if (
settingsDiv &&
!settingsDiv.contains(event.target) &&
event.target !== settingsButton
) {
setting.classList.add("ADBlock_hidden");
}
});
function updateCSS() {
const now = new Date();
const lastUpdate = new Date(GM_getValue("lastUpdate", 0));
const oneWeek = 7 * 24 * 60 * 60 * 1000;
if (now - lastUpdate > oneWeek && GM_getValue("autoUpdate", false)) {
try {
GM_xmlhttpRequest({
method: "GET",
url: cssLink + "?t=" + now.getTime(),
onload: function (res) {
if (res.status == 200) {
const cssContent = res.responseText;
GM_setValue("cssContent", cssContent);
GM_setValue("lastUpdate", now.getTime());
GM_addStyle(cssContent);
}
},
});
} catch (error) {
updateButton.innerText = "更新失敗";
console.error("CSSの取得エラー:", error);
}
} else {
const cssContent = GM_getValue("cssContent", "");
if (cssContent) {
GM_addStyle(cssContent);
}
}
}
const updateCSSFromUrl = (updateButton) => {
const now = new Date();
updateButton.textContent = "更新中";
try {
GM_xmlhttpRequest({
method: "GET",
url: cssLink + "?t=" + now.getTime(),
onload: function (res) {
if (res.status == 200) {
const cssContent = res.responseText;
GM_setValue("cssContent", cssContent);
GM_setValue("lastUpdate", now.getTime());
document.getElementById(
"syncTime"
).textContent = `ルール同期時間：${formatTime(now)}`;
GM_addStyle(cssContent);
textarea.value = cssContent;
updateButton.textContent = "更新成功";
}
},
});
} catch (error) {
updateButton.textContent = "更新失敗";
console.error("CSSの取得エラー:", error);
}
};
updateCSS();
});
})();
自分のスタイルサブスクリプションソースがある場合は、cssLinkを変更してください。
方法 2、手動設定#
Note
この方法ではスタイルソースが自動的に同期されません
- AC-Baidu リダイレクトスクリプトの百度設定項目にアクセスします。
- 「カスタムスタイルシート - Less.js をサポート」機能を有効にします。
- 「スタイルシート - カスタムスタイルシート」フィールドにstyle.cssの内容を入力します。
- 設定を保存します。これであなたの百度検索ページに新しいスタイルが適用されるはずです。
スタイルの変更#
Warning
スタイルを変更した後は自動更新をオフにして、変更が更新で上書きされないようにしてください
AC-Baidu-CSS は、私にとって全く役に立たない多くの検索結果を非表示にしました。特定の検索結果を再表示する必要がある場合は、以下の方法で該当する項目をコメントアウトまたは削除できます（手動設定の場合は「スタイルシート - カスタムスタイルシート」を変更してください）：
同様に、新しい非表示項目を追加したい場合は、該当するtql属性を見つけて追加してください。
楽しんでください 🎉
この記事はMix Spaceによって xLog に同期更新されました。元のリンクはhttps://www.vinking.top/posts/codes/ac-baidu-css-optimizes-baidu-search-experience