Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第5回】記事に枠線を付ける今回は、ブログの記事に枠線をつけてみましょう。Seesaaブログのテンプレートこねこ(左サイドバー)は枠線のないテンプレートなので、これに枠線を付けるとブログ全体がぐっと引き締まって見えます。ブログの記事を規定しているCSSのクラスは、.blogクラスです。今回はこのクラスに、枠線を規定するプロパティ(border系)を書き加えていきます。今回はまず、解説は飛ばして修正方法を掲載しましょう。★ブログの記事に枠線を付ける方法★.blogクラスに、枠線のプロパティを追加する。#FF9900;}このようにCSSに変更を加えると、ブログが以下のように変わります。▼▼▼ブログの記事に、オレンジ色の枠線が付いたのがお分かりになるでしょうか。以上が、今回の修正内容になります。今回付け加えたCSSについて、少し解説を加えていきます。今回は、ブログ記事を表す.blogクラスに、以下の4つのプロパティを追加しました。#FF9900;border-topというのは、枠線の上の部分を表します。同様に、border-rightというのは枠線の右の部分。border-bottomは枠線の下側で、border-leftは枠線の左側にあたります。四方の枠線それぞれについて、プロパティを追加したわけです。#FF9900;は、上の枠線を、1px幅の通常線、#FF9900(オレンジ)色で付与するという意味になります。今回追加したCSSは、1つの枠線に対して、幅と線種、そして色という3つのプロパティを同時に定義している書式になります。右と下の枠線は、4px幅の二重線をオレンジ色で設定しています。ここまでは宜しいでしょうか。今回追加した枠線の定義ですが、実は別の書式でも同じ定義をすることができます。border-topについて見てみましょう。#FF9900;<別の書式>border-top-width:1px;border-top-style:solid;border-top-color:#FF9900;お分かりになるでしょうか。今回使用した書式は、border-top-widthとborder-top-style、そしてborder-top-colorを同時に定義している書式なのです。今回私は線の幅と種類、色を同時に定義しましたが、場合によってはその一部のみを定義することが可能です。幅や線種については特に何もなく、色のみを定義したい場合はborder-top-colorを使用すれば良いでしょう。線の太さだけが気になる場合は、border-top-widthを使えば良いと思います。時と場合に応じて、ご自分の好きな方法で枠線を定義すれば良いと思います。18:55ゆうかさん、こんにちは。一応CSSの設定としては以下の通りとなります。#FF99CC;これでいけるはずなので、例えば最後のセミコロン“;”を忘れているとかないですか?ブログを拝見したところ、“article”か“.skinArticle2”のクラスに上記設定を追記すると上手くいくと思います。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。