コトバノウタカタ

よしなしごとをつらつらとつづるばしょ。

スタイルシートいぢり

ちょこまかとスタイルシートをいじって見た目を替えてみた。といっても微調整のレベルだが。左側のサイドバーがすっきりしたような気がしませんか?

とりあえずやってみたことを大雑把に。スタイルシートと関係ないのも混ざってるけど。

スタイルシートとかcssとか全然わかっていないので、はてなのcssを拾ってきてコピペや見よう見まねで修正した。ので、コードの意味とかあんまり理解してないので無駄な命令が混ざっている可能性大。ともかくどうやったのかを書き記すことにしておく。



以下、モジュールに関する変更はtemplateで「hatena-module」を指定している場合のみ有効。

はてなモジュールのフォントを小さく

フォントのサイズ変更は「FONT-SIZE」の指定だけでいけると思う。PADDINGとかMARGINとか、余白関係だと思うけど具体的にどこの指定なのかはよくわからない。

DIV.hatena-modulebody UL
{
    PADDING-RIGHT: 0px;
    DISPLAY: block;
    PADDING-LEFT: 0px;
    FONT-SIZE: 80%;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none
}

はてなモジュール内で改行しない

Wallタイプのcssは、コメントやトラックバックのモジュール内で勝手に改行してしまい、レイアウトがおかしくなる。ので、改行しないように設定。

div.hatena-modulebody ul li a
{
    display: inline;
}

div.hatena-modulebody ul li
{
    display: block;
    padding: 0.4em 0.2em ;
    width: auto ;
    height: auto ;
}

コメントモジュールトラックバックモジュールのみ改行したくない場合には、「hatena-recentcomment」を使って以下のように。それを「hatena-antenna」に書き換えれば、アンテナモジュールのみの指定になる。

div.hatena-modulebody ul.hatena-recentcomment li a
{
    display: inline;
}

div.hatena-modulebody ul.hatena-recentcomment li
{
    display: block;
    padding: 0.4em 0.2em ;
    width: auto ;
    height: auto ;
}

モジュールによって字の色がまちまちだけど、そのうち気が向いたときにでも直します。


その他、以前に直したところや細かい修正点について。こういうのはわかってる人なら当たり前のことなのだろうが、私のような初心者もいるかもしれないし、それよりなにより自分用の覚書。

見出し4、見出し5のレイアウト

見出し4、見出し5はWallレイアウト設定がされておらず、左寄りで出力されてしまう。そこでほんのちょっとだけでも修正を、と思って以下を追加。見出し5の場合は「h4」を「h5」に。

DIV.section H4
{
    PADDING-RIGHT: 0.5em;
    PADDING-LEFT: 1em;
    PADDING-BOTTOM: 0.5em;
    MARGIN: 0px 0px 0.5em;
    PADDING-TOP: 1em;
    FONT-WEIGHT: bold;
    TEXT-DECORATION: underline;
    FONT-SIZE: 1em;
}

タイトルの修正

タイトルの右端にある背景画像の入れ替えと、タイトル文字フォントの変更。タイトル文字は行書体にしてみたが、カタカナなのであまり変化なし。これってMacでも見れるのだろうか。見れなくても元のゴシック体で表示されるだけかな。

h1 {
    BACKGROUND-IMAGE: url(http://d.hatena.ne.jp/images/diary/t/tetsu23/2000-06-04.gif);
    font-family: 'HGS行書体';
}

日付フォントの変更

日記本文の日付のフォントを変更。これは「menu」スタイルで使用されているフォントだが、字体が気に入ったので使ってみた。

h2 {
    font-family: 'Georgia',sans-serif;
    font-size: 120%;
    margin: 0;
    padding: 12px 12px 7px 12px;
}

asin画像の右寄せ

asin画像を右に寄せて表示する方法。ただしこれをやると、asin画像は絶対に右端にしか表示されないので、複数のasin画像を並べて表示しようと思う場合にちょっとめんどくさくなるかも。どうように「img.ean」「img.hatena-fotolife」で指定すると、それぞれean、フォトライフ画像の右寄せになる。

img.asin
{
    float: right;
}
関連サイト