Seesaaブログのデザイン変更ワザ

このブログについて

このブログでは、Seesaaブログのデザインのカスタマイズ方法をご紹介しています。 Seesaaブログというのは本当に自由度の高いブログで、HTMLレベルやCSSレベル等、様々なデザインのカスタマイズが可能です。 やろうと思えば、完全オリジナルのデザインにすることもできてしまいます。 例えば、このブログのタイトル文字を大きくする方法をご紹介しましょう。 ★ブログのタイトル文字を大きく…

2014/12/03 12:03

【第77回】iPhone用CSS公開 ― Stripe Purple ―

第57回からの一連の記事で編集してきた、SeesaaブログのiPhone用カスタマイズCSSを公開します。 SeesaaブログをiPhoneで見た時のデザインが、こんな感じになります！ ＜トップページ＞

2011/02/27 00:59

【第76回】iPhone用コメントの文字サイズを変更する

今回は、iPhone用デザインのコメント欄の文字サイズを変更します。 第62回でご紹介したように、Seesaaブログのコメント欄は複数のクラスで構成されています。 今回は、第74回で実施した本文の文字サイズ変更に合わせて、コメント欄全体をfont-size:90%にしてみましょう。 ▼▼▼ 変更前 ▼▼▼ ＜縦表示＞

2011/02/26 20:00

【第75回】iPhone用引用書式を追加する

私は、ブログの記事を書く時に、よく引用（blockquote）を使用します。 しかし、SeesaaブログのiPhone用CSSには、引用のデザインは定義されていないんですよね。 こんなふうに、味気ない表示になってしまいます。 ▼▼▼ 変更前 ▼▼▼ ＜縦表示＞

2011/02/25 20:00

【第74回】iPhone用記事本文の文字サイズを変更する

今回は、記事の文字サイズを変更します。 文字サイズの変更は、PCブログデザインの方でもたくさん事例を紹介しました。 font-sizeプロパティを修正します。 ▼▼▼ 変更前 ▼▼▼ ＜縦表示＞

2011/02/24 20:00

【第73回】iPhone用CSSを記事ページに展開する

さて、前回までで、ようやくiPhone用トップページのデザイン変更が完了しました。 今回からは、記事ページの方のデザイン変更に入っていきましょう。 ・・・といっても、トップページのようにまたイチから作成する必要はありません。 今回はまず、今まで作成してきたトップページ用のCSSを、記事ページにも適用してしまいましょう。 iPhone用CSS変更画面の右上で記事

2011/02/23 20:00

【第72回】iPhone用の文字サイズ自動調整を解除する

さて、実は前回で、iPhone用トップページのデザインは出来上がっています。 しかし、ここでちょっと注意事項があります。 こちらの図をご覧下さい。 ▼▼▼ 変更前 ▼▼▼ ＜縦表示＞ ＜横表示＞

2011/02/22 20:00

【第71回】iPhone用フッターの色を変更する

今回は、iPhone用デザインのフッターを変更してみましょう。 まず、フッターの背景色を、日付見出しと同じ紫色にします。 さらに、日付見出し部分に使われている透過PNGを使って、フッターを立体的に見えるようにします。 要するに、日付見出し箇所と同じようなデザインになります。 ▼▼▼ 変更前 ▼▼▼ ＜縦表示＞

2011/02/21 20:00

【第70回】ここまでのまとめ（第61回～第69回）

こんにちは、ほくほくです。 最近は、すっかりiPhone用デザインの記事が中心になっていますね。 第70回の今回は、第61回から第69回に掲載した内容の概要をお伝えします。 なお、それ以前の記事については、こちらをご覧下さい。 ◆【第10回】ここまでのまとめ（第1回〜第9回） ◆

2011/02/20 20:00

【第69回】iPhone用記事見出しの文字サイズを変更する

今回は、iPhone用トップ画面に表示されている記事見出しの文字サイズを変更します。 またそれに合わせて、記事見出し表示領域の微調整も行います。 現在編集中のデザインだと、記事見出しは日付の下に表示されている領域にあたります。 ▼▼▼ 変更前 ▼▼▼ ＜縦表示＞

2011/02/19 20:00

【第68回】iPhone用日付見出しの色を変更する

今回は、日付見出しのデザインを変更してみます。 そもそもSeesaaブログのblueテンプレートにおける日付見出しは、背景色と文字色が同色系で見にくいと思うのですが・・・ ▼▼▼ 変更前 ▼▼▼ ＜縦表示＞

2011/02/18 19:54

【第67回】iPhone用ナビゲーションの文字サイズを変更する

今回は、iPhone用デザインのナビゲーション部分の文字サイズを変更します。 ナビゲーションというのは、広告の下に表示されている次の3件≫の箇所です。 ▼▼▼ 変更前 ▼▼▼ ＜縦表示＞

2011/02/17 20:00

【第66回】iPhone用ブログ説明文のデザインを変更する

前回までで、iPhone用ページのタイトル部分の変更が完了しました。 今回は、その下にあるブログ説明文部分の変更を行っていきます。 今回の変更を行った結果がこちらです。 ▼▼▼ 変更前 ▼▼▼ ＜縦表示＞ ＜横表…

2011/02/16 19:49

【第65回】iPhone用タイトル文字を変更する

前回までで、SeesaaブログのiPhone用デザインのタイトル背景画像と、ボタンのデザイン修正を行いました。 でも現状だと、タイトル文字がボタンの後ろに隠れてしまいます。 そもそもボタンがあると、タイトル表示部分が短くなってしまうため、タイトルを短くするか文字サイズを小さくしなければなりません。 かといって、このPC用表示ボタンは、削除したくありませんし・・・ ということで、今回は上部にボタン分の隙間…

2011/02/15 19:45

【第64回】iPhone用タイトルのボタンを調整する

SeesaaブログのiPhone用ページには、タイトル部分に2つのボタンが表示されます。 1つが、Seesaaブログのトップページ（PC用サイト）に遷移するボタン。 もう1つが、ブログをPC用表示に切り替えるボタンです。 個人的には、iPhoneでブログを見に来た人が、Seesaaブログのトップページに行きたいとは思わないのではないかと思います。 よって私のサイトでは、Seesaaボタンは削除しました。 また、PC用表示に切り替え…

2011/02/14 20:00