さくらのブログでブログを１つ作ったのでメモ書き。
さくらのブログは簡単でいいんだけど、初期のカスタマイズを忘れると面倒くさい。
そこであくまで備忘録としてメモをすることにします。
まず第一にさくらのブログのデフォルトデザインでのデメリットを挙げてみます。
- ダサい
- 文字が小さい
- ブログの幅が狭い
- 読みにくい
- 文字の間隔（上下が短い）
- レスポンシブでない
こんな感じです。デフォルトだととにかく見づらい…。
さくらのブログはSeasaaブログの古いデザインを使っているんだと思いますが、とにかくデザインがダサい。そしてそのダサい理由の一つがレイアウトなんです。単にレイアウトが古いだけ。
最近のWordpressはレスポンシブだしワイドな画面に対応しているので幅がそこそこ広いです。
それがデフォルトのデザイン（さくらのブログ）だとなんか狭いしバランス悪い。そこで手直ししたものと元のものを比較してみます。
タイトルとかをぼかしているのでわかりにくいですが下のものが元のデザイン。上はCSSをカスタマイズしたものです。縮尺は変えないでサイドバーの幅とブログ記事部分の幅を広げています。
これだけで結構綺麗になったように見えます。
しかし今度はヘッダーが短くなってしまい、サイドバーが上まで突き抜けている感じになってしまいました…。ダサすぎる。
そこでヘッダーを直しました。
これでヘッダーが全体に広がりいい感じになりましたね。ここまで結構時間がかかっています。これならWordpressの方がマシ！
次から時間がかからないようにまとめておくことにします。
このうちレスポンシブに関しては完全なレスポンシブ化は諦めたほうがいいです。これを直そうとすると膨大な時間がかかるためさくらのブログでちゃちゃっとサイトを作ろうとしている意味がないです。ただレスポンシブ化もある程度までなら簡単に出来ます。それについては別途サイトを作りますので少しお持ち下さい。（サイト作りました。さくらのブログレスポンシブ化）
さくらのレンタルサーバ スタンダードのお申込みはこちら（公式ページ）
さくらのブログでテンプレートの初期カスタマイズ
以上をふまえ初期におカスタマイズをまとめていきます。
さくらのブログで始める時にカスタマイズするべき項目は以下の通り。
- 文字サイズの変更
- 文字の高さの変更
- 見出しの変更（CSS、文字サイズなど）
- ブログの幅の変更
- サイドバーの幅の変更
- ヘッダーの変更
- H2が日付、H3が記事タイトルになっているのを変更
上から順位見ていきます。
今回はさくらのブログの公式テンプレート「ブラウンR(右サイドバー)」を使用しています。
全て デザイン＞ PC＞ デザイン設定からCSSを変更して行います。
文字サイズの変更・文字の高さの変更
文字サイズの変更は.textから行います。
CSSから.textを探します。
ブラウザのCtrl+Fで検索するとすぐに見つかります。
次のように変更しました。（CSSの最後に追記で構いません）
font-size: 16px;
padding:0px 15px 5px 15px;
margin-top:0px;
line-height: 1.6;
color:#444444;
font-weight:400;
}
.text a{
color:#99600A;
}
変えたのは赤の部分です。文字サイズははじめ12とかなのでめちゃくちゃ見にくいです。さくらのブログで検索上位にあるブログを最近見ましたがくっそ見にくいですｗｗｗ
せっかく濃い内容なのにデザインの手を抜きすぎていて本当に残念だなと思いましたね。
文字サイズは変更しておいたほうがいです。さらに文字サイズを変更すると高さがくっつきすぎておかしくなるのでline-heightにて変更します。
あとは文字の色が茶色でこれも気持ちが悪いので濃い灰色に変更しました。（テンプレートによって違います）
見出しの変更（CSS・文字サイズ）
見出しも文字が小さいので大きくし、CSSでカスタマイズして格好良くします。
CSSはコピペで拾ってきたものでOKです。
また検索してH3に拾ってきたCSSをはりつけ、さらにfont-sizeを指定しています。こちらもline-heightも追記しています。
h3 {
position: relative;
color: white;
font-size:20px;
font-weight:bolder;
letter-spacing: 0.08em;
line-height: 1.5;
padding:0.5em 0.5em 0.5em 1.8em;
background-color: #4B2D0E;
border-radius: 5px;
}
h3::after {
position: absolute;
top: 50%;
left:0.7em;
transform:translateY(-50%);
content: ”;
width: 8px;
height:8px;
border: solid 3px white;
border-radius:100%;
}
拾ってきたCSSに赤字の部分だけ変更しただけです。
こちらのデザインはこのサイトを利用させていただきました。⇒見出しCSSコピペ
実際googleで「見出しCSSコピペ」でググるといろんなサイトが出てくるのでお気に入りのものを使わせてもらいましょう。
※この際さくらのブログではデフォルトのデザインでH2が日付になっているため、記事タイトルをH2に扁壷して言います。
これで読みにくいのは解消されました。
ついでにH2の文字サイズ等も変更しておきます。
h2 {
background:#fff;
padding: 20px;
margin: 20px;
font-weight:normal;
font-size:28px;
text-align:left;
font-family:arial, Helvetica;
color:#000;
}
H2 a{
text-decoration: none;
letter-spacing: 0.08em;
line-height: 1.5;
color:#99600A;
}
忘れましたがデフォルトだと背景が茶色だった気がします。白に変えています。
H2のcolorは変えましたがたぶん関係ないです。（リンクになっているため。aの方のカラーが適用されます。）
サイト（ブログ）の幅の変更
デフォルトだと記事の幅が600px、サイドバーの幅が200pxになっています。これは小さすぎです。最近のブログでは記事の幅が800pxくらいあってもおかしくないくらいなので、記事とサイドバー合わせて800pxはいかに小さすぎるかわかるでしょう。縦長すぎても見づらいです。
そこで数値を変更しますがこつは全体の幅＝記事の幅+サイドバーの幅となることです。数値が一致しないと崩れます。(marginとかpaddingの横幅もカウントされます)
幅を変えるために「width」を検索します。
margin:0px auto 0px auto;
width:1100px;
background-color:#A69779;
color:#8C6B1D;
}
これがブログ全体の幅です。
この数値がもともと800だったと思いますが1100に変更してあります。これは次の2つの合計値です。
margin:0px 0px 0px 0px;
float:left;
width:800px;
font-size:12px;
padding:25px 0px 10px;
background:#CED0B8;
}
color:#fff;
font-weight:normal;
float:left;
width:300px;
padding:21px 0px 10px;
margin: 0px 0px 0px 0px;
text-align:left;
}
width:794px;
padding:0px 2px;
text-align:left;
}
ついでにこのblogという箇所は記事の白い部分です。その背景に当たる箇所にあわせ800よりやや小さくしています。
この800と300の数値が合わないと崩れるので気をつけてください。margin、paddingなどの数値も含むため注意が必要です。崩れると面倒なので戻せるようにバックアップ（コピペしておきましょう）
これをやった結果ヘッダーの背景がもとのままになり、ヘッダーがもともとの記事のサイズと同じ。つまりサイドバーが上に突き抜けたようになってしまいました。これはダサいの変更が必要です。
ヘッダーの変更
そのためにはヘッダーに1100pxの画像を貼り付けます。
#containerのwidth:1100px;と同じ数値に画像を変更します。
CSSで変更することが出来ます。
「banner」で検索してください。
すると次のような箇所があります。
font-family:arial, Helvetica;
margin:0px;
text-align:left;
background-image:url(https://picture.xxxxxxxxxxxxxxxxxxxx.net/image/header.jpg);
background-repeat:no-repeat;
padding-left:25px;
height:81px;
}
ドメインは伏せ字にしました。
margin: 0px;
padding:0px 0px 0px;
font-weight:bolder;
font-size:36px;
}
さらにh1がブログタイトルなのでちょうどいいサイズになおしpaddingの数値で位置を合わせました。
このヘッダー背景のurlですがもともとはsblo.jpつまりさくらのブログのURLだったと思います。これを自前のサーバーの画像に変更しました。またはそのままの画像をペイントで横幅だけ引き伸ばしてもOKです。
サブドメインでさくらのブログを運用している場合、独自ドメインの直下にimgフォルダを作ってそこにheader画像を入れhttps://独自ドメイン.com/img/header.jpgなどのURLを先程のCSSのURL欄に入れれば大丈夫です。
幅が1100pxであればいいので自分で作ることも可能です。
さらにサイドバーの見出しも拾ってきたCSSの例えばH1を.sidetitle などに変更すればおしゃれなデザインに変えることが出来ます。サイドバーの文字サイズも編行為しています。これも同様なので割愛します。
H2が日付、H3が記事タイトルになっているのを変更
さくらのブログではデフォルトでH2が日付、H3が記事タイトルになっています。H2はSEO上重要なので、日付にしておいても意味がありません。そこで日付をdivに、H3をH2に変えるカスタマイズが必要です。
デザイン＞ PC＞ コンテンツ からコンテンツの「記事」をクリックしてコンテンツHTMLを編集します。そのかなかのH2をdivに（dateの箇所）、H3をH2に変更すればOKです。（titleの箇所）
HTMLでは小文字だったかと思います。
投稿タイトルをH1にしてもいいです。（ＣＳＳを合わせればいいだけ）
以上でさくらのブログの初期カスタマイズは完了です。我ながらこれならまあ十分と言えるカスタマイズに仕上がりました。シンプルで見やすくまあまあおしゃれ！
WordPressの超シンプルなデザインをさらに味気なくした感じですね笑
シンプルなHTMLサイトがこんな感じです。テンプレートを拾ってきてHTMLエディターでサイトを作るのもわりと面倒なのでさくらのブログでがんがんサイトを量産してみてはいかがでしょうか。
他の無料ブログだと有料なのでサーバーのおまけとして無料で50個利用できるさくらのブログは本当に貴重ですよ。
さくらのブログはさくらのレンタルサーバ ライト
と契約すると50個作れます。（ライト以上ならどのプランでも50個です）
)
