シーサーブログの説明文の文字色や大きさ、位置調整のカスタマイズ

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

今回はシーサーブログの説明文の部分をカスタマイズしていきます。文字の色や大きさ、それから位置調整の方法も紹介します。

説明文は検索エンジンで検索した時にも表示されるテキストなので訪問者を興味を持ってもらえる説明文にする事で検索からの訪問者も増やす事につながります。

この説明文はシーサーブログの管理画面の「設定」⇒「ブログ設定」の「ブログ説明」という欄に記入したテキストがブログのタイトルの下に表示されるようになっています。

シーサー説明文-1

説明文が長くなるという場合はこの説明文を記入する欄でEnterキーで改行をすると改行もそのまま反映されるので好きな位置で改行を加えておく事をおすすめします。

説明文の文字の大きさや色等を変更する

シーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「自分のテンプレート名」をクリックして下さい。沢山コードが書かれていると思いますが、ここの一番下に説明文をカスタマイズするコードを追加していきます。

注意点としてはブログのテンプレートによってこの説明文の部分の名前が違います。「#banner .description」もしくは「.description」という名前になっているハズなので、変更が反映されない場合はこの名前の部分を書き換えてみて下さい。

#banner .description {
color: #000000;/* 文字の色 */
font-size: 14px; /* 文字の大きさ */
line-height: 20px; /* 文字の高さ */
}

それぞれ対応する部分を好きに変更する事で文字色や文字の大きさや改行している行間の高さを指定する事ができます。

説明文の位置調整の方法

説明文の位置調整は同じくデザイン設定の「padding」で調整する事ができますが説明文で改行を使っている場合は上手く位置調整ができません。上手く位置調整をする方法も紹介しておきます。

まずは説明文が短くて改行を使っていない場合は次のコードを追加。

#banner .description {
padding-left: 10px;}

「padding-left」で指定した分だけ左に余白ができます(右にずれる)。また、上や下に余白が欲しい場合には次に紹介する改行を使っている方と同じ方法でやってみましょう。

長い説明文で改行を使っている場合は最初の1行目だけは右にずらす事ができますが、改行した後の文章の位置は元のままになっています。

説明文-1

これを解決するにはシーサーブログの管理画面から「デザイン」⇒「コンテンツ」⇒「ブログ説明」をクリック。

説明文-2

この「ブログ説明」の「コンテンツHTML編集」をクリックするとこのようなコードがあります。

<% content.header -%>
<span class="description"><% content.blog_desc.text | nl2br | __or__ | blog.description | nl2br %></span>
<% content.footer -%>

ここの「span」「/span」を「div」「/div」に書き換えてこのように変更します。

<% content.header -%>
<div class="description"><% content.blog_desc.text | nl2br | __or__ | blog.description | nl2br %></div>
<% content.footer -%>

書き換えたら下の保存をクリックして画面を閉じ、コンテンツ一覧画面に戻るのでもう一度下の「保存」をクリックしておきましょう。

これでまた管理画面から「デザイン」⇒「デザイン設定」⇒「自分のテンプレート名」をクリックして次のコードを追加。

#banner .description {
padding: 10px 10px 10px 10px;}

この「padding」は時計周りの順番で「上、右、下、左」の順番に余白を指定する事ができるので余白を設定して位置調整します。設定したら「保存」を忘れずに。

これで改行していても改行部分も含めた部分を自由に調整する事ができました。

説明文-3

以上で説明文のカスタマイズは完了。他のカスタマイズもやっていきましょう。
シーサーブログカスタマイズとSEOまとめ

シーサーブログの説明文の文字色や大きさ、位置調整のカスタマイズ”に4件のコメントがあります。

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

  1. しげぞう 投稿作成者

    アイス様

    無事に反映されてよかったです。私自身も同じように色々な方に頼って勉強させて貰っていますので、それが他の方にも還元できる事は非常に嬉しいです。今後も遠慮なくコメント頂けたら嬉しいです。どうぞよろしくお願い致します。

  2. アイス

    できました!!
    CSSの知識がまったくなかったので何日も調べてもわからず本当に困っておりました。
    すぐにお返事をくださってありがとうございます。
    今後もいろいろ勉強させていただきたいのでまた頼ってしまったらごめんなさい。
    本当に本当に助かりました…(;▽;)
    ありがとうございました!!

  3. しげぞう 投稿作成者

    アイス様

    コメントありがとうございます。説明文を非表示にする場合にはスタイルシートの一番下に次のコードを追加でOKだと思います。

    .description {
        display: none;
    }

    これでブログを表示させて「Ctrl」と「F5」を一緒に押してリロードしてから確認してみて下さい。上手く反映されない場合にはお手数ですが、アイス様の使われているデザイン名を書いて再度コメント頂けると助かります。どうぞよろしくお願い致します。

  4. アイス

    突然のコメントすみません。
    いつも参考にさせていただいています(^^)
    解説がとても丁寧なので、毎日何度も訪問させていただいては勉強しております。

    どうしてもわからないところがあるのですが、新システムになってからのブログの説明文の消し方がわからず困っております。
    旧システムだとスタイルシートの「.descreption」のところにいって編集をするんだと思うのですが、新システムだと「descreption」が見つからず3日ほど悩んでいます(^^;)
    貴サイト様のコンテンツ内もいろいろ探してみたのですがどうしてもわからなかったので、もしお手すきのときがありましたら、気が向いたときにでもお返事いただけたら大変助かります。
    勝手なお願いで大変申し訳ありません。
    よかったらどうぞよろしくお願いいたします。