Seesaaブログ新デザイン見出しタイトル文字の大きさカスタマイズまとめ | アフィリエイトで稼いで自由と成功を掴む-アフィホリック

Seesaaブログ新デザイン見出しタイトル文字の大きさカスタマイズまとめ

Seesaaブログ見出し文字サイズカスタマイズ Seesaaブログ

こんにちは。アフィリエイトにずっぽりのTAKEOです。

 

さて無料ブログでのアフィリエイトもいいかもしれないと思い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;
}

SeesaaブログのH2記事タイトルの文字の大きさを変更

これも同じくh2をいじっても変わりません。

記事タイトルは.article__titleから変更します。だいたい565行目くらいです。

ここのフォントサイズを変更します。

 

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;
}

 

これで記事の文字サイズが変更されました。

SeesaaブログのCSSは末尾に追記しただけではだめなようです。面倒ですが一つ一つ場所を探して変更して下さい。なお今回使用したCSSは冒頭で紹介したレスポンシブ対応のものにしてあるので行数は異なる場合があります。それぞれのテーマで適当な場所を変更するようにして下さい。だいたい同じだと思います。

コメント