project-homeを画像に置き換えるUserCSS
project-homeに画像を置く
このページと分ける必要ある？
Gemini2.5Pro.icon
code:style.css
/* cosenseのプロジェクトホームボタン(a.project-home)を画像に置き換える */
/* 1. ホームボタン(リンク)自体に画像を設定 */
a.project-home {
/*
* ▼▼▼ お手持ちの画像のURLに書き換えてください ▼▼▼
*/
background-image: url("https://scrapbox.io/api/pages/hoshihara/project-home/icon") !important;
/* 2. 画像の表示方法を指定 */
background-size: contain; /* 'contain'(要素内に収める) または 'cover'(要素全体を覆う) */
background-repeat: no-repeat;
background-position: center;
/* * 3. 画像を表示するためのボタンのサイズを指定
* ▼▼▼ お好みのサイズに調整してください ▼▼▼
*/
width: 120px !important;
height: 40px !important;
/* 4. スタイル崩れを防ぐためのおまじない */
display: inline-block;
/* 元のテキストの分の余白（paddingなど）があればリセット */
padding: 0 !important;
}
/* 5. 元々表示されていたテキスト("star_field public")を非表示にする */
a.project-home span.title {
display: none !important; /* 要素ごと非表示にします */
}
/* --- ここから追加 --- */
/* ホバー時のずれを修正するためのコード */
a.project-home:hover {
/*
* 元のサイトのCSSが background-size などをリセットするのを防ぎます。
* これらをホバー時にもう一度指定し直すことで、表示のずれがなくなります。
*/
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
/*
* 念のため、拡大・縮小(transform)もリセットします。
* これが「ずれ」の原因である可能性もあります。
*/
transform: none !important;
/*
* もしホバー時に背景色が変わるのも防ぎたい場合は、
* 以下のコメントアウトを外してください。
*/
/* background-color: transparent !important; */
}