Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第10回】ここまでのまとめ(第1回〜第9回)こんにちは、ほくほくです。Seesaaブログを便利に、そして自由に使うために、デザイン変更のノウハウをお伝えしようという趣旨で始めたこのブログも、だんだん記事が増えてきました。そこで10回目となる今回は、これまでの第1回から第9回までに記載した内容をまとめつつ、簡単にご紹介したいと思います。【第1回】このブログについて第1回目の記事では、簡単に自己紹介を交えつつ、Seesaaブログのデザイン変更の実例としてこねこ(左サイドバー)テンプレートをベースに、ブログタイトルの文字の大きさを大きくする方法をご紹介しました。a、使用したプロパティはfont-sizeです。こねこ(左サイドバー)テンプレートは、その後現在に至るまで、記事に掲載している修正を徐々に加えつつ使用しています。今のところ、最も重要なコンテンツです。この画面を使わずして、Seesaaブログのデザイン変更はできないので。CSSの修正については全く実例を挙げていませんが、CSS変更画面の使い方については必ずこの記事をご覧下さい。【第3回】記事本文スタイルの変更ブログの記事の文字スタイルを変更した回です。こねこ(左サイドバー)テンプレートの本文文字が、全て太字となっていたため、この太字設定を削除しました。修正したクラスは.text。この中のプロパティfont-weight:bold;を削除することで、本文文字を太字から通常文字へと変更しました。【第4回】サイドバーの文字を小さくする今度は、サイドバーの文字サイズを変更した回です。このテンプレートのデフォルト文字サイズは大きかったので、それを小さくしました。使用したクラスは.side、修正したプロパティは第1回と同じくfont-sizeです。【第5回】記事に枠線を付ける当初このブログは、Seesaaブログで使用されている要素を順に説明していこうかと考えていました。この頃から、まずはこのこねこ(左サイドバー)テンプレートに修正を加えていきながら、その方法を公開する形になってきています。この回では、ブログ記事に枠線を付ける方法をご紹介しました。使用したのは.blogクラス。この中に、border-top、border-right、border-bottom、border-leftの各プロパティを書き加えて行きました。【第6回】サイドコンテンツに枠線を付ける第5回と同様に、今度はサイドコンテンツに枠線を付ける方法を紹介した回です。いざサイドコンテンツに枠線を付けてみると、他にもいくつかしなければならない作業がhっせいし、その後のサイドコンテンツシリーズにつながって行った回でもあります。この回で使用したのは.sidetitleクラスと、第4回と同じ.sideクラス。追加したプロパティは、第5回と同じborder系のプロパティです。【第7回】サイドタイトルのスペースを調整する第6回でサイドコンテンツに枠線をつけたら、いろいろと課題が発生してしまいました。その解決策の第1弾で、サイドコンテンツのタイトルと本文の枠線が微妙につながっていないという問題を解決する回になります。この回で、初めてmarginプロパティの修正を行いました。修正したクラスは、第6回と同じ.sidetitleです。【第8回】タグクラウドに枠線を付ける第6回で発生した課題の解決方法第2弾。この回では、タグクラウドの本文部分に枠線を付ける方法を紹介しています。修正したクラスは、.side-tagクラス。第5回と同じく、border系のプロパティを追加しています。【第9回】カレンダーに枠線を付ける第6回で発生した課題の解決方法第3弾。この回では、カレンダーに枠線を付ける方法を紹介しています。Seesaaブログのサイドコンテンツって、様々な形式で様々なクラスを使用しているので、それぞれに設定が必要になってしまうんですよね。この回で修正したのは、IDセレクタの#calendar。こちらに、第5回と同じくborder系のプロパティを追加しています。枠線を付けた結果、カレンダーとその下のコンテンツとの隙間が気になりました。そこで、第7回と同じくmarginプロパティを修正しています。以上が、第1回から第9回までの記事掲載内容になります。具体的なCSSの編集内容については、それぞれの記事内でご覧下さい。今後なのですが、サイドコンテンツの枠線設定課題がまだ少し残っていますので、まずはそちらを解説していきたいと思います。それから、このこねこ(左サイドバー)テンプレートのコンテンツのサイズ(横幅)がちょっと気になりだしているので、その修正に入っていこうと考えています。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。