Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第14回】記事の枠線と文字のスペースをあける今回は、微調整をしてみたいと思います。現在このブログは、Seesaaブログのこねこ(左サイドバー)というテンプレートに、今までの記事でご紹介したデザイン変更を加えてきています。その結果、私自身が気に入るようなデザインになってきているわけですが、まだまだ微妙に感じている箇所もあります。このテンプレートはそもそも枠線がなかったので違和感がなかったのですが、第5回で記事に枠線を付けた結果、その枠線と記事本文との間の隙間が狭く感じられるようになってしまいました。今回は、この隙間を広げてみます。隙間については、以前第7回で一度説明しました。.sidetitleクラスに設定したmarginプロパティがそれです。このmarginプロパティは、ボックスの外側に隙間を設定するプロパティでした。今回は、ボックスの枠線とその内側にある文章との隙間の調整です。この場合は、marginプロパティではなく、paddingというプロパティを使います。このpaddingプロパティを記事本文に適用するわけです。記事本文を表すクラスは、第3回で記事本文のスタイルを太字でなくすときに一度取り扱いました。.textクラスです。どのくらいのスペースを設定するかは本当に個人の好みになってしまうのですが、現状は5pxしかあいていないので、これを15pxにしてみることにします。★記事の枠線と文字のスペースをあける方法★.textクラスのpaddingプロパティの値をふやす。*/}(注)灰色字箇所は、過去の作業で修正した箇所です。このように変更すると、下図のように記事本文と枠線との隙間が広くなります。変更した箇所がお分かりになるでしょうか。した違いではありますが、こういうちょっとした調整がサイト全体の見映えを左右することもあるので、自分が納得するまでいろいろ試してみましょう。paddingプロパティには、いくつか書き方があります。D;と書くと、これは●上がA●右がB●下がC●左がDとなることが決まっています。F;のように書かれていると、これは●上下がE●左右がFであることを表します。marginのように、padding-top:G;という形で、上の隙間のみを定義することもできます。Seesaaで作成されているテンプレートを修正する場合には、これらの書式全てを覚える必要はありません。テンプレートにどの形で記載されているかは理解できるようにしましょう。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。