忍者ブログ

Eljudnir ~エルヴィドネル

徒然なるままに、日暮らし、PCに向かひて、心に移りゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

 ブログ・タグのデザインを変更しました! あー、すっきりした。
 見た目の改善をするために、色々変えました。

○リンクではなく、フォームにした
○位置を下部から上部にした
○お花を付けた
○その他ポイント

○リンクではなく、フォームにした
 URLをすっきりさせるために行いました。リンクだと、ブラウザのアドレス欄に検索文字が表示されてしまうので気に食わなかったんですよね。
 難点は、オンマウスしたときに色が変わらないことです。リンクになっていると気付きにくいかも。JavaScript使えばオンマウス時にも変更できるだろうけど、極力使用したくないもので。

○位置を下部から上部にした
 下にしようか上にしようか迷ったのですが、上にしました。大きな理由は、「つづきはこちら」をしたときに、本文と追記分の間に隔たりがあるのを避けたかったためです。一つの文章ですからね。
 ただ、タイトル下のラインと本文に隙間があるのも、あまり好きではないのです。それに上の方に持ってくるのは重要事項であって、タグは、本文を読んだ後に興味があれば押してもらえばいいだけの存在だと私は思っているので、上に置くべきではないという考えなんですけどね。「つづきはこちら」の後、かつ日付などの上に置ければベストだったんですが、ブログカスタマイズの制約上、その位置に置くのは不可能でした。
 なので、なるべく細くなるようにしたつもりです。

○お花を付けた
 単語を改行せずに横並びにさせる場合、区切りがないと見にくいですよね。私は普段「:」「/」などを使っていますが、リンクであることの強調も含め、お花にしました。
 右上の目次リンクとデザインをかぶらせることで、リンクだと連想してもらうことを狙っています。

○その他ポイント
 やってみて気付いたのですが、FireFox では <input> タグに class 属性(スタイルシート指定)を適用させるとき、属性の冒頭に来なければ反映させてくれないみたいです。

 例)
  ○<input class="Tag" type="submit" value="タグ検索">
  ×<input type="submit" class="Tag" value="タグ検索">

この×の書き方をすると、Tagクラスで指定したスタイルシートにならずデフォルト設定で表示されます。なんでなのかは分からないけど。
PR
もくじ
[続 ブログ・タグ]
CASSHERN
  (2024/05/19)
ブログ作成  (2007/08/10)
ブログ・タグ
プロフィール
管理人:
ヘラ
Twitter:
自己紹介:
一言
お気軽にどうぞー。
カレンダー
04 2024/05 06
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
タグ
クリックすると、関連記事の一覧が表示されます。
ブログ内検索
Copyright © Eljudnir ~エルヴィドネル All Rights Reserved.
Material by tudu*uzu
忍者ブログ [PR]