シーサーブログカスタマイズとSEOまとめ

本日(2015年5月)Seesaaブログの一部リニューアルが行われ、新デザインシステムがリリースされました。もちろんこれまでのシステムを利用することもできます。ここにまとめた記事は新システムではなく、従来のシステム版になります。

早速新システム版のカスタマイズ記事も書きましたので、これからSeesaaブログでブログを始める方は新システム版のカスタマイズを参考にして下さい。
Seesaaブログカスタマイズまとめ【新システム】

このページでは旧システムのシーサーブログのカスタマイズの記事をまとめておいたので参考にして下さい。

サンプルとして「超シンプル 右サイドバー」というテンプレートでのやり方を解説しますが、それ以外のテンプレートでも大体同じ要領です。このブログはWordPressのテンプレートを使っていますが、同じような見た目にする事もできます。

注意点としてはすでに上位表示されているようなサイトの場合はテンプレートを変更しただけでも順位が落ちる事もあるのでカスタマイズは慎重に、そして自己責任で。

シーサーブログと同じシステムの「さくらのブログ」「So-netブログ」、最近では「ファンブログ」も同じシステムになっているので同じ方法でカスタマイズできると思います。システムに変更がなければ。

それからカスタマイズする前にはメモ帳等に現在のHTMLやCSSをコピーしておき、失敗しても元に戻せるようにしておいてカスタマイズする事をおすすめします。それからカスタマイズが反映されない時の対処方法も最初に知っておいて下さい。
ブログのカスタマイズ(CSS)が反映されない場合の対処法

シーサーブログのSEO対策

シーサーブログカスタマイズ

以上シーサーブログのカスタマイズとSEO関連記事。
アフィリエイトで稼ぐ方法のまとめページに戻る

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

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

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

シーサーブログカスタマイズとSEOまとめ”に31件のコメントがあります。

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

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

  1. じゅんじゅ

    Seesaaブログのカスタマイズをするさいに参考にさしてもらってます!ブログの見やすさ、質にびっくり凄いです!で見出しタグやグローバルナビの設定をしてプレビューではしっかりと変わっているのですがいざブログを見てみると反映されていません。これはどういうことなのでしょうか?

  2. しげぞう 投稿作成者

    かず様

    コメントありがとうございます。基本的にスタイルシート(CSS)の変更だけで順位が落ちる事はほとんどないですが、文字の見やすさ、フォント、見やすさが変わるとPVは減ったりする事もあります。離脱率や直帰率などに影響する事はあるかと思いますが、そこまで神経質になるような事ではないと思います。

    ただでさえ、順位が1つ変わっただけでもPVが大幅に増減する事はありますので、カスタマイズだけがPVに影響する訳ではありません。コンテンツさえ良ければPVは伸びます。

    一度初期化する前に今の状態のCSSやHTMLをメモ帳などにコピーして残しておけば後で元にも戻せますし、気になる部分をそのままにしておくとずっと気になるので、私なら初期化してやり直しするかなと思います。

  3. かず

    最近このブログを拝見し、カスタマイズの勉強をさせていただいております。
    旧システムのseesaaブログで、あれこれうまくいかないところがあり、
    質問させていただく事にしました。

    うまくいかないのは、
    よくわからずに、カスタマイズをしたせいかもしれないと思い、
    デザイン設定の「初期値に戻す」コマンドを使って
    カスタマイズのやり直しを、と考えているのですが、
    この場合、SEO上の不利…のような事が起こるのでしょうか?
    しげぞう様のカスタマイズを行ったところ、ぐっとPVが伸びてきたので、
    これが振り出しに戻る事を考えると恐怖を感じます。

    よろしくお願いします。

  4. 虎次郎

    しげぞう様、素早い返信ありがとうございます。
    Seesaaでのレスポンシブ化はあきらめて、wordpressで頑張ってみることにします!

  5. しげぞう 投稿作成者

    虎次郎様

    コメントありがとうございます。レスポンシブはPC、タブレット、スマホのスタイルシートを条件を分岐しながら1枚のスタイルシートで最適化する作業になります。そもそもSeesaaブログの場合はPC用とスマホ用でURLやスタイルシート、HTMLも別に用意されています。

    Seesaaブログの場合はスマホ用のスタイルシートは編集できますが、HTMLは編集できない感じです。なので、これをレスポンシブ化するのはちょっと難しいかもしれません。無料ブログのスマホページには広告が多く、それがブログ運営側の収益になっている部分もあると思いますので、これを無理やり変更するような事ができてしまうとブログ運営側も困ってしまうのではないかな?と思います。

    利用規約的にOKなのかも調べてませんが、スマホページのHTMLを編集できない仕様を考えると多分NGなんではないかなと個人的に思ってます(確信はありませんが)。なので、どうしてもスマホページをもっと最適化したい場合にはやはり独自ドメインでWordPressという選択肢も考えてみても良いかなと思います。

    無理して大事なサイトを削除されたら意味がありませんので、その辺は一度問い合わせなどもしてみて考えてみるべきかと思います。

  6. 虎次郎

    しげぞう様、いつもお世話になっています。m(__)m
    わからないことがありましたので質問失礼いたします!

    Seesaaブログをスマホでもpc表示をさせるための設定をしてみました。すると一応スマホでも見えるのですが、画像が切れてしまったり、ヘッダーもつぶれてしまったりしてとても見づらくなってしまいました。そこで、pcでもスマホでもちゃんと表示させるための「レスポンシブ」というのを見つけたのですが、これは初心者には難しいのでしょうか?htmlやcssをさわってみたものの、やはりよくわかりません。もしできるとすればやり方も教えて頂きたいです。よろしくお願い致します。

  7. しげぞう 投稿作成者

    STREET・F様

    おそらくSTREET・F様のブログはSeesaaブログの旧システムですよね。ブログのタイトル部分が灰色になっていますが、Seesaaブログの管理画面からデザイン⇒デザイン設定⇒適応中のデザインを選択して、スタイルシートを開きます。

    スタイルシートの一番下に次のコードを入れてみてもらえますか?

    h1 a {
        color: #ff0000;
    }

    色はお好きな数値に変更してOKです。これで一度保存してブログを開き、「Ctrl」と「F5」を一緒に押してリロードしてから確認してみて下さい。

    それでも反映されない場合には再度コメント頂けると助かります。どうぞよろしくお願い致します。

  8. STREET・F

    前々からお世話になってます、
    色々と知恵をいただき、ブログのほうを変更していたのですが、

    ご覧の通りタイトルの文字が灰色になってしまいます。この色を替えたいのでHTMlを見てもいまいちわからないです。
    『ブログのファントや文字を見えやすくする~』もましたけどブログの設定からはサイドバーの設定しかできずにヘッダーの設定ができないようです
    。かと言ってタイトルなしではブログとして出来ないようで、困ってます。

    一度設定出来たので替えたくはないのですが、自由欄で文字色を替えるしかないのでしょうか?

  9. しげぞう 投稿作成者

    mugitya様

    コメントありがとうございます。Seesaaブログの場合はサイドバーに「プロフィール」というコンテンツを追加すれば、メールアドレスなども表示できるかと思いますので、プロフィール欄を追加して、設定でメールアドレスも入れてみると良いと思います。もしくは記事の投稿でお問い合わせページを作成しメールアドレスを直接書くという方法もいいかもしれません。

  10. mugitya

    ちわ!
    seesaaブログにメールフォームを作りたいのですが 方法があれば教えてください。
    seesaaにメールフォームがないのも不思議な感じがします。
    よろしくお願いします。

  11. しげぞう 投稿作成者

    ミロ様

    コメントありがとうございます。記事タイトルですが、普通の記事一覧や個別ページでタイトルが省略されているのでしょうか?それとも、サイドバー等の「最近の記事」でタイトルが省略されるという事でしょうか?お手数ですが、再度コメントで教えて頂けると助かります。また、利用中のテンプレート(デザイン名)も一緒に教えて頂けると助かります。よろしくお願い致します。

  12. ミロ

    最近Seesaaブログを始めたのでとても参考になってます。
    お聞きしたいのですが長い記事タイトルを全部表示するにはどうしたらよいのでしょうか?

    例えば「シーサーブログを始めましたのでよろしくお願いします」が「シーサーブログを始めましたので」までしか表示されません。幅が足りないせいだと思います。

    そこで記事タイトルを
    「シーサーブログを始めましたので
    よろしくお願いします」
    のように2行にして表示したいんです。

    記事タイトルを2行にする方法はあるのでしょうか?

  13. ふくだ

    ありがとうございます
    その方法でやってみます!

    何か方法が見つかったら記事にしてください

    早い お返事ありがとうございました

  14. しげぞう 投稿作成者

    ふくだ様

    コメントありがとうございます。私のSeesaaブログを幾つか持っているのですが、その場合もブログの設定でトップページの表示を1記事にして最新の記事をトップページにしてます。日付を最新にするか、もしくは書いた記事を過去の日付にして投稿してます。

    これを固定できればいいのですが、今の所いい方法が思いつかないので、日付を変更しながら調整してます。大体私のサイトの場合は常に更新するブログは少なく、作って完成というスタイルが多いので、一度完成すれば記事を追加する事も多くないので、面倒なのは完成するまでという感じです。

    また何かいい方法があれば記事にしていきますので、今後もよろしくお願い致します。

  15. ふくだ

    どうも、ふくだと申します
    seesaaブログの新デザインのカスタマイズで
    質問があるのですがよろしいでしょうか?

    トップページの記事上に固定したページを作りたいのですが
    コンテンツには記事下しかないので
    記事上に自由形式を置いて固定ページを作ることが
    出来ません

    日数を未来にする方法などしかないのでしょうか?

    方法があるのなら、どうか教えてください!

  16. しげぞう 投稿作成者

    Chisapon様

    報告ありがとうございます。ヘッダー画像とリンクが上手く設置できていて良かったです!私も色々と勉強になりました。また何かあれば遠慮なくコメント下さい。今後もどうぞよろしくお願い致します。

  17. Chisapon

    しげぞう様

    お世話になっております。
    ヘッダー画像のリンクですが、上手くいきましたー!!感激です。
    他の不明点含め、本当にありがとうございます。大変助かりました…!
    引き続きコンテンツ作成、カスタマイズに励みたいと思います。
    また不明点が出てきた際には質問させていただくことがあるかもしれませんが、どうぞよろしくお願い致します。お手数をおかけいたしました。

  18. しげぞう 投稿作成者

    Chisapon様

    報告ありがとうございます。オリジナルヘッダー画像には問題はないと思いますので、次のコードも追加してみて試してみて貰えますか?途中までは上手く反映されてますので、現在追加したコードはそのままでコードを追加して余白の調整をすれば上手くいくかもしれません。

    #banner h1 a {
        background-image: url(http://画像のURL);
    }
    
    #banner h1 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    もしこれで画像が表示されない場合にはお手数ですがもう一度コメント頂けると助かります。もうちょっとで上手く行く感じはします。

  19. Chisapon

    しげぞう様

    いつも迅速なご回答をありがとうございます。
    3つの質問のうち、①記事タイトル色②追尾型広告のずれに関しては無事解決致しました!①タイトル色は、Visitedが黒のままでしたので黒い文字とそうでない文字が不規則にあったのですね…しかも自分でクリックして訪問済みにしておきながら気づかず、自分に呆れてしまいました(泣)お騒がせ致しました。

    ③ヘッダー画像のリンクについては、CSSの反映のみ上手く行かない状態です。HTMLの修正でしげぞう様にご教示いただいた通り

    のコードを入れたらタイトル、説明文がオリジナルヘッダーに重なった状態でリンク付きで復活しました。(こちらのコードはなぜかもとからの部分がという状態で入っていました。。謎です。)

    そして、タイトルと説明文を消すためにご指示頂いたコードをCSSに追加したところ、最初の質問で書かせていただいた失敗例と同様、真っ白な帯状のバナー(リンク付き)で現れました。高さを何度か調整しましたが、リンクは真っ白な四角い部分のみで、それがオリジナルヘッダー画像に中途半端に被さった状態で出てきます。こんな感じです。

    オリジナルのヘッダー画像に問題があるといったような可能性はありますでしょうか。
    何度も申し訳ありません。

  20. しげぞう 投稿作成者

    Chisapon様

    コメントありがとうございます。1つ1つ回答してみますね。1回で全部解決すればいいのですが(笑)。

    1.記事タイトルの色の件

    記事タイトルはリンクになっていますので、スタイルシート(CSS)で色を変更してますよね。この内「h2.title a:visited」というのは「訪問済みの色」の設定になります。なので、一度リンクをクリックするとこの「visited」で設定した色になります。なので、色を変えたくない場合には通常のリンクの色と「visited」の色を一緒にしておくといいかもしれません。

    2.追尾型広告のずれ

    これは私も気が付きませんでした。下にスクロールするとサイドバーが終わってしまうので、サイドバーの横幅が反映されていないのが原因かと思われます。なので、スタイルシート(CSS)に次のコードを追加して試して見てください。このスクロールコンテンツにサイドバーと同じ横幅を設定します。

    .admax-side {
        width: 220px;
    }

    コードを追加して「保存」してからブログを確認し、「Ctrl」と「F5」を一緒に押してリロードしてから確認してみてください。

    3.ヘッダー画像について

    ヘッダーからタイトル(h1)を削除するとトップページへのリンクが無くなりますよね。するとリンク構造が変わってきます。例えばコンテンツが10ページあれば全てのページに本来トップページへのリンクが集まるはずなんですが、これを削除したという事なので、トップページへのリンク数が一気に変わります。おそらく順位が変動したのはこれが影響したかもしれませんし、単純にアルゴリズムの変動で順位が一時的に落ちただけかもしれません。

    説明文を削除して順位に影響するかはやってみないと分かりませんし、それが原因だと決めつける事もできません。個人的にはタイトルも説明文も残す場合が多いです。

    画像をリンクにするとトップページへのリンクが復活しますので、これはやっておくべきと思います。

    さて、本題の画像をリンクにする方法ですが、一応HTMLを変更していきますので、一度HTMLはコピーしてメモ帳などに貼り付けておいて下さい。上手くいかない場合には元に戻せるようにしておく事が大事になります。

    Chisapon様のブログを確認したのですが、タイトルと説明文を削除するためにHTMLの「div id=”banner”」の中身を削除したのでは無いかと思います。なので、一度これを復活させます。

    「デザイン」⇒「HTML」の編集で「div id=”banner”」に1度中身を戻してやります。こんな感じになります。

    <div id="banner">
    <% content_header %>
    </div>

    これをいれて保存すればヘッダーにブログのタイトルと説明文が復活すると思います。

    次に今度はスタイルシート(CSS)に次のコードを追加してみて下さい。

    #banner {
        padding: 0;
        height: 230px;
        }
    
    #banner .description {
        display: none;
    }
    
    #banner h1 a {
        display: block;
        text-indent: -9999px;
        height: 230px;
    }

    ブログのタイトルを-9999pxで表示エリアの外に持っていき、説明文に関しては「非表示」にしてます。非表示なのでソースには残っているのでこれでOKかなと思います。

    後は最初にやったHTMLの処理でタイトル部分がリンクになっているハズなのでこれに高さを設定し、画像部分全体がリンクになるかと思います。

    一応これでリンクになるとは思いますが、これも一度リロードして確認してみてください。またこれで上手くいかない場合にはお手数ですが、再度コメント頂けると助かります。

  21. しげぞう 投稿作成者

    >小林様

    コメントありがとうございます。なるほど、JavaScriptで実装する感じですね。新システムでもできると思いますが、私自身JavaScriptは勉強中なのですが凄く苦手なのです(笑)。すみません。ただ、代替案は考えてみました。JavaScriptは使わずに実装しますが、ちょっと面倒な手順になりますので、使う使わないは小林様で決めて下さい。

    カテゴリー自体を自分で作成するというやり方なので、カテゴリーを新規に追加した場合にはその都度自分でカテゴリーを追加するような形です。できるとこんな感じになりました。

    カテゴリー

    まず、自分のブログを表示させ、それぞれのカテゴリーをクリックし、それぞれの「カテゴリータイトル」と「URL」をメモ帳などに貼り付けておきます。

    次にサイドバーに自由形式を追加して自由形式のタイトルに「カテゴリー」と入れ、内容部分に次のコードを追加。

    <!--カテゴリ--->
    ■メインカテゴリー名
    <ul>
    <li>├ <a href="#" target="_blank">カテゴリ名ー1(10)</a></li>
    <li>├ <a href="#" target="_blank">カテゴリ名ー2(5)</a></li>
    <li>└ <a href="#" target="_blank">カテゴリ名ー3</a></li>
    </ul>
    
    ■メインカテゴリー名
    <ul>
    <li>├ <a href="#" target="_blank">カテゴリ名ー1</a></li>
    <li>├ <a href="#" target="_blank">カテゴリ名ー2</a></li>
    <li>└ <a href="#" target="_blank">カテゴリ名ー3</a></li>
    </ul>
    <!--カテゴリー終了-->

    ここの「#」の部分にそれぞれのカテゴリーのURLを入れて、「カテゴリー名」の部分にカテゴリータイトルを入れていきます。「li」から「/li」の部分を増やしたり減らしたりして、カテゴリーの数は自由にできます。

    また、カテゴリー名の右に「(10)」とか「(5)」とか書いてますが、これを追加するとそのカテゴリーに含まれる記事数を書けます。不要なら削除してもOKです。この数字の部分は自動で表示する事ができないので、自分で数字を入れる方法になりますので、無くてもいいかも知れません。

    ここまでできたら一度「保存」をして、この自由形式の画面を閉じます。閉じたらコンテンツ一覧の画面に戻るので再度「保存」をします(念のため)。

    最後に元々あったカテゴリーコンテンツを削除。という手順です。また、自由形式のタイトル「カテゴリー」が表示されない場合には自由形式のタイトルを表示させるカスタマイズもしておきます。
    Seesaaブログの自由形式のタイトルを表示させる方法【新システム】

    前述したように新規のカテゴリーが増えたら自分で自由形式を編集して追加していく形になるので、面倒かも知れません。その場合にはシス様に相談してみて下さい。

  22. 小林

    いつ大変大変!お世話になっております!
    度々、seesaaブログのカスタマイズ方法をする際、
    参考にさせて頂いております。

    そこで、質問をさせて下さい。

    私は「シス」さんとと言う方の方法で
    カテゴリーをツリー化してきました。
    (URL:http://siss.seesaa.net/article/25132142.html)

    以前はその方法で完璧にできました。

    最近新デザインシステムになってから
    新しいブログを立ち上げました。
    しかしコンテンツのhtmlの変更が出来ないと言うか
    解らないです・・・。

    個人的にカテゴリーをツリー化したほうが
    見やすいと思っているので
    この形式でツリー化できなくて困っています・・・。

    シスさんにコメントを残せばよいかと思いましたが、
    しげそう様はすでにseesaaブログの新デザインシステムについて
    色々と知っていらっしゃるし是非お聞きしたいと思い
    誠に勝手ながらご質問をさせて頂きました。

    どうぞよろしくお願い致します。

  23. しげぞう 投稿作成者

    >井上様

    コメントありがとうございます。ちょっと質問の部分がよく分からないのですが、カテゴリーの項目をクリックした時にブログタイトルの下の説明文を消したいということかなと思ってます。間違っていたら再度コメント下さい。

    シーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み、コンテンツが表示される画面で下にスクロールしていくと左下の方に「エキスパートモードに切り替え」というリンクがあります。これをクリックして下さい。

    エキスパートモードでどのコンテンツをどのページで表示するのか操作ができます。

    例えばカテゴリーページで説明文を表示したくない場合は「ブログ説明」の項目の「表示するページ」のチェックを外せばOKです。これで保存して確認してみて下さい。

  24. 井上

    seesaaブログで分からないことがあって検索していましたら、ここにたどり着きました。
    はじめてメールします。
    記事を、「商品紹介」「日記」「メルマガ」というようにカテゴリに分けているのですが、ここで「メルマガ」とか「日記」などクリックすると「ブログの説明文」も一緒に表示されてしまいます。これを消すにはどうすればいいのでしょうか。
    お忙しい中恐縮ですが、ご教示いただければ幸いです。

    当方多少のHTML・CSSの知識はあります。
    ぶしつけですが、なにとぞよろしくお願いいたします。

  25. 映画マニア

    しげぞう様
    早い回答ありがとうございました。またわかりづらい質問してすみませんでした。
    でもしげぞう様の回答で納得できましたのでありがとうございました。

    記事を詰め込みすぎてごちゃごちゃになったので、再度整理して作り直したいと思います。
    また何かありましたら質問させていただきたいので、その際は宜しくお願いしますm(__)m

  26. しげぞう 投稿作成者

    >映画マニア様

    コメントありがとうございます。多分カテゴリー分けの事だと思います。それならシーサーブログでも可能です。例えば「シーサーブログカスタマイズ」というカテゴリーを作成します。それでSeesaa関連の記事を書いていきますが、このカテゴリーにはそのカテゴリー内の最新の記事から順番に並びますので、Seesaa関連の記事を書いた後に「シーサーブログカスタマイズ」のカテゴリーに目次のようなまとめ記事を書いたらOKです。

    つまりカテゴリー「シーサーブログカスタマイズ」内の最新記事が「まとめ記事」という具合になります。公開する日付も編集できるので、シーサー関連の記事を追加したらまたまとめページを最新の日付に直して公開すればまとめページがカテゴリー内の最新記事になります。

    ちょっと説明がわかりにくくてすみません。また分からない場合はコメント頂けると助かります。

  27. 映画マニア

    しげぞう様
    最初に質問してから少し日が経ちましたが再度ご相談がありご連絡致しました。
    不慣れながらも1記事ずつですが記事を書いていますが、ブログタイトルではなく、記事を書く際の「○○とは」「○○のまとめ」など記事内で分ける際の表示方法なのですが、このページのように「シーサーブログカスタマイズ」みたいに表示させることはシーサーブログでも可能なのでしょうか?
    宜しくお願いしますm(__)m

  28. しげぞう 投稿作成者

    >菊池様

    わざわざコメントありがとうございます。初心者向けに書いているので非常に励みになります。私自身もまだまだ勉強中ですが、私の分かる範囲であればできるだけ質問やコメントには返信していこうと思っています。コメントから追加できた記事、修正できた記事等たくさんありますので、質問やコメントは私にとっても非常にありがたく、勉強にもなりますので今後ともどうぞよろしくお願い致します。

  29. 菊池

    コメント失礼します

    シーサーブログやアフィリエイトについて調べていたらこのブログに辿り着きました

    すぐにブログを作って教えてもらったカスタマイズをして、何とかシンプルなブログを作る事が出来ました
    初心者の僕にとって凄く助かりました
    ありがとうございます

    あなたの教え方は、とても分かりやすくてスムーズに実践できます
    本当に価値のあるブログに出会って嬉しい気持ちでいっぱいです!

    僕は本気でアフィリエイトに取り組んで人生を変えたいと思っています
    なので、これからもしげぞうさんから沢山勉強をさせてもらいますね!

    また、分からない事があった時はしげぞうさんに質問をしていいですか?

  30. しげぞう 投稿作成者

    >ananda様

    コメントありがとうございます。初心者向けにブログを作成しているのでこのようなコメントは非常に励みになります。最初からベストのコンテンツは難しいのでとにかくやってみるスタイルはおすすめです。やっている内に工夫やアイディアもでてきますし、経験を積めばどこが悪いのかも判断できるようになります。私も最初に作ったブログは直視できないくらいお粗末なブログで笑ってしまいます。当時は必死で考えたコンテンツだったのですが(笑)

    始める前にあれこれ考えるとスタートする事ができません。これをやってから始めようとか、まずはしっかり勉強してから始めようとか、色々言い訳を考えてスタートできなくなりますので、まずはスタートしてみる事が大事な事だと思います。これからも新しい記事を追加していきますので今後ともどうぞよろしくお願い致します。

  31. ananda

    アフェリエイトに興味があり
    シーサーブログをグーグルで検索していて、このページを観つけました
    全く未知の世界なので、何から始めていいのか分かりませんでしたが
    まずは、ブログの登録をして書いてみました
    お子様のお遊びのようなブログですが
    やらないと何も始まらないと思い
    今日最初の一歩から歩み始めました
    良心的なページだと思います
    またコメント致します
    ありがとうございます
    お身体に気をつけて