みんカラの整備手帳の写真がPCで見ると小さくてとても不便に思っていたんですが、最初から大きなサイズで見られるユーザーCSSを作りました。
これでクリックして確認して戻ってという煩わしさもなくりました(*^^)v
ユーザースタイルシートとは？
ユーザースタイルシート（ユーザーCSS）というのはWebページの見た目を後から変更できる仕組みです。普通はWebサイトの製作者が指定した色や配置のデザインで見ることになりますがそれをさらに自分でカスタマイズすることができます。
みんカラや他のブログシステムなどにもスタイルシートのカスタマイズ機能がよく付いていますがそれとは別の仕組みです。
私はWebブラウザの「Stylus」という拡張機能（アドオン）が便利なのでそれを使っています。ユーザーCSSを適用するかしないかはアイコンのクリックで簡単にON/OFFできます。他にも「Stylish」「Stylebot」など類似の拡張機能があるようです。
拡張機能を使わなくててもユーザーCSSを適用できる仕組みが各ブラウザに備わっています。インストールしたくない場合はこちらの方法を使うのも良いと思います。
CSSの登録の仕方など詳しく知りたい方は「ユーザースタイルシート」「Stylus」などで検索すると解説されているサイトが多数見つかりますのでそちらをご覧ください。
CSS
/* 【みんカラ】整備手帳の画像を大きくするCSS */
/* 整備写真を大きくする */
div.galleryPhoto {
width: auto !important;
}
div.galleryPhoto img {
width: 100%;
border: none;
}
/* 「大きい写真で見る」を消す */
div.galleryPhoto a:nth-child(3) {
display: none !important;
}
/* 説明文を調整 */
body #MinkaraBody #BodyBlock #BodyBlockMain .contents .galleryPhoto + .galleryMemo {
width: 100% !important;
}
/* 画像がマウスオーバーで薄くなるのを防ぐ */
body #MinkaraBody #BodyBlock #BodyBlockMain .contents a:hover {
opacity: 1;
}
/* CSS適用中のタグ */
body:before {
content: "CSS適用中";
position: absolute;
position: fixed;
top: 30px;
right: -250px;
z-index: 9999;
transform: rotate(45deg);
width: 400px;
height: auto;
padding: 5px 100px;
background-color: rgba(255, 128, 0, 0.7);
border: solid 1px rgba(255, 128, 0, 0.9);
color: #ffffff;
text-align: center;
letter-spacing: 0.1em;
font-weight: 700;
pointer-events: none;
}
適用先は以下のようにURLを正規表現で指定すれば整備手帳のページのみこのCSSが適用されるようになります。
https://minkara.*/userid/.*/car/.*/.*/note\.aspx
Posted at 2020/08/11 22:43:40 | |
トラックバック(0) | パソコン/インターネット
みんカラの整備手帳の写真がPCで見ると小さくてとても不便に思っていたんですが、最初から大きなサイズで見られるユーザーCSSを作りました。
