こんにちは。アフィリエイトにずっぽりのター坊です。
さて無料ブログでのアフィリエイトもいいかもしれないと思いSeesaaブログでブログを作ってみましたよ。無料ブログでのアフィリエイトは何がいいかと言うと手間がかからないことです。ただSeesaaブログはスマホでの広告表示は消せないのでそこはスマホの収益を一部捨てる覚悟でやるべきですね。ただ作ってみてみましたがスマホの広告ってブログタイトルの上に2行くらいテキスト広告が表示されるだけじゃないかと思いますが。うざいと言えばうざいけどそこまでじゃまにならないかも。
表題の件ですが無料ブログのCSS変更は毎回めんどくさい!!
例えば見出しのH3を変えようと思って該当の場所を変更しても変わらない!!なんてことがあるわけです。
今回ざっと変更してみたのでまとめておきます。
ちなみに今回使っているのはシンプルBホワイト右カラムです。このテーマのレスポンシブ化したCSS/HTMLを配布されている方がいるのでご紹介しておきます。
Seesaaブログ シンプルBホワイト右カラム レスポンシブ
SeesaaブログのH1ブログタイトルの文字の大きさを変更
SeesaaブログのブログタイトルはCSSのh1で決まっているかと思いきやそれはでは変更できません。
まずはデザイン>PC>CSS/HTML編集と移動して下さい。
すると上から69行目あたりにh1があります。
このh1を変更してみましたが何も変わりませんでした。
H1の文字の大きさを変更するのはheaderで
.headerは438行目あたりにあります。
そこを例えばこのように変更すれば大丈夫です。実際にはfont-size:の数値だけを変えればOKです。
.header h1 {margin: 0;
font-size: 52px;line-height: 1.4;font-weight: 900;
}
font-sizeだけCSS末尾に追記すればOKです。（この記事を書いた当初CSSに詳しくなかったので訂正です。）
SeesaaブログのH2記事タイトルの文字の大きさを変更
これも同じくh2をいじっても変わりません。
記事タイトルは.article__titleから変更します。だいたい565行目くらいです。
ここのフォントサイズを変更します。
.article__title{
font-size:36px;
}
こんな感じでいいでしょう。スタイルシート末尾に追記です。
SeesaaブログのH3/H4見出しをCSSカスタマイズ
見出しの変更は.article__contentで行います。
ハマりどころはCSSの末尾に.article__contentえfont-sizeを指定しても変わらないところ。
340行目あたりに次のように追記します。なお見出しのカスタマイズはこちらを参考にしました。CSS見出しカスタマイズ
/* 見出しh3の装飾（個別ページ用） */
.article__content h3 {
color: #0000FF;
background: #FFFF66;/*背景色*/
padding: 0.5em;/*文字まわり（上下左右）の余白*/
}
/* 見出しh3の装飾（個別ページ用） */
.article__content h4 {
margin:0.75rem 0;
background: linear-gradient(transparent 50%, #FFFF66 0%);
font-size:1.3rem;
line-height:1.5;
}
文字化けするので日本語は消していますがいれなくて大丈夫です。
必要に応じてH5/H6も追記すると良いでしょう。
Seesaaブログのブログ記事の文字の大きさを変更する
Seesaaブログは文字の大きさが小さすぎます。
そこで文字の大きさをCSSより指定して変更します。場所はbodyです。
bodyは365行目くらいです。ここのfont-sizseを次のように変更します。
body {color: #333;vertical-align: baseline;word-break: break-all;
font-size: 18px;font-family: ‘Helvetica Neue’,’Helvetica’, ‘Arial’, ‘游ゴシック’, YuGothic,’ヒラギノ角ゴ Pro W3′, ‘Hiragino Kaku Gothic Pro’,’メイリオ’, Meiryo, sans-serif;line-height: 1.8;letter-spacing: 0;zoom: 1;
}
これも該当箇所だけスタイルシート末尾に追記でOK。
これで記事の文字サイズが変更されました。
SeesaaブログのCSSは末尾に追記しただけではだめなようです。
（基本スタイルシート末尾に追記で行けるはずですが、変わらなかなったら該当箇所を変更してしまってもいいと思います。）
面倒ですが一つ一つ場所を探して変更して下さい。なお今回使用したCSSは冒頭で紹介したレスポンシブ対応のものにしてあるので行数は異なる場合があります。それぞれのテーマで適当な場所を変更するようにして下さい。だいたい同じだと思います。
※この記事を書いた当初詳しくなかったのでずいぶん訂正があります。基本的にはスタイルシートは元のスタイルシートは変えずに追記したほうがわかりやすいです。（追記を消せば元に戻るため安全ということもあります）何をしても変更できない場合のみ元のスタイルシートをいじるようにしましょう。
)
