Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第4回】サイドバーの文字を小さくする今回は、左サイドバーの本文文字の大きさを変えてみましょう。現在、このブログの左サイドバーの本文文字は、デフォルト設定で記事本文の文字と大きさが同じになっています。これはこれで良いのですが、個人的には、サイドバーは記事よりも幅も狭いですし、もう少し小さい文字の方がいいと感じています。いうことで、今回は左サイドバーの本文の文字を小さくしてみましょう。第2回でご説明したCSS変更画面を開いて下さい。このCSSの中で、左サイドバーの本文を規定しているセレクタのプロパティを変更することになります。左サイドバーの本文を規定しているのは、.sideクラスです。ところが、こねこ(左サイドバー)テンプレートでは、この.sideクラスの中に、フォントの大きさを指定するプロパティ(font-size)がありません。左サイドバーの文字の大きさは定義されていないのです。これはどういうことかというと、スタイルの継承にあたります。個々のセレクタでプロパティが設定されていない場合、より上位のセレクタのプロパティが適用されるのです。これをスタイルの継承と言います。具体的に言うと、こねこ(左サイドバー)テンプレートの左サイドバーの文字の大きさは、より上位のbody要素のスタイルが継承され、適用されているのです。こねこ(左サイドバー)テンプレートのbody要素の文字サイズプロパティの値設定は、以下の通りとなっています。Pゴシック";font-size:small;}このfont-size:small;が、左サイドバーの本文文字にも適用されてしまっているのです。いうことは、このプロパティの値を変更すれば、左サイドバーの文字の大きさを変更することができるのですが・・・このスタイルは、他の箇所にも継承されている可能性があるため、ここを修正してしまうとブログのデザインが大きく変わってしまう可能性があります。するかというと、スタイルの継承が左サイドバーに影響しないよう、左サイドバーで独自の文字サイズを定義してしまえばよいのです。すれば、スタイルの継承は発生しません。いうことで前置きが長くなってしまいましたが、今回は以下のような修正を加えることにします。★左サイドバーの文字サイズを小さくする方法★.sideクラスに、プロパティfont-sizeを書き加える。15px;font-size:11px;}このように変更することによって、左サイドバーの表示が以下のように変わりました。今まで文字サイズが大きかったためにすぐ折り返されていた文字列が、少し見やすくなりました。ここまでで、今回の左サイドバーの文字サイズを小さくする作業は終了です。今回はこねこ(左サイドバー)テンプレートをベースに説明したため、上記のような対応方法となっています。他のテンプレートを使用していて、既に.sideクラスにfont-sizeプロパティが存在している方は、その数値を変更するだけでサイドバーの文字サイズを変更することができます。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。