最強?無料Seesaaブログで簡単にホームページ作成!

目次
■初めての方は、「まずはじめに」の後に、トップページをご覧下さい。お勧め記事を集めました!
  その後は、ご自分の好きなところを読まれて大丈夫です。
トップまずはじめにブログ入門編Seesaa活用方法基本的な使い方SeesaaカスタマイズQ&Aお問い合せ
ランキングCSSHTMLアフィリエイトおすすめ本便利フリーソフトブログ紹介資産運用精神論足跡
TopSeesaaカスタマイズ>ブログのデザインを決めるCSS(スタイルシ−ト)の設定方法

■ブログのデザインを決めるCSS(スタイルシ−ト)の設定方法

スポンサードリンク

今日からいよいよSeesaaブログカスタマイズに行きたいと思います。

SeesaaBLOGにまだ慣れていない方は、まずは「SeesaaBLOGの使い方」を参考にしてください。

そして、慣れてきてちょっとカスタマイズしたいなという方は、これから説明することを参考にしてください。

アフィリエイトに挑戦される方は、カスタマイズしたほうがいいと思います。

但し、ここからはちょっと難しくなります。おかしくなったら初期値に戻せばよいようですが、自信のない方はやらない方が無難かもしれません。

また、不具合が生じた時アドバイスは致しますが、自己責任でやって頂きたいと思います。


今日は、ブログのデザインを決めるスタイルシ−トの設定方法について説明します。

ランキングに参加中!←今回は、長くなるので記事を読む前に応援お願いします!

Seesaaブログ にはもう登録した?

スタイルシートは、何ぞやって言う人は、たくさんいると思うのですがとりあえず説明を読んでみてください。

これを変更することで、全体のレイアウト、背景色、余白の設定、枠線をつける、文字の大きさ、色、リンクの色などを変えることが出来ます。

それでは、SeesaaBLOGでスタイルシートの設定を変える方法を説明していきます。

「習うより慣れろ」なんで私の説明を参考にして皆さんも頑張ってやってみてください。

また、オフィシャルページも参考にしてください。

重複したところもありますが、説明していきます。

私はしておりませんが、スタイルシートは、トップ、記事、過去ログ、カテゴリの各ページごとに設定することができるようです。

各ページごとの設定をしない場合には、トップだけ変更すればいいと思います。


手順は以下のようになります。

  1. マイブログのメニューより[デザイン]を選択してください。
  2. デザイン画面が表示されますので、上部メニューより[スタイルシート]を選択してください。
  3. するとスタイルシート画面が表示され、これまでに追加されたスタイルシートが一覧表示されています。
    スタイルシートの追加は、まずデザインの中のテンプレートをクリックしてみてください。
    次に、自分が変えたいテンプレートにチェックを入れてください。
    チェックを入れたら、一番下の追加をクリックしてください。
    これで、スタイルシートの追加が完了です。
  4. 一覧から適用したいスタイルシートの[適用]欄のラジオボタンを選び、[保存]ボタンをクリックしてください。

次にスタイルシートの編集方法について説明します。

  1. 一覧から編集したいスタイルシートの[タイトル]をクリックしてください。
  2. するとスタイルシート編集画面が表示されます。
  3. [スタイルシートのタイトル]を変更したい場合は、新しいタイトル名称を入力してください(初期値は、テンプレートのタイトルが設定されています)。※これは特に変更する必要はありません。
  4. スタイルシート欄にスタイルシートのソースデータが表示されていますので、直接編集を行います。
  5. 途中変更結果を見る場合は、[プレビュー]ボタンをクリックしてください。
  6. 編集が完了したら、[スタイルシートを変更する]ボタンをクリックしてください。
  7. 変更を反映させるためには、再構築が必要です。再構築の範囲は「CSS(スタイルシート)」です。

こんなふうにすれば、スタイルシートの変更及び編集することができます。

スタイルシートを編集するには、少し知識がいるのでこれからカテゴリ「スタイルシート」で少しずつ説明していこうと思います。

次回は、スタイルシートの記述方法の基本を説明していこうと思います。

ランキングに参加中!←応援お願いします!

ブログは読むだけでも楽しいですが、自分で作るともっと楽しくなること間違いなし。登録はこちらから簡単にできます→→ Seesaaブログ
スポンサードリンク

最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→

RSSをRSSリーダーに登録しても便利だと思います。

■人気記事ベスト5
トラックバック、コメントをする時の注意
コメントする時、ブログを持っている方はできるだけホームページアドレスを書いて頂きたいです。みんながどんな風にブログを使っているか知りたいです。宜しくお願いします。
特に、質問される方は、名前に自分のブログのリンク貼ってください。
リンクがない場合は、基本的に返事をしないつもりです。私一人で運営しておりますので、ご理解の程よろしくお願いします。

当サイトでは「トラックバック」歓迎します。ただし、相互リンクをして頂きたいと思います。
相互リンクがなく記事と関連があると判断した場合は、こちらからもトラックバックさせて頂くつもりです。お互いにとって有意義なものにしていきましょう!


トラックバックについて、まだよく分かってない方は、こちらで説明していますので参考にされてください。

特に
■記事と全く関連がないと判断される物
■「宣伝」「誘導」「誹謗中傷」を目的とした物
■リンク切れの場合
と判断したものにつきましては、「削除」させて頂こうと思いますのであらかじめご了承下さい。
同様に「コメント」も削除させて頂きます。
コメントへの返事の確認には、便利なブログコメントチェッカーを利用してください。
この記事へのコメント
ケンジさまはじめまして。匿名ですみません。こちらはたくさんの方が見にいらっしゃるようなので恥ずかしくて。

ひととおりFAQなどは見ましたがよくわからなかったので質問させて下さい。
シーサーブログを始めたのですが、ジャンルの変更は可能なのでしょうか?

サイトのデザインなどにはこちらを参考にさせて頂きます。ブログが形になったら改めて挨拶に参ります。
Posted by 通りすがり at 2005年03月28日 17:30
はじめまして、通りすがりさん。

記事を投稿した後のジャンルの変更ということでしょうか?

私はしたことはありませんが、記事一覧から自分の編集したい
記事のタイトルをクリックしてみてください。すると記事の編集を
行えるようになると思うので、ジャンルの変更をして保存をすると
もしかしたら結果に反映されるかもしれません。

それで出来なかった場合は、いったん記事を削除してからもう一度
新規で記事を投稿することになると思います。

その際は、元の記事をメモ帳などに保存しておくのを
忘れないようにしてください。

またのお越しをお待ちしていますね。
Posted by Seesaa大好きケンジ(管理人) at 2005年03月29日 23:40
ケンジさまこんにちは。
お返事ありがとうございました。

ごめんなさい、わからなかったところが、わかりました。ジャンルとは、ブログそのもののジャンルではなく、記事一つ一つについてなのですね。

いろいろ比較したのですが、シーサーは使いやすいと感じました。
頑張ります。
ありがとうございました!
Posted by 通りすがり at 2005年03月30日 21:45
通りすがりさん、こんにちは。

問題解決したようでよかったです。
またいらしてくださいね。

あと、ケンジさんでいいですよ(⌒-⌒)
Posted by Seesaa大好きケンジ(管理人) at 2005年03月30日 22:00
初めまして。

ただいまseesaaにお引っ越し中です。
seesaaにお詳しいサイトみたいなので
1つ質問させて下さい。

googleなどで検索をした時に記事の題名では無くて
サイト名の後に記事タイトル名が表示されますよね。
これをスタイルシートでTOP以外は記事タイトルが
表示されるように設定する方法をご存じないですか?

以前のブログでは記事タイトルが検索した場合表示
されていましたので問題が無かったんですが
seesaaは全てがサイト名になっているみたいです。
Posted by 西園寺 at 2005年05月03日 19:21
初めまして。

ただいまseesaaにお引っ越し中です。
seesaaにお詳しいサイトみたいなので
1つ質問させて下さい。

googleなどで検索をした時に記事の題名では無くて
サイト名の後に記事タイトル名が表示されますよね。
これをスタイルシートでTOP以外は記事タイトルが
表示されるように設定する方法をご存じないですか?

以前のブログでは記事タイトルが検索した場合表示
されていましたので問題が無かったんですが
seesaaは全てがサイト名になっているみたいです。
Posted by 西園寺 at 2005年05月03日 19:21
はじめまして。
ブログタイトルの背景の画像を左から右に
動かしたいのですがスタイルシートを
どういじればいいのかわからないので
教えてください。
Posted by nico at 2005年06月03日 00:22
はじめまして、nicoさん。

背景画像のURLを教えて頂いてよろしいですか?

どのような画像かによってアドバイスが変わってくると思います。

自分で作った画像でないのであれば、
ちょっと難しいかもしれません。
Posted by Seesaa大好きケンジ(管理人) at 2005年06月03日 14:00
ケンジさんこんばんは。
おっしゃるとおり自分で作った画像ではないのです。

ふわふわ。りさんからお借りしてきた画像です。
そこには前進させる場合のタグが表示されている
のですが、初心者のためHTMLはあまりわかりません。

借りた画像のリンク⇒http://fuwa2li.fc2web.com/bare/material.htm
Posted by nico at 2005年06月03日 23:37
たびたびすみません。
こちらのGif animationからお借りしました。
Posted by nico at 2005年06月03日 23:41
こんにちは、nicoさん。

画像拝見しました。

大きな画像では、ないので左側を空けることは
できそうです。

セレクタbannerで設定に

margin-left:サイズpx;

を追加してみてください。サイズは、プレビューで
確認しながらやってみてください。

以下の記事が参考人なると思います。
http://blogdehp.seesaa.net/article/2867291.html

分からなかったらまたコメントしてくださいね(^_^)
Posted by Seesaa大好きケンジ(管理人) at 2005年06月04日 11:13
こんばんは。
やってみたのですが、左に余白は空いたものの
ねこちゃんはその場で足踏みしておりました。
Posted by nico at 2005年06月06日 22:42
こんばんは、nicoさん。

>やってみたのですが、左に余白は空いたものの
>ねこちゃんはその場で足踏みしておりました。

その場で足踏みするのではなく、歩かせたいって
ことですか?
Posted by Seesaa大好きケンジ(管理人) at 2005年06月07日 01:24
そうなんです。前に歩かせたいんです。
http://fuwa2li.fc2web.com/bare/material.htm
のGif animationの見本で猫が歩き続けているの
ですがそんな感じにしたいんですよ。
でも初心者なもんでHTMLでどういじればいいのか
わからないのでスタイルシートでなんとかならないかと思って。。。

Posted by nico at 2005年06月07日 20:42
こんばんは、nicoさん。

私もスタイルシートでは、ちょっと分からないですね。
HTMLを使わないと多分歩かせる事は、できないと思います。

やり方は、サイトに書いてある通りでできると思いますが、HTML編集する必要があると思います。

もう少し慣れてきたら頑張ってみてください。
Posted by Seesaa大好きケンジ(管理人) at 2005年06月07日 22:44
ケンジさんこんばんは。
いろいろと親切にどうもありがとうございました。
また何かあったら世話になりにきます(笑)

Posted by nico at 2005年06月08日 23:58
こんばんは、nicoさん。

いえいえ、あまり力になれなくてすいません。
今後ともよろしくお願いします。
Posted by Seesaa大好きケンジ(管理人) at 2005年06月09日 02:21
はじめまして、あられコンコンです。
全くの初心者なので質問させていただきました。

コンテンツ一覧に並び順がありますが、10〜100までの数字が入っていますがどういう意味と考えたらいいですか?

初歩の質問ですみませんがよろしくお願い致します。
Posted by あられコンコン at 2005年07月24日 19:54
はじめまして。
こちらのブログを参考にさせていただき、スタイルシートを少しですが変更することができました。
大変勉強になりこれからの楽しみも増えました。
とりあえずお礼を申し上げたくておじゃましました。ありがとうございます。
Posted by かたおち at 2005年11月02日 00:50
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス: [必須入力]

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※半角英数字のみのコメントは投稿できません。
この記事へのトラックバック

スタイルシート
Excerpt: そろそろ 1年も過ぎた頃 プログラムを 簡潔化すべく スタイルシートについて学んでいた ページの背景を 入れるのに 素材を 見ていたら 自然いっぱいの素材集を見つけた とても 綺麗で 全国を廻って..
Weblog: Greenroom
Tracked: 2005-06-13 15:38

雰囲気変えてみました
Excerpt: デザインの変更に挑戦してみました
Weblog: 初心者のためのエクセル入門
Tracked: 2005-06-17 22:20

ブログをカスタマイズしたい。
Excerpt: 自分で作ったブログをカスタマイズしたいけど、よくやり方がわからない人は多いでしょう。 そんな人の為に簡単にブログがカスタマイズできるサイトを集めてみました。 ブログ別にカスタマイズサイトを掲載していま..
Weblog: ブログ初心者の為のblog
Tracked: 2006-09-17 23:22

このページのトップへ▲
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。