CSS編集でアメブロカスタマイズをシンプルに始めてみた話 | アメブロカスタマイズ大全集

アメブロカスタマイズ大全集

CSSコピペで、簡単アメブロカスタマイズ。CSSコピペで、簡単アメブロカスタマイズ。CSSコピペで、簡単アメブロカスタマイズ。CSSコピペで、簡単アメブロカスタマイズ。CSSコピペで、簡単アメブロカスタマイズ。

とりあえずデフォルトの
「CSS編集可能」デザインだと味気ないよ!・・という事で、
全体のデザインをカスタマイズしてみました。 ちなみに元の状態は、こんな感じ。



この状態から、
自作の「CSS」というものをコピペで貼り付けただけ。

なので僕と同じCSSをコピペすれば、
同じようなデザインになるわけですね:)

もう少しコードをキレイにしたら、
無料で配布しますのでお楽しみに。

また、いくつか
カスタマイズのポイントをまとめたので
よければ参考にどうぞ。

ヘッダー文字をゆるくしてみる

武器屋っぽいヘッダーにしたかったのですが、
僕のデザインスキルでは絶望的に難しいので(笑)
GIMPで文字だけ加工(フォントを変更)したものを画像化して貼り付けてみました。

下の説明文は、適宜修正したかったのでそのまま。
背景はシンプルに単色としました。

ヘッダー部って標準だと横幅の制限があるので、
CSSをちょこちょこイジって幅一杯に色が付くようにしました。

右側メニューの各ボックスを単色で色付け

「プロフィール」とか 「最新の記事」とかの部分を黒背景にしたり、
「最新の記事」一覧を余白調整して見やすく。

余白の調整が、意外と面倒だったりします。

記事タイトルにも色付け

タイトルがパッと目につくよう、
色&大きさで標準より強調しました。

この辺は、もうちょっと精査したい所。

プロフィールページに機能性を持たせた

今回カスタマイズの一番目玉が、実はコレ。

プロフィール写真の下にある
「プロフィール」をクリックすると
プロフィールページに飛ぶのですが、
実はココにもヘッダー画像を設置できます。

さらに「ブログを見る」ボタンを付けたのがポイント。

足ペタ経由だと、ブログのTOPページではなく
このプロフィールページを最初に見る人が多いんです。

なので、ここに1つアクションできる要素を加える事で
ブログ本編を見てくれる人を少しでも増やそうという考えです。

あとは、全体の文字の大きさとかも調整可能。

以上。

まぁ、まだデザイン的には
全くもって完成されていないのですが(笑)

逆にこのくらいでも、
しっかり導線作りをすれば集客ができる事を
証明できれば良いなーと思ったりしてます。

では!