2025/08/03 文字の読みやすさを良くするアドオンやココログの「カスタムCSS」使ってるっぱ?

10:01

著者: かっぱ

カテゴリー: ウェブログ・ココログ関連, パソコン・インターネット, IT技術ネタ?

タグ:ココログ, カスタムCSS, ブラウザ拡張機能, Dark, Reader, Zoom, Page, WE, フォント変更, 行間, AI, Gemini, LM, Studio, ブログカスタマイズ, SEO

おぱよう かっぱだっぱ(o’Θ’o)ノ))

まあ昔は徹底的にカスタムしてたけども

5・6年前にココログの大規模改修の時に

設定が消し飛んでからめんどくさくて再設定してなかったっぱ

去年ぐらいかな?少しだけ可読性の都合で直したっぱが・・・

で・・


Zoom Page WE - Chrome ウェブストア**https://chromewebstore.google.com/detail/zoom-page-we/bcdjhkphgmiapajkphennjfgoehpodpk


Zoom Page WE – 🦊 Firefox (ja) 向け拡張機能を入手****https://addons.mozilla.org/ja/firefox/addon/zoom-page-we/?utm_content=addons-manager-reviews-link&utm_medium=firefox-browser&utm_source=firefox-browser


まず・・目が疲れてる方はブラウザーに合わせてこれをインストールして・・

Webページを開いてるところで右クリックして「ZoomAutofit**」を押せば大体見やすくなるっぱからの

んで、背景色が気に入る、気に入らないがあるなら・・・

Dark Reader**https://darkreader.org/

これつかっておけば解決っぱ 説明するまでもない操作性なので割愛しておくっぱが(ぉぃ

で・・

だ・・


ココログの「カスタムCSS」の話だったの**

例えばおいらのこのブログだと・・雑に・・


body {*font-family: “游ゴシック体”, “游ゴシック”, “Microsoft YaHei”, “SimHei”, sans-serif; / 日本語のフォントを優先的に指定 */ font-size: 19px; line-height: 1.75; color: #333; }

/* 見出しの調整 */ h1 { font-size: 2em; margin-bottom: 0.8em; } h2 { font-size: 1.8em; margin-bottom: 0.7em; } h3 { font-size: 1.5em; margin-bottom: 0.6em; } h4 { font-size: 1.2em; margin-bottom: 0.5em; } h5 { font-size: 1.1em; margin-bottom: 0.4em; } h6 { font-size: 1em; }

/* リンク文字色 */ a { color: #007bff; text-decoration: underline; } a:hover { color: #0056b3; text-decoration: none; }

/* リストの調整 */ ul, ol { line-height: 1.6; margin-bottom: 1em; } ul li, ol li { margin-bottom: 0.5em; }

/* 引用ブロックの調整 */ blockquote { font-style: italic; margin: 1em 2em; padding: 0.5em 1em; border-left: 4px solid #ccc; color: #555; line-height: 1.6; }

/* コードブロックの調整 */ pre, code { background-color: #f8f8f8; border: 1px solid #ddd; padding: 0.5em; overflow-x: auto; }

code { padding: 0.2em 0.4em; }

/* スマートフォン向け調整 */ @media (max-width: 768px) { body { font-size: 15px; line-height: 1.6; } h1 { font-size: 1.8em; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; } h4 { font-size: 1.1em; } h5 { font-size: 1em; } h6 { font-size: 0.9em; } }

/* 特定箇所への調整 */ #archive-datebased .module-list-item { font-size: 0.6em; } #archive-category .module-list-item { font-size: 0.6em; }

#recent-comment .module-list-item { font-size: 0.2em; }

.module-typelist .module-list-item { font-size: 0.8em; } .module-inner .module-list-item { font-size: 0.8em; }

.entry-inner-bottom { font-size: 0.2em; /* 例:元のサイズより大幅に小さく */ }


これを「ココログ」にログインして

「デザイン」を選んで

「カスタムCSS」を選んで

上の内容をコピー&ペーストして保存すると「同じテンプレート」の場合

大体同じような文字のフォントや位置関係に代わってくるっぱ(´・Θ・`)

これらはどうやってつくるか?また「テンプレートが違う」場合は?だけど

雑に自分自身の「ココログ」の「ブログ」を開いて

右クリックして「ページのソースを表示」みたいなのを選ぶっぱ

そして「CTRL+A」を押すと「全てを選択」できるので

右クリックして「コピー」しておく(人Θ’o)ネッ


通常はF12の開発者モードや

ブラウザーによっては「選択範囲のソースを表示する」というのが出るので

div id=“recent-entries” class=“module-archives module”>

みたいな感じになってるところをメモっておいてカスタムCSSでサイズ変更や位置調整用のコードをぶち込む訳だけど

んなもんわからんわ😂 という方が多いと思うっぱo(`・ω・´)oウンムリみたいな(。・θ・。)エー

まあおいらも20年前ならWindowsのメモ帳でhtmlやCSS組めたかもしれんけど痴呆気味での・・

Gemini辺りに”「これからブログのソースを貼るので」、「日本のユーザー向けのブログ・ココログ」の「カスタムCSS」の為に調整を検討して”**

とでもいってから、「コピー」したものを「貼り付け」して送信するとOK!

CSSのコード出してくれるけど・・🙄(Geminiの利用規約的には生成させたユーザーに帰属するので問題なく使えるからの)

ぶっちゃけ たまにビジー状態(Geminiの反応が悪くなったり)たまぁにErrorする説っぱ

あと、**「日本の」**と指定入れないと海外のブログ向けのサイズやフォントに調整されるので念の為((´Θ`))ケラケラ

ではError無しで行う方法っぱか?

(´θ`)ン-…

LM Studio(ベータで日本語対応)でローカル環境に適当な大規模言語モデルを読み込んで個人で微調整を自宅のPCで行うってのも今の御時世は可能っぱ**(多少のPC性能や場合によっては良いグラボが必要)**

ただ、たまに商用利用NGとかの大規模言語モデルもあるので、MITライセンスの表記を探すか、必ずライセンス情報は読んだほうがいい説もあるっぱね・・AIが絡む事柄は注意を払っておいて損はないからの?お金がかかわらない事柄に使う分にはまだしものぅ・・なにか事故ってもおいらはしらんよヾノ・Θ・)ナイナイ

自宅でGoogleのLLMも使えるからの**google/gemma-3-27b • LM Studio https://lmstudio.ai/models/google/gemma-3-27b

google/gemma-3n-e4b • LM Studio****https://lmstudio.ai/models/google/gemma-3n-e4b あとはインストールして、モデルを選んで、導入して、チャットを立ち上げて、さっきの・・

”「これからブログのソースを貼るので」、「日本のユーザー向けのブログ・ココログ」の「カスタムCSS」の為に調整を検討して”**

といって

ソースを貼り付けて・・

そこからブログやホームページの細かい部分の調整をすればいいと思うっぱよ(*p’Θ’q)ゥン

本来は、自前のサイトとかだとカスタムCSSで後から調整なんぞという話にはならないだろうけども・・

孫の手ほど調整すれば問題ない場合はこれでいいと思うっぱよ?

フォント・色の変更・レイアウトの調整・スマホやPCでのサイズを切り替えて表示するとか特殊効果も出せる場合もあるしの((´Θ`))ケラケラ

昔のようにコード辞典片手にやる自体は終わってしまった様子っぱ

お皿もアップデートが必要そうっぱ・・

かっぱでしたっぱ♪

 

・・・

ああそうそう

こういうのは設定した値を消せば元に戻せる事柄なのでやっていいことに入るっぱが(人Θ’o)ネッ

設定が**少しでも間違ってると取り返しがつかないことや間違ってるかどうかの判断ができない事柄には**

AI関係を利用するのは補助的にしてやる前に**わかる方に相談すること**っぱよ?

これいっておかないと

AI様に全部任せると言い出してパラノイア(謎 のようになるからの

意味はわからなくてOKっぱ(人Θ’o)ネッ ・・気になるっぱ?

アルファコンプレックスで検索するといいっぱ

(ry