Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第50回】ここまでのまとめ(第41回〜第49回)こんにちは、ほくほくです。早いもので、このブログも始めてから50記事目に到達しました。始めは軽い気持ちで書き始めたブログだったのですが、いざ書いてみるといろいろと書くことがあって・・・いつの間にか50記事です。50回目の今回は、恒例のまとめ記事です。第41回から第49回で解説したデザインカスタマイズ方法の概要をお伝えします。それ以前の記事については、こちらをご覧下さい。◆【第10回】ここまでのまとめ(第1回〜第9回)◆【第20回】ここまでのまとめ(第11回〜第19回)◆【第30回】ここまでのまとめ(第21回〜第29回)◆【第40回】ここまでのまとめ(第31回〜第39回)【第41回】背景画像を変更するブログの背景画像を設定する方法をご紹介しました。ブログの背景画像は、設定するクラスによって表示位置が異なりますし、またブラウザのスクロールに合わせてスクロールさせる/させないの選択、繰り返し表示の有無など、様々な設定が可能です。ブログの表情が大きく変わる設定です。残った未解説部分で、一番大きな変更、それが文字サイズの変更です。このブログをご覧頂いても分かる通り、ブログは様々な大きさの文字で構成されています。それらを変更することにより、ブログの見た目も変わっていきます。Seesaaブログのテンプレートでは、文字サイズの定義はある程度まとめて記載されています。この回ではまず、文字サイズの定義方法によってはブラウザに依存してしまうことを解説し、以降の文字サイズ変更シリーズにつなげていきます。【第43回】ブログ全体の文字サイズを変更するブログの文字サイズの変更方法として、まずブログ全体の基本的な文字サイズの変更を解説しています。ブログでは、文字サイズの定義がいくつかありますが、それ以外の部分には全体定義のサイズが適用されます。この回では、その全体定義部分の変更方法を解説しています。【第44回】ブログ説明文の文字サイズを変更するブログのタイトルの下に表示されている、説明文の文字サイズを変更する方法を解説しています。この回をご覧頂いても分かりますが、基本的に文字サイズの変更は、どのクラスがどの部分に適用されているかを把握してしまえば、あとは非常に簡単な作業になります。【第45回】タグタイトルの文字サイズを変更するタグタイトルという、あまり耳にしない、そして使用頻度のあまり高くない箇所の文字サイズの変更方法を解説しています。使用頻度が少ないとはいえ、閲覧者に見えるところ。いう細かいところにまで気を配る方は是非ご覧下さい。【第46回】サイドタイトルの文字サイズを変更するこのブログで何度もご紹介してきた、サイドバーコンテンツのタイトル。この回では、その文字サイズの変更方法をご紹介しています。【第47回】記事タイトルの文字サイズを変更する記事のタイトルは、ブログ閲覧者が最も頻繁に目にするところでもあります。従ってその文字のサイズは、閲覧者が見やすいように、ブログ全体のデザインとの関係性も考慮して設定する必要があります。書くとなんだか難しく聞こえますが、要するに記事タイトルの文字サイズの変更方法です。簡単ですので、お試しください。【第48回】記事日付の文字サイズを変更する記事の上部に表示される日付もまた、閲覧者が目にしやすい箇所です。第47回と同じく、大きさを調整してみましょう。【第49回】記事タグの文字サイズを変更するあと、記事の中で文字サイズが気になる箇所は、記事に付けたタグの文字サイズです。これ以前の回をご覧頂いていれば、簡単に変更することができると思います。以上が、第41回から第49回に掲載した内容になります。【第49回】記事タグの文字サイズを変更する今回は、タグ文字の文字サイズを変更してみましょう。Seesaaブログでは、記事投稿時に、記事をカテゴライズするタグを設定することができます。ブログ内で使用されたタグは、タグクラウドの中に、使用頻度を文字の大きさで表して表示されます。このタグは、設定した記事にも当然表示されることになります。記事の末尾右下に表示されるのがそれです。今回はこの文字サイズを変更してみます。Seesaaブログではこの箇所を、.tag-wordというクラスで定義しています。よって今回は、このクラスのfont-sizeを変更していきます。★記事タグの文字サイズを変更する方法★.tag-wordクラスのfont-sizeの値を変更する。{font-size:10px;}この結果、記事タグの文字サイズはご覧のように変更されます。文字サイズの変更方法も、だいぶ要領が分かったかと思います。font-sizeプロパティを修正するだけですから。【第48回】記事日付の文字サイズを変更する今回は、記事の右肩に表示される日付の文字サイズを変更してみましょう。Seesaaブログでは、記事に付随して表示される日付を.dateというクラスで定義しています。従って今回は、この.dateクラスの中のfont-sizeプロパティの値を変更することになります。★記事日付の文字サイズを変更する方法★.dateクラスのfont-sizeプロパティの値を変更する。{font-size:13px;}この結果、記事日付の文字サイズはご覧のように変化します。文字サイズ一つで、随分とブログの表情が変わるものですね。Seesaaブログはこのように、ブログデザインの自由度が非常に高いブログです。【第47回】記事タイトルの文字サイズを変更する今回は、記事のタイトルの文字サイズを変更してみます。Seesaaブログでは、記事のタイトルはh3要素の.titleクラスで定義されています。従って今回は、このクラスのfont-sizeプロパティの値を変更すれば良いわけですね。★記事タイトルの文字サイズを変更する方法★h3.titleのfont-sizeプロパティの値を変更する。{font-size:18px;}このようにCSSを変更すると、ブログ記事のタイトル文字の大きさがご覧のように変更されます。今回のように、h3というHTML要素の後に続けて.titleというクラス定義を行った場合、その中の書式は、h3要素の中で使用した.titleクラスでのみ適用されます。CSSでは、“.”で始まるクラス定義を、前に何も付かない形で定義するとブログ全体に適用、HTML要素の後に続けて定義するとその要素内のみに適用されるようになります。CSSで効率の良いコーディングをする場合に有用な方法ですので、覚えておきましょう。【第46回】サイドタイトルの文字サイズを変更する今回は、サイドタイトルの文字サイズを変更してみましょう。Seesaaブログでサイドタイトルを定義しているのは、第6回や第24回でもご紹介したように.sidetitleクラスです。従って今回は、この.sidetitleクラスのfont-sizeプロパティの値を変更すれば良いことになります。★サイドタイトルの文字サイズを変更する方法★.sidetitleクラスのfont-sizeプロパティの値を変更する。{font-size:16px;}このように変更すると、ブログのデザインが以下のように変わります。▼▼▼フォントサイズが大きくなったのがお分かりになるでしょうか。【第45回】タグタイトルの文字サイズを変更する今回は、タグタイトルの文字サイズを変更してみます。タグタイトルというのは、サイドバーのタグクラウドでタグを押下した時、記事エリアに表示される記事一覧の見出しのことです。使用頻度が高くない箇所ではありますが、第42回で説明したように、ブラウザの表示設定依存となってしまっている部分ですので、ブラウザに依存しないように変更してみたいと思います。★タグタイトルの文字サイズを変更する方法★.tag-titleクラスのfont-sizeプロパティを変更する。{font-size:24px;}これで、ご覧のようにタグタイトルの文字サイズが変更できます。▼▼▼CSSでは、文字サイズの変更そのものは非常に簡単です。ブログで用意されているCSSを編集する場合は、どのクラスがどこに適用されているのかを見極めなければなりません。【第44回】ブログ説明文の文字サイズを変更する今回は、ブログ説明文の文字サイズを変更してみます。ブログ説明文というのは、ブログのタイトルの下にある文章のことです。ブログのタイトル部分の書式は#bannerで定義されており、この中でブログ説明文の書式を定義しているのは.descriptionクラスになります。このクラスの、font-sizeプロパティの値を変更することになります。★ブログ説明文の文字サイズを変更する方法★#bannerの.descriptionクラスのfont-sizeプロパティを変更する。{font-size:14px;}この結果、ご覧のようにブログ説明文の文字サイズが変更されます。【第43回】ブログ全体の文字サイズを変更する前回、ブログの文字のサイズは、定義の方法によってはブラウザの表示設定次第で大きさが変わるというお話をしました。そこで今回からは、ブラウザの表示設定に依存しない文字サイズの設定を行っていきたいとおもいます。今回は、ブログ全体の文字サイズの変更を行ってみましょう。ブログ全体というのは、ここでは個別に文字サイズの定義がされていない箇所全体のことを指します。テンプレートによってその範囲は異なってきますが、このブログで使用しているこねこ(左サイドバー)テンプレートを前提とします。CSSの変更箇所と、その影響範囲の参考にして下さい。★ブログ全体の文字サイズを変更する方法★body要素のfont-sizeプロパティの値を変更する。Pゴシック";font-size:13px;}bodyというのはHTMLのbody要素のことを指し、要するにブログの表示部分全体のことです。このbodyのfont-sizeを変更することによって、個別にfont-sizeが定義されている箇所以外はすべて文字サイズが変更されます。▼▼▼ご覧のように、今回の修正で変更された箇所は以下の通りです。逆に言うと、これらの箇所の文字サイズは全てbody要素のfont-sizeで定義されているため、例えばコメント欄の文字のみを小さくする場合には、別途新たな定義付けが必要となります。今回は、ブログの文字サイズとブラウザ表示について解説してみたいと思います。自分のブログの文字サイズが、実は見る人によって異なっている可能性があるということをご存知ですか?試しに、ブラウザの文字表示サイズを変更してみましょう。ブラウザのメニューで表示⇒文字のサイズ⇒最大を選択してみて下さい。(注)この時、ご自分の元の設定(下図では“中”)を忘れないようにして下さいね。すると、Seesaaブログのテンプレートこねこ(左サイドバー)のフォント設定では、ご覧のように表示が変わってしまいます。▼▼▼ブログのタイトル文字のサイズ、その下の説明文、記事のタイトル、日付、本文文字サイズ等々、ほぼすべての文字が大きくなっているのがお分かりかと思います。なってしまうかというと、フォントサイズの定義が、ブラウザ依存の定義になっているからです。a要素で以下のように定義されています。{font-size:x-large;}このx-largeがタイトル文字の大きさを表しているわけなのですが、ご覧の通り「大きい」という意味で、それが何pxあるいは何ptなのかが分かりません。これは、フォントサイズを7段階(xx-small、x-small、small、medium、large、x-large、xx-large)で定義する方法で、ブラウザの文字表示設定に依存してその大きさが変わるのが特徴です。小さな字を読みにくい人は、ブラウザの表示文字サイズを大きくすると読みやすくなるといったメリットがあります。一方でこの定義方法は、ブログのデザインが、作る人と見る人で異なってしまうというリスクをはらんでいます。この定義方法が良いかどうかは人によって意見が分かれるかもしれませんが、デザインも含めてブログを管理している立場から言えば、やはりフォントサイズは自分がイメージしているサイズで見てもらいたいもの。見る人がブラウザの文字サイズ設定を大きくしていても小さくしていても、自分が思った通りのサイズで表示したいですね。このように、文字サイズをブラウザの設定に依存させないためには、font-sizeを具体的な値で定義する必要があります。一度上の変更前/後の図を見比べて頂きたいのですが、この中でサイドコンテンツの本文文字サイズは変わっていないと思います。これは、第4回で文字サイズを以下のように数値で定義しているからです。font-size:11px;このようにfont-sizeを数値で定義してしまえば、ブラウザの設定によって文字の大きさが変わることがありません。【第41回】背景画像を変更する今回は、ブログの背景画像を設定してみましょう。Seesaaブログのテンプレートこねこ(左サイドバー)は、背景画像が設定されておらず、背景色が白(#FFF)に設定されています。今回はこの背景に、下の大きな画像を一つ設定してみます。今回編集するのは、ブログ全体の背景。そこで、ブログ全体を定義するクラスに背景プロパティを追記していくことになります。第22回の記事でもご紹介したように、Seesaaブログでブログ全体を定義しているのは#containerです。ここに、背景画像を定義するbackground系のプロパティを追記していきましょう。★ブログに背景画像を設定する方法★#containerの中に、background系のプロパティを追加する。top;}今回はこのように、4つのプロパティを追記してみました。background-imageは、背景に表示する画像を設定するプロパティです。url()の中に、表示する画像のURLを記載します。自分で用意した画像のアップロードとURLの取得方法については、第24回を参照してください。background-repeatは、背景画像の繰り返しを定義するプロパティです。今回は値をno-repeatとし、背景画像を繰り返さない設定にしました。背景画像を繰り返し表示する例については、コメント欄の背景画像を設定した第38回を参照してください。background-attachmentは、ブラウザ上での背景画像表示位置の固定/非固定を定義します。今回はfixedとしており、ブラウザ上で画面をスクロールしても、背景画像はスクロールされない設定としています。)を定義するプロパティです。今回は、水平方向はcenterすなわち中央寄せ、垂直方向はtopで上寄せにしています。このようにCSSを変更すると、このブログのデザインはご覧のようになります。▼▼▼おっと、タイトル画像があるので、背景画像が良く見えませんね。そこで、タイトル画像をなくしてみましょう。タイトル画像のクラスやプロパティなどは、第39回をご覧下さい。▼▼▼タイトル画像を消すと、ご覧のように背景画像が良く見えるようになりました。ちなみにこの画像は、上記でbackground-attachmentプロパティで設定した通り、画面をスクロールさせても同じ位置に表示され続けます。おっと、記事本文の背景が白(#FFF)で定義されているので、背景画像が表示されません。そこで、ここでは、記事本文を表す.blogクラスの背景色プロパティbackground-color:#fff;を削除してみました。記事本文を表す.blogクラスについては、第5回で枠線を追加する際に一度説明しています。これで、記事本文の背景にも、画像が表示されるようになりました。背景画像は、表示位置や繰り返し設定などによって、ブログの表情が変わってきます。>>Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。