超初心者がブログをカスタマイズする前に見て欲しいな。 | 大手ブログはみんな爆発すればいいのに ~諦め切れない零細ブログの奮闘記~

大手ブログはみんな爆発すればいいのに ~諦め切れない零細ブログの奮闘記~

大手ブログには逆立ちしても勝てない零細ブログ作者がどうにかして大手ブログになってやると奮闘するおはなし。業者と詐欺だらけのアメブロでまともな手段でアクセスアップを目指す。ブログ初心者が読むと役に立ちそうなカスタマイズとか読み物っぽく書いています。


アメブロのCSS編集について超初心者向けに書いてみます。
そもそもCSSって何なの?とかいう話はしません。
なぜなら別に知らなくてもアメブロのカスタマイズはできるからです。

※知っている人には何の面白みのない話なのでスルー推奨ですよ!


まずアメブロでCSS編集をするにはデザインから選ぶ必要がある。



例えば上の画像のようにアメブロの公式のデザインを使っている人はCSSの編集ができない。
CSSを編集するには「CSS編集用デザイン」を使わなくてはならない。



こいつを使うとブログはどうなるでしょうか。



こんな感じになります。
この初期状態からブログを編集していかなくてはならないのです。
実際に私もブログをこの真っ白な状態から作り変えていったんですよね、うん。

デザインの変更に「CSSの編集」が選べるようになるのでここで編集していきます。



何だか難しそうなコードがずらっと並んでいる編集画面が出ますが全部無視していいです。



基本的にこの一番下の「その他、拡張があれば記述」にコードを貼っていくだけです。
例外もありますがCSSは下に書いてあるコードほど優先度が強いのです。
上に最初から書いてある基本コードと内容が被ることがあっても下が優先されます。

まずは真っ白な画面が嫌なんで背景が欲しいですね。
「アメブロ 背景画像 CSS」なんかで検索してみましょう。

body {
background-image: url(画像のURL);
}


こんなコードを発見できたのでこいつをCSSデザインに貼り付けましょう。
画像は利用規約が大丈夫なものを拾ってきましょう。
今回はSubtle Patternsを利用しています。




用意できた画像をここにアップロードすると写真のサムネの下にURLが出ます。



URLを貼り付けてペタリ。保存を押して自分のブログに行きF5ボタンを押すと…。



こんな感じになる。
これが全ての基本です。
正確には違うかもですが私はずっとこうやってきました。

タイトルの文字色が目立たなくなったので文字の大きさと色を変えたいな。
「アメブロ タイトルの文字 CSS」で検索。

/* タイトルの文字サイズ(ここは自由に何でも入力していいスペース) */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus {
font-size: 30px;
}

/* タイトルの文字色(何のコードが分からなくなるから説明文) */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus {
color: #000000;
}


ん、これ「.skinTitle」とか全部一緒だね。だったら合成しよう。

/* タイトルの文字サイズと色 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus {
font-size: 30px;
color: #FFFFFF;
}


色はカラーコード表とか見て選べばいいと思うよ。こいつを貼り付けると。



こうなる。大まかなCSSカスタマイズの流れは(私は)こんな感じである。
コードを貼り付けても反映されないならばコードを削除して新しく探せばいい。
細かなカスタマイズができれば問題点を発見して編集もできるが別にどっちでもいいのだ。

何をカスタマイズしていいのか自分の言葉で表せない人はカスタマイズのブログをみるといい。
例えば川上先生のブログに行って「記事一覧」の「テーマ別記事一覧」で記事を探すとか。
アメブロ講座を読みながらCSS編集をいじってみるとかさ。

あるいは「アメブロ カスタマイズ 初心者」なんかで検索して自分にあうブログを探すとか。
レベルの高いカスタマイズ能力があるブログ作者様は優劣を付けることは不可能です
自分に解説があうかあわないかが重要になってくる世界だと思っています。

もちろんカスタマイズをしているとCSSだけでなくJqueryなんかにぶつかることもある。
だけど「アメブロ Jquery 使い方」とか検索すればいい。
Jqueryが何なのか知る必要はない。
Jqueryのコードを入力すると、どうなるのか視覚的に分かればいいです(最初はね)

◆ ◆ ◆

さて、カスタマイズを勧めるかのような記事でしたがぶっちゃけ大して勧めていません。
アメブロの公式デザインだって悪くないです、本当に。
たまに勘違いしている人がいるけどカスタマイズしても読者が増えるかといえばそうでもない。
結局のところブログで一番重要なのは記事の中身であってカスタマイズが一番ではない。

私は真っ白な初期設定のままでも、とても優れた文章を書くブロガーを何人か知っている。
反対にカスタマイズをしているが、何だか文章が読みにくいブログを知っている。
というか私のところだね。

私がカスタマイズするのって、ほとんどが趣味だもの。
別にカスタマイズが原因で読者さんが増えることは(たぶん)なかったよ。
まあブログを訪れた人が他のページを見てくれるようにカスタマイズはしているけど。
大きな成果があったかというと微妙なところ。

そんなものです。

ただ私は自分のブログを私の家のようなものだと思っているから。
どうせだったら遊びに来てくれたお客さんを自分なりに持て成したいと思って。
とりあえず外観から変えていくかな。
そんな感じに思ってカスタマイズを素人なりに楽しんでいるだけです。

自分のブログをいじるのが楽しいと思えない人はやらない方がいいですよ、うん。
フリープラグインやフリースペースだけでもできることはあるんだしさ。
まあでも難しそうだからやりたくてもできない、って人は試してみるといいかも。
ブログが崩壊したらデザインを元に戻せばいいだけの話なんですからね。

そんなところです。