シーサーブログのタイトルやサイドバーのタイトルのカスタマイズ

この記事はSeesaaブログの旧システム版です。新システムを利用している方はこちらの記事を参考にして下さい。
ブログのタイトルやサイドバーのタイトルのカスタマイズ【新システム】

今回はシーサーブログのタイトルや記事タイトル、サイドバータイトルの文字色や大きさ、位置調整のやり方等を紹介していきます。

この部分を変更するだけでも見た目がかなり違いますしコンテンツ、統一感が出てくきます。それぞれ基本的なカスタマイズを図解で紹介するので参考にしてみて下さい。

先にシーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「自分のテンプレート名」をクリックしてデザインのコードが沢山書いてある画面に移動しておきましょう。このコードの一番下にカスタマイズするコードを追加して行きますね。

ブログタイトルをカスタマイズ

まずはブログのタイトルの文字色や文字の大きさを変更してみましょう。

/* ブログタイトル部分 */
#banner h1 a {
font-size: 30px;
color:#000000;
background-color: #fff;}
 
#banner h1 a:hover {color: #7a8285;}
#banner {background-color: #fff;}
  • ブログタイトルの文字の大きさ
  • ブログタイトルの文字色
  • 背景色を白(fff)
  • カーソルが乗った時の色
  • タイトル部分を含むヘッダーの背景色

カラーや文字の大きさは自分の好きな色のコードに書き換えて下さい。後はブログタイトルの位置調整もしておきましょう。

#banner h1 {
margin: 0;
padding-top: 35px;
padding-bottom: 10px;
padding-left: 0px}

「padding-top」が上の余白で「padding-bottom」が下の余白、「padding-left」が左の余白。上や下、左に余白が欲しい場合はこれで位置の調整をしておきます。

記事タイトルをカスタマイズ

記事タイトルも要領は同じですが以前の記事「見出しタグhタグの最適化」という記事で、記事タイトル「h3」タグを「h2」に変更しているのでこの変更をしている場合は次のコードを追加して自分の好きな文字の大きさや色を指定してみて下さい。変更していない場合は「h2」という部分を「h3」に書き直して追加です。

/* 記事タイトル部分 */
h2.title a {
font-size:20px;
color:#000;}
 
h2.title a:visited{color:#000;}
h2.title a:hover{color:#7a8285;}
h2.title {background-color: #fff;
height:60px;}
  • 記事タイトルの文字の大きさ
  • 記事タイトルの文字色
  • 訪問済みの色
  • カーソルが乗った時の色
  • 記事タイトル部分の背景色
  • タイトル部分の高さ

これも位置調整が可能です。位置を調整が必要な場合は次のコードを追加。hタグを変更していない場合は「h2」を「h3」に書き換えて追加する事。

h2.title {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px}

サイドバータイトルのカスタマイズ

サイドバーも同じように変更していきましょう。次のコードを追加して色や文字の大きさはお好みで変更して下さい。

/* サイドバータイトル部分 */
.sidetitle {
height: 20px; /* 高さ */
line-height:20px;  /* ここはheightと同じ数値にする */
font-size: 15px; /* 文字の大きさ */
color: #fff; /* 文字色 */
background-color: #1F5E73; /* 背景色 */
border-radius: 3px; /* 角に丸みをつける */
margin-bottom:10px; /* 上に余白 */
margin-top:10px; /* 下に余白 */
padding: 5px;
}

この数値を変更してブログを確認してみましょう。それからサイドバーのタイトルを中央揃えにしたい場合はこれを追加。

.sidetitle{text-align:center;}

これでサイドバーのタイトルは中央揃えにする事ができます。
シーサーブログカスタマイズとSEOまとめ

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

シーサーブログのタイトルやサイドバーのタイトルのカスタマイズ”に9件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. そら

    しげぞうさん ありがとうございます。
    どうやら私の使っているのは旧デザインのようです。
    ということは無理なんですね・・・。
    調べて頂き本当にありがとうございました。
    お手数をお掛けしました。

  2. しげぞう 投稿作成者

    そら様

    コメントありがとうございます。Seesaaブログは「従来のデザイン(旧システム)」と「新デザインシステム」という2種類があり、ブログ開設する時に選べるようになっていたと思います。

    それでですね、テンプレート「超シンプル」が使えるのが多分旧システムだったと思いますので、そら様が使っているのは従来のデザイン(旧システム)かな?と思います。

    この旧デザインシステムでは関連記事などにアイキャッチ画像を自動的に挿入する仕組みにはなっていなかったと思います。実際に今、両方のデザインを幾つか確認してみたのですが、旧デザインの方をチェックしてみても関連記事などにアイキャッチ画像が入っている物が見当たりませんね。

    多分旧デザインシステムではアイキャッチ画像を関連記事などに出力する仕組みが無かったのかも知れません。この仕組み自体があればカスタマイズで何とかできそうなんですが、今の所見つかりません。すみません。

    新デザインシステムであれば元々そういう仕組みがあるので関連記事などにアイキャッチの挿入はできると思います。

    なので、まずはそら様のブログが旧デザインなのか新デザインシステムなのか確認をしてみてください。

    確認する方法としては管理画面から「デザイン」をクリックして

    デザイン一覧|デザイン設定|コンテンツ|HTML|とメニューが並んでいるなら旧デザインです。

    デザイン一覧|デザイン設定|コンテンツ|だけなら新デザインシステムです。

  3. そら

    はじめまして。
    今、初めてSeesaaブログを使い、カスタマイズを行っています。
    その為、色々と参考にさせていただいております。
    貴重な記事ありがとうございます。とても役立っております。
    それでお聞きしたいことがあるのですが、最新記事や関連記事などにアイキャッチ画像を表示するためにはどうしたら良いのでしょうか?
    全然表示されないため困っています。
    できれば、投稿日時を表示しない方法でやりたいのですが可能でしょうか?
    もし宜しければ教えていただけないでしょうか?
    使っているテンプレートは超シンプル(右サイドバー)です。

  4. しげぞう 投稿作成者

    >たか様

    コメントありがとうございます。サイドバーのタイトルの文字の大きさや色もデザイン⇒適応中のテンプレートを選択してスタイルシート(CSS)に追加です。ちょっと分かりずらくて済みません。もし反映されない場合はお手数ですがURLを教えて頂けたら確認してみます。コメント公開時にURLは削除しますので。

  5. たか

    いつもお世話になっております。
    コードを入れたのですがサイドバータイトルの色が変わりません。
    サイドバーのタイトルもデザインからですか?

  6. しげぞう 投稿作成者

    >まさお様

    問題解決良かったです。わざわざ報告ありがとうございました。

  7. しげぞう 投稿作成者

    >まさお様

    コメントありがとうございます。ブログタイトルにロゴを使う場合は管理画面⇒デザイン⇒コンテンツと進み、「ブログ画像」というコンテンツを追加する事で設定する事ができます。既存の「ブログタイトル」は消してこのブログ画像を利用するとロゴを使う事ができます。別サイトで詳しく図解されていますので参考にしてみて下さい。
    http://testhp.seesaa.net/article/30406464.html

  8. まさお

    ブログのタイトルそのものを、ロゴマークのような画像にしたい場合はどうしたらよいでしょうか?

    デザイン→コンテンツ→コンテンツHTMLかとは思いますが
    うまくいきません…