ページTOPへ

Seesaaブログ【新システム】の背景や文字を自由に変更する方法

Seesaaブログ【新システム】の背景や文字を自由に変更する方法



当サイトからご購入の方に豪華特典付き!






Seesaaブログ【新システム】の背景や文字を自由に変更する方法

 

 

今回はSeesaaブログの新デザインシステムの背景や文字を自由に変更する方法をご紹介して行きたいと思います。

 

CSSではセレクタの種類が同じ場合には、最後に指定したスタイルが優先的に反映されるので、カスタマイズしたいコードをCSSの一番下に追加する簡単なやり方です。

 

 

背景を変更する方法

 

背景に画像を利用したいという場合には先に画像をアップロードして画像のURLをメモ帳などに貼り付けておきましょう。

 

⇒Seesaaブログの画像をアップロードとURL(アドレス)を調べる方法

 

 

スタイルシート編集する

 

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「設定したデザインタイトル」をクリックします。

 

 

 

 

それで「スタイルシート編集」をクリックします。

 

 

 

 

スタイルシートを一番下に次のコードを追加します。追加してから保存すればOKです!

 

/* 全体の領域 */
body {
background-color:#eee; /* ここの色を自由に変更できます */
background-image: url("ここに画像のURL"); /* 画像を使いたい場合に画像のURLを記述*/
background-repeat:repeat; /* 画像の繰り返し */
}
/* ヘッダー・メインコンテンツ・サイドバーを含む領域 */
.l-wrapper {
background-color:#fff; /* 白 */
}

 

 

/* 記事タイトルと記事本文の領域 */
.entry {
padding-left: 20px !important; /* 左側に余白を取ってバランスを取ります */
padding-right: 10px !important; /* 右側にも余白を取ってバランスを取ります*/
}

 

.article {
padding-left: 20px !important; /* 左に余白 */
padding-right: 10px !important; /* 右に余白 */
}

 

 

.side--right{
padding-left: 10px !important; /* 左に余白 */
padding-right: 20px !important; /* 右に余白 */
}

 

以上は2カラムのテンプレート右サイドバーの場合です。使うデザインによってはちょっと違う部分もあるかもしれないので、それぞれ自分で考えながら背景を変更してみてください。

 

 

知っておくべきポイント:

 

  • 「body」:これは表示される画面全体の領域
  • 「.l-wrapper」:ヘッダー、メインコンテンツ、サイドバーを含む領域
  • 「.l-content」:メインコンテンツとサイドバーを含む領域
  • 「.header」:ヘッダーの領域
  • 「.entry」:記事タイトルと記事本文の領域
  • 「.side?right」:右サイドバーの領域
  • 「.side?left」:左サイドバーの領域

 

 

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

 

全体の文字の大きさや文字色を変更

 

スタイルシートの一番下に次のコードを追加して、保存します。

 

body{
font-size:17px; /* 文字の大きさ */
color:#333333; /* 文字の色(グレー) */
line-height: 1.7; /* 行の高さ */
}

 

「body」というのがブログの全体の設定になります。全体の文字の大きさや色を変更しても記事タイトルやサイドバーのタイトルには反映されないので、また別に設定が必要です。

 

 

記事タイトルの文字を変更

 

スタイルシートの一番下に次のコードを追加して、保存します。

 

/* 記事タイトル */
.entry__title {
font-size: 22px; /* 文字の大きさ */
}
.entry__title a {
color: #000; /* 文字の色 */
text-decoration: none; /* リンクの下線を表示させない */
}

 

 

サイドバータイトルの文字を変更

 

/* サイドバータイトル */
.module__heading {
font-size: 20px; /* 文字の大きさ */
color: #000000; /* 文字の色 */
font-weight: bold; /* 太字に */
}

 

サイドバーのコンテンツの文字を変更

 

.side {
font-size: 15px; /* 文字の大きさ */
}

 

.side a{
color: #0066cc; /* リンク文字の色 */
text-decoration:none; /* リンクの下線を表示させない */
}

 

大体こんな感じで変更できます。やってみてくださいね。

 

関連ページ

Seesaaブログ【新システム】のヘッダー画像を設置する方法
Seesaaブログ【新システム】のヘッダー画像を設置する方法について解説します。
Seesaaブログ【新システム】のヘッダー画像の下にメニューバーを設置する方法
Seesaaブログ【新システム】のヘッダー画像の下にメニューバーを設置する方法について解説します。
Seesaaブログ新デザインシステムのパンくずリストを設置する方法
Seesaaブログ新デザインシステムのパンくずリストを設置する方法について解説します。
Seesaaブログ【新システム】をSearch Consoleと連携させる方法
Seesaaブログ【新システム】をSearch Consoleと連携させる方法について解説します。
Seesaaブログにファビコンの作成と設置方法【新システム】
Seesaaブログにファビコンの作成と設置方法について解説します。

初心者でも月10万円

カテゴリー


ホーム 初心者のための講座 お小遣いサイト攻略法 お役立ち情報 初心者のための教材