Seesaaブログのタイトルやサイドバーのタイトルのカスタマイズ【新システム】

Seesaaブログのタイトル、記事タイトル、サイドバーのタイトルのカスタマイズ

今回はブログのタイトル部分や記事タイトル、サイドバーのタイトルのカスタマイズをしていきます。ちなみにブログタイトルや説明文は非表示にしたいという方はこちらの記事の途中で書いてますので、こちらを参考にして下さい。

Seesaaブログのヘッダー画像をリンクにする方法【新システム】

それでは早速カスタマイズスタート!

ブログタイトル部分のカスタマイズ

まずSeesaaブログの新システムではブログのタイトルが中央になっていますので、位置調整をしてから文字色とか文字の大きさを変更してみます。

せっかくなのでここで必要になるCSSの基本を幾つか紹介しておきます。これを覚えておけばブログのタイトルの位置調整は自分でできるようになります。

  • 「text-align:left」⇒文字の左寄せ
  • 「text-align:right」⇒文字を右寄せ
  • 「padding-left:●●px」⇒左に●●pxの余白(右に移動)
  • 「padding-right:●●px」⇒右に●●pxの余白(左に移動)
  • 「padding-top:●●px」⇒上に●●pxの余白(下に移動)
  • 「padding-bottom:●●px」⇒下に●●pxの余白(上に移動)

とりあえずこの6つがあればブログのタイトルは位置調整できるようになります。つまり、「text-align」で右もしくは左に寄せて「padding」で細かい位置を調整するようなイメージです。

例えばブログのタイトルを左上に持って行きたいという場合にはこんな感じ(スタイルシート編集で一番下にコードを追加)。

元々このヘッダーには上下80pxずつの余白があるので、この上の余白80px分を下にもっていき、テキスト部分を左に寄せる「text-align:left;」を追加。これならヘッダーの高さを変えずにタイトルだけ移動した感じになります。

それでついでにタイトル部分(h1)に30px分の余白(margin-top)を空けます。これは必要ないかもですが、時々タイトルが上に行き過ぎて見切れてしまうため念のために追加。

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

前述したようにヘッダー部分には初期状態で「上下」に80pxずつの余白があります。なのでヘッダー画像を設置しない人には広すぎるますよね。という事でこのスペースを小さくしたいという場合にはこんな感じでOK。

すると余白が無くなってこんな感じになります。

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

以上これでブログタイトルの位置調整は自分でできるはず。

ブログタイトルの文字の大きさや文字色を変更

さて、ブログのタイトルの文字の大きさや色を変更するので管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」と進み、「スタイルシート編集」のタブを選択。

Seesaaブログスタイルシート編集画面

スタイルシートの一番下に次のコードを追加。

後はそれぞれ好きな大きさや色に変更しておけばOK。ついでに「ブログの説明文」も同じ要領でスタイルシートの一番下に次のコードを追加していきます。

以上がブログのタイトルのカスタマイズです。

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

記事タイトルは「トップページに表示される記事タイトル」と「個別記事のタイトル」を別々に装飾する必要がありそうです。

スタイルシートの一番下に次のコードを追加。

一応文字の大きさと色だけ変更してみた例です。

個別記事の記事タイトルはリンクになっていないので、コードをまとめて書く事ができますが、トップページに表示される記事タイトルはリンクになっているので、上記のコードのように、色や文字の大きさなどは分けて書く必要があります。

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

それではサイドバーのタイトルのカスタマイズです。ここでは一応背景色を設定して文字を中央寄せにしてみました。これもスタイルシートにどんどん追加。

こんな感じになりました。

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

以上Seesaaブログのブログタイトル、記事タイトル、サイドバータイトルのカスタマイズでした。

最終更新日:2018/05/17

Seesaaブログのタイトルやサイドバーのタイトルのカスタマイズ【新システム】”に22件のコメントがあります。

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

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

  1. しげぞう 投稿作成者

    クニマス様

    コメントありがとうございます。私のSeesaaブログ(新デザインシステム)でチェックしてみたのですが、デフォルトでタブは「記事タイトル:ブログタイトル」という並びになっています。ここにURLが表示されるって事でしょうか?それをブログタイトルにしたいという感じですか?違ったらすみません。

    お手数ですが、再度質問もらえたら嬉しいです。もし良かったらブログのURLも教えて下さい。コメント公開時にはブログのURLは削除しますので、どうぞよろしくお願い致します。

  2. クニマス

    突然すいません。クニマスともうします。
    seesaaブログの設定方法について質問させて頂きたくコメントしました。

    初期設定だと、ブラウザタブのタイトルにURLが表示されているため、ブログタイトルに変更しようと試行錯誤しているところですが、方法が分かりません。
    様々なサイトで調べましたが、載っているのはバージョンが古いものばかりで、最新式の仕様での変更方法が分かりません。しげぞう様、もし方法をご存知でしたら、教えていただけないでしょうか。
    ちなみに過去の仕様でのやり方は以下のURLのようなものです。
    http://tempurememo.seesaa.net/article/78539512.html

    お手数かけますが、お返答のほどよろしくお願いします。

  3. トニー

    しげぞう様、返信が遅くれてしまい申し訳ありません。
    トニーです。

    CSSの件ですが、おかげさまでなんとか修復しました。
    うまくいかなかった原因ですが、
    見えない「?」マークが存在していることがわかりました。

    この「?」は見えないため、
    何が間違っているのか気付くことができないので、
    ためにメモ帳に貼り付けたコードにある空白をすべて削除し、
    再び空白をいれるとうまくいくことがわかりました。

    いろいろと丁寧に教えて頂き、
    本当にありがとうございました!

    最後に、僕の使用しているデザイン名は、
    シンプルA.ホワイト 右カラムでした。

  4. しげぞう 投稿作成者

    トニー様

    返信ありがとうございます。トニー様のCSSからそのまま追加されているコードを私のSeesaaブログに貼り付けて確認したのですが、反映されているので原因がよく分かりませんね。1度追加したCSSを全てコピーしてメモ帳などに貼り付け。それで追加したCSSを全部削除して保存(初期状態に)。

    それからもう一度改めてCSSを追加してもらえないでしょうか?それと使われているデザインも教えてもらえると助かります。