オープンソースの画像生成AIをセットアップから使い方まで解説する『Stable Diffusion AI画像生成ガイドブック』(ソシム刊)発売中(→本のサポートページ

はてなダイアリーの新機能における見栄えの調整ガイド

【元記事:はてなダイアリーの新機能における見栄えの調整ガイド:d:id:manpukuya:20050511:css

各種の機能追加(d:id:hatenadiary:20050511:1115786088)にかかわるCSSについてです。これらのCSSは、管理ページの「デザイン」−「スタイルシート」欄に追記します。

日記タイトルをリンクにした場合の見栄え調整

日記のタイトル部分を、日記のトップページへのリンクにできるようになりました。しかしそのままでは、タイトルがリンクの見栄えになってしまいます。

本文が黒い文字の場合、下のように指定するとよいでしょう。

h1 a:link,h1 a:visited,h1 a:hover,h1 a:active
{color:#000}/*「#000」の部分はお好みで*/

なお、日記のタイトルにマウスポインタを置いた際に下線が出るようにするには、「h1 a:active{text-decoration:underline}」と指定します。

ブログモードでの「Permalink | コメント(0) | トラックバック(0)」の見栄え調整

この文字列は段落(p要素)で、クラス名は「sectionfooter」です。文字を小さくして右寄せにし、上下を少し開けるには、たとえば次のように指定します。

p.sectionfooter{
font-size:80%;/*数字はお好みで*/
text-align:right;
margin-top:2em;/*数字はお好みで*/
margin-bottom:2em;/*数字はお好みで*/
}

キーワードのハイライトの見栄え調整

キーワードからジャンプしてきた際に、そのキーワードがハイライトされるようになりました。この部分のクラスは「span.highlight」なので(日記を検索したときと同じ…というか今回の新機能は、キーワードで検索した状態で日記を表示している)、ここに背景色を指定するとハイライト部分がはっきりわかるようになるでしょう。例として、背景色を黄色にする方法を紹介します。

span.highlight{background-color: yellow;}

パンくずリストモジュールの見栄え調整

「トップ > 2005/05/11 >」というような「パンくずリスト」は、div要素のbreadcrumbsクラスとして表示されます。

たとえば文字を小さくするには、以下のように指定します。

div.breadcrumbs{font-size:90%;}

これらの方法は、使っているテーマによっては見栄えがうまく変わらないことがあるかもしれません。ご了承ください。