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

今日のトラックバック

trackback

アンテナをページの右に表示する一法

hatena guide
【元記事：アンテナをページの右に表示する一法：d:id:manpukuya:20040222:p3】

はてなアンテナを、ページの右側に表示する方法の一つを紹介します。これは、ヘッダ部分にいろいろな内容を盛り込んでいて、かつキーワード「sidebar」の内容を読んでもうまくいかなかった方向けの方法です。

まずキーワード「antennaモジュール」をご覧いただき、「main」クラスと「sidebar」クラスのdiv要素を追加します。このとき、ヘッダに追加する内容はヘッダの最後に、フッタに追加する内容はフッタの最初に追加してください。使っているテーマが「はてなダイアリーsidebar利用可能テーマ」であれば、これだけでアンテナがページの右や左に表示されるでしょう。

それ以外のテーマを使っているか、テーマを使っていない場合は、スタイルシートに

div.main {width:70%;float:left;}
div.sidebar{width:25%;float:left;position:static;}

と入れれば、アンテナが右側に出ると思います。「70%」と「25%」は、合計が90%程度になる範囲で、お好みに変えてみてください。この方法は、キーワード「sidebar」の「floatを使うパターン」を参考にしています。

アンテナをページの左に表示するには、「left」をすべて「right」にし、

div.main {width:70%;float:right;}
div.sidebar{width:25%;float:right;position:static;}

と書けばよいでしょう。

フッタに、アンテナのほかにもなにか表示している場合、その内容がページの上に来ないよう指定しなければなりません。たとえばカレンダーモジュールをフッタにも置く場合、フッタの「<hatena name="antenna"></div>」に続けて、

<hatena name="calendar">

と書くでしょう。こうした場合、スタイルシートに

div.calendar{clear:both;}

と書き加えておきます。

トラックバック

段落の前後のすき間をなくす方法

hatena guide
【元記事：段落の前後のすき間をなくす方法：d:id:manpukuya:20040222:p2】

日記の本文において、段落の前後のすき間をなくす方法をここでも紹介しておきます。

スタイルシートに

div.section p{
margin-top:0;margin-bottom:0;
padding-top:0;padding-bottom:0;
}

と指定します。これは、どんなテーマを使っていても有効なはずです。

ただ個人的には、段落の前後にはすき間があったほうが読みやすいと思います。

以前は自分も、段落の前後のすき間をなくしていました。でも数年前から、数行以上のまとまった文章では、文字がぎっちりと詰まっているのは読みづらいと思うようになりました。

雑誌や本では、段落ごとにすき間が開いていることはまずありませんが、それはあくまで紙の上でのこと。ディスプレイという、解像度が極めて低い環境では、紙とは違う見せ方でもよいでしょう。

今はご覧の通り、行間（段落内の、行と行のすき間）を少し大きめにとった上で、段落と段落の間には少し間隔が開くようにしています。

div.section p{
line-height:1.5;
margin-top:0.5em;margin-bottom:0.5em;
padding-top:0;padding-bottom:0;
}

といった感じです。

コメント

トラックバック

「教えてはてなダイアリー」をめぐって

hatena
【元記事：「教えてはてなダイアリー」をめぐって：d:id:manpukuya:20040222:p1】

「教えてはてなダイアリー」が活発なことは非常に喜ばしいのですが、同時に懸念も出てきています。このキーワードに少しでも関心のある方は、d:id:yukatti:20040222#p1さんの記事をぜひご覧ください。

質問したい側の方にとっては、HTMLやスタイルシートを学ぶ道筋の1つとして参考になるでしょう。

回答できる側の方にとっては、自分の知識が間違ったり偏ったりしていないかを知ることができるはずです。

そして上の記事はどちらかといえば、質問に回答できる知識をお持ちの方に読んでいただきたいと思います。d:id:mutronix:20040222#1077462080さんのご意見に大いに得心したからです。

トラックバック