2005-05-14

CSSをさわってみました。その5
【メッセージボードに目次】

テーマ:CSSをさわってみた
前回は「お薦めかもしれない記事一覧を作りたかったのに・・・ 」で、文字数制限のためうまくできませんでしたので、再度、挑戦です。

目次を作ってそこへリンクさせることを考えていたのですが、目次ページのメンテを忘れそうなので却下。
それでちょっと凝ってみたいと思って作ってみました。
まあ、これなら普通にリンクをつけて入れれば済むことなんですが・・・。
(アル意味、自己満足の世界)
AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2005-05-09

お薦めかもしれない記事一覧を作りたかったのに・・・

テーマ:CSSをさわってみた

記事が多くなってくると、お薦めかもしれない記事が埋もれていくのかなぁ、と思い、メッセージボードを使ってみました。
が、480文字以内という制限があったのですね。
あと、「■Firefox と拡張機能」 もあるのですが、入れられませんでした。
別の方法を考えます。(グスン)

AD
いいね!した人  |  コメント(4)  |  リブログ(0)
2005-05-07

CSSをさわってみました。その4
【コメント欄を拡大しよう】実装編

テーマ:CSSをさわってみた
CSSをさわってみました。その3 で、コメント欄の拡大について書きましたが、その作業方法です。

以下は、私はこういう感じでやってますよ~、というご紹介ですので、これが正解とは限りません。
良い方法がありましたらコメントをいただければありがたいです。

青字部分はブラウザ赤字部分はメモ帳などのテキストエディタでの作業です。

*************************************************

1. ブログの編集画面を、デザインと編集 → CSS編集の画面に切り替えます。

2. CSSが書かれている画面がありますので、その中にカーソルを立てて、すべて選択 [Ctrl+A] をします。

3. メモ帳などのテキストエディタを起動させて、貼り付け [Ctrl+V] をします。

4. [名前を付けて保存] (ファイル名は何でもOK)します。
※このファイルは、現在のCSSのバックアップデータとなります。

5. このファイルの中の 「#comment_module label」 を検索します。

6. ブラウザに戻り、 /////で区切られたソース部分を選択して、コピー [Ctrl+C] をします。
※ソース部分の選択は、[Shift+矢印キー] で行うとやりやすいです。

7. メモ帳などのテキストエディタに戻り、/*reader_list*/ の1行前の } までを選択して、貼り付け [Ctrl+V] をします。

8. 貼り付けが終わったら、すべて選択 [Ctrl+A] をします。

9. ブラウザに戻り、CSSが書かれている画面にカーソルを立てて、貼り付け [Ctrl+V] をします。

10. CSS編集画面の「プレビュー」ボタンを押して確認をして、OKでしたら、CSS編集画面の「保存」ボタンを押します。

*************************************************

もし、プレビューした時におかしくなっていたら、4. で保存したバックアップデータを貼り付ければ元に戻せます(CSS編集画面の「前回保存した内容に戻す」ボタンでもOKと思います)。
AD
いいね!した人  |  コメント(0)  |  リブログ(0)
2005-05-06

CSSをさわってみました。その3
【コメント欄を拡大しよう】

テーマ:CSSをさわってみた
CSSをさわってみました。その2コメント欄幅の変更にて、タイホナ さんからご質問がありましたので、以下にさわった箇所を載せました。

以下の部分を差し替えていただければコメント欄幅が広がると思います。
Windows 版 IE と Firefox で確認しています。

ただ、デフォルトままのCSSで試していないので、もしかしたら不具合があるかもしれません。
不具合等ありましたら、コメントをお願いいたします。

※追記(2005.05.06)
上下のアキを整えるために、LI 部分を追加しました。
大変申し訳ありませんが、下記部分を再度コピペして、CSSに反映させてください。

※注意(2005.05.06)
スキンによっては、widthの380pxを小さくしないと「投稿する」ボタンの文字がズレます。
350pxとかに変更してみてください。

※追記(2005.05.14)
実装編はこちら をご参考ください。

///////////////////////////////////////////
#comment_module label{
text-align: left;
float: left;
width: 250px;
display: block;
}
#f_name,#f_url,#f_title{
display:inline;
width: 250px;
margin-bottom: 3px;
margin-left: 0px;
padding-left: 0px;
}
#f_com{
display:inline;
width: 380px;
margin-bottom: 3px;
margin-left: 0px;
padding-left: 0px;
}
#comment_module form ul {
margin-left: 0px;
padding-left: 0px;
width: 380px;
}
#comment_module form li {
margin-bottom: 0px;
border-bottom-width: 0;
margin-left: 0px;
padding-left: 0px;
width: 380px;
display: block;
}
#comment_module li.lastItem {
display: block;
width: 380px;
margin-bottom: 5px;
text-align: right;
}
#comment_module .button {
margin-left: 5px;
font-size: 11px;
width: 80px;
}
li {/*ishida*/
line-height: 125%;
padding-top: 3px;
padding-bottom: 2px;
}
///////////////////////////////////////////

ここから先はちょっと専門的話題です。

名前、URL、タイトル、コメントの欄は UL、LI タグが使われていて、デフォルトとして左のマージンを持っています。
UL、LI タグは、IE と Opera や Firefox ではマージンの解釈が異なるようなので、

margin-left: 0px;
padding-left: 0px;

を入れました。

また、labelは、

display: inline;

となっており、『名前:入力枠』のように1行になるようになっていましたので、blockに変更してあります。

あとは入力欄の幅を変更しました。

追記(2005.05.05):
名前、URL、タイトル欄と、コメント欄の幅は、気分的に変えたかったので、

#f_name,#f_url,#f_title

#f_com

に分けて、幅を変えました。

ここの display:inline; もblock にしたほうがいいのかなと思うのですが、上下のマージンを調整する必要がでてくると思ったので、デフォルトのままにしています。

追記(2005.05.06):
LI 部分をカスタマイズしてましたので、追加しました。
いいね!した人  |  コメント(9)  |  リブログ(0)
2005-05-05

CSSをさわってみました。その2

テーマ:CSSをさわってみた
しばらく前ですが、CSSをさわりました。

このときの目玉は、「コメント欄幅の拡大」。

デフォルトのコメント欄の幅って、狭くないですか?
どうもチマチマしてて、すご~く気になってました。


ここのCSS、どうも好きくない。
というより、私が理解しきれていないからなんだろうな。

でも、パズルのような、推理ゲームのような、お宝探しのような感じで格闘しているので、それはそれで楽しませていただいてます。感謝です。
いいね!した人  |  コメント(4)  |  リブログ(0)
2005-04-22

CSSをさわってみました。

テーマ:CSSをさわってみた
「最近の記事一覧」や「最近のコメント関係」などのメニュータイトルと、その下のリスト、そして記事のタイトル部分に、手を加えてみました。

提供されたままだと、最近の記事一覧などのリストが見にくいなぁと、ず~~~~と気になっていたのです。

いかがでしょう。
いいね!した人  |  コメント(2)  |  リブログ(0)

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。