Seesaaブログアフィリエイトとカスタマイズ

Seesaaブログのフォントや文字のカスタマイズ【新システム】

Seesaaブログのフォントや文字の大きさ、リンクの色を変更する方法

今回はSeesaaブログのフォントや文字の大きさ、文字の色、リンクの色、行間などをカスタマイズする方法を紹介していきます。文字のフォントや色をちょっと変更するだけでも読みやすさが違ってくるので、結果的に訪問者の滞在時間が増えたりPV(ページビュー)が増えるという効果も期待できます。

一応基本的な部分を解説してみるのでそれを読んで自分なりのカスタマイズをしてみて下さい。

リンクの色をカスタマイズ

フォントや文字の大きさ、文字の色を変更する前に全体的なリンクの色を設定しておいた方がスムーズです。というのもスタイルシート(CSS)というのは後から書いた物が優先的に反映されるので、先に全体の部分をカスタマイズし、後から部分的なカスタマイズをしていくという手順がおすすめです。

Seesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択します。

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

それでスタイルシートの一番下までスクロールして次のコードを追加します。

  • リンクの色:青色でアンダーライン
  • 訪問済みのリンクの色:青色
  • カーソルが乗った時の色:灰色
  • リンクの文字:太字

これを追加すると「記事のタイトル」とかまで青色になってアンダーラインが入りますが、これは後で変更していくのでとりあえずこれでOK。先ほども書いたようにまずは全体を変更してから部分的な変更をしていきます。それとリンクの色はお好みで変更して下さい。

文字のフォントや文字の大きさを変更する

次にフォントの変更。フォントに関しては専門家ではないですが、基本的に複数のフォントを設定する必要があります。というのも「windows」「Mac」「Android」「iPhone」など使用するデバイスによって使えるフォントが違うので。

このフォントに関しては従来の旧システムよりも読みやすい感じになっているので初期状態のままでもいいですが、一応私が使っているフォントの設定の紹介だけしておきますね。

という訳で再度「スタイルシート編集」のタブを選択。

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

それでスタイルシートの一番下までスクロールして次のコードを追加。

これが現在個人的に使用しているフォントの設定です。

この「body」というのがブログの全体の設定になります。先ほども書いたように全体的な文字の大きさや文字色を設定しておいて、その下に部分的な(サイドバーの文字とか)変更を書いていけばOK。

スマホのCSSも忘れずに

SeesaaブログのCSSはPCとスマホのCSSが分かれているので、スマホのCSSにも同じように記述を追加しておきます。

デザイン⇒スマホ⇒CSS/HTML編集⇒適応中のデザイン⇒CSS編集と進めます。

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

スマートフォンのCSSの一番下にも先程PC版と同じCSSコードを追加しておけばOKです。

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

記事タイトル部分ですが、トップページ(記事一覧ページ)と個別記事でそれぞれカスタマイズが必要です。

トップページ(記事一覧ページ)のタイトル

先ほどリンクのカスタマイズでリンクの色を青にしたらトップページの「記事タイトル(リンク)」が青くなってしまいましたのでこれを黒っぽく変更してみます。

Seesaaブログのフォントや文字の大きさ、リンクの色を変更する方-3

  • 記事タイトルの色:#333(黒っぽいグレー)
  • アンダーライン:なし
  • 文字の大きさ:25px

個別記事の記事タイトル

個別記事の記事タイトルのカスタマイズは以下です。

  • 文字の大きさ:20px
  • 記事タイトルの下にドット線
  • 文字の色:#333(黒っぽいグレー)

サイドバータイトル部分

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

  • 文字の大きさ:20px
  • 文字の色:#333
  • 文字の太さ:太字

サイドバーのコンテンツ

ついでにサイドバーのコンテンツ部分。

大体こんな感じで変更できます。

Seesaaブログの画像URLを調べる方法

Seesaaブログの画像URLを調べる方法

今回は基礎的な部分でseesaaブログでの画像URLを調べる方法を書いておきます。 このブログではseesaaブログのSEOやカスタマイズについて書いていますが、カスタマイズで背景画像を設定したい場合やヘッダー画像を設置 … 続きを読む

Seesaaブログの広告を消す方法

Seesaaブログの広告を消す方法

Seesaa(シーサー)ブログの初期設定の状態だとブログ内に沢山の広告が表示されます。広告の多すぎるブログは訪問者にも検索エンジンにも嫌われてしまう可能性がありますので、Seesaaの広告を出来る限りすべて削除していきま … 続きを読む