少しずつではありますが、ブログのデザインを勉強しながら変更しています。
HTMLやCSSを色々といじってみたり、ｊｓなども今までまったく触れたこともありませんが、調べたりしています。
コメント記入欄のデザインを、HTMLとCSSで変更してみました。
シンプルデザインへ
デフォルト状態だとボーダーラインが入っていたり、行間が詰まっていたりと、あまり見栄えが良くありません。
このデフォルト状態から、今回次の3項目を変更していきます。
- タイトルとボックス下のボーダーラインを消す
- 各入力ボックス間の間隔を広げる
- 「確認する」「書き込む」ボタンのデザインを変更する
１．タイトルとボックス下のボーダーラインを消す
Seesaaブログのデザイン設定画面から、CSS編集画面を開きます。
クラス「.coments-head」（タイトル部分）と「.coments-body」（入力ボックス部分）の記述の中から、それぞれ[border]に関するコマンドを削除します。これでボーダーラインが消えました。
２．各入力ボックスの間隔を広げる
HTMLとCSSの両方を編集します。
Seesaaブログのデザイン設定画面から、「コンテンツ」→「記事」の編集画面を選択し、「コンテンツHTML編集」を開きます。
「お名前」「メールアドレス」「ホームページアドレス」の[input]タグ内に、クラス「coms」を追加します。
[class="coms" ]クラス名はなんでも構いません。CSS内に新規で作成しますので、お好きな名前で登録してください。
サイズはCSSで指定しますので、[size="50"]を削除します。
コメントの記入欄については、[textarea]タグが使われています。
このタグは他で使われていないようですので、タグに直接CSSで指定をかけます。CSSの編集画面で、新たにセレクタを追加します。
クラスセレクタの[.coms]とタグセレクタの[textarea]を追加します。名前やアドレス入力欄は幅を50％に、コメント入力欄は記事欄の幅いっぱいになるように指定してみました。
ボックスの間隔は、[margin-bottom]で広げています。３．ボタンのデザインを変更する
デフォルトのボタンは[input]タグの[type="submit"]で生成されたものでしたが、クラスも指定がされていました。
クラス指定がされてはいますが、肝心のCSSには[input-submit]というセレクタは存在していませんでした。
おそらくほかのテンプレートでの使用を前提に記載されているのでしょう。
せっかくセレクタが存在しているのですから、使わない手はありません。
CSS編集画面から、新たにクラスセレクタ[.input-submit]を追加しました。ボタンの大きさを指定したくらいで、装飾というほどではないですが、デフォルトのボタンよりはシンプルなデザインで良くなったように思います。
完成
内容的には簡単な変更でしたが、見た目は以前に比べてシンプルで遥かに良くなったと思います。
装飾やアニメーションなど調べていると、高度な技もあって奥が深すぎます。まとめ
たくさんのCSSやｊｓパーツなどが存在する意味がわかりました。
作って公開している方々に感謝です。大変勉強になりました。ブログデザインの変更を考えていましたが、テンプレートを変えるだけではつまらないし、気に入ったテンプレートも見つからないので、なんとか自分で出来ないか勉強中です。
ただ調べれば調べるほど、あれもやりたいこれもやりたいが増えていき、調べ物が増えるばかりでなかなか進みません。一気に変えるのは素人には時間がかかりすぎるので、少しずつ実践しながら変更していこうと思います。
Seesaaブログ
価格: 無料(記事公開時)
サイズ: 10.3 MB
カテゴリ: ソーシャルネットワーキング, ライフスタイル
するぷろ - 迅速かつ簡単にブログを投稿できるエディタ
価格: ￥600(記事公開時)
サイズ: 7.1 MB
カテゴリ: ソーシャルネットワーキング, 仕事効率化
するぷろーら - ブログ投稿をアシストするためのブラウザアプリ
価格: ￥600(記事公開時)
サイズ: 6.4 MB
カテゴリ: 仕事効率化, ユーティリティ
SLPRO X (WordPress & Movable Type対応)
価格: ￥1,600(記事公開時)
サイズ: 17.8 MB
カテゴリ: ソーシャルネットワーキング, 仕事効率化
初めてのHTML5&CSS3 魅せる！Webデザイン
価格: 無料(記事公開時)
サイズ: 5.8 MB
カテゴリ: 教育
