トップページをカスタマイズ!初心者でもあっという間にオシャレなブログにする方法【SANGO】

トップページカスタマイズ

みなさんはブログのトップページ、カスタマイズしていますか?

私は最近カスタマイズを始めてみたのですが・・・まあ奥が深いこと(笑)

どれだけ試行錯誤しても納得出来るデザインに到底たどり着かないですね。

というものの、とりあえずは完成させたいので一旦納得できるところまで無理やり持って行きました。

今日は私のトップページでカスタマイズをしたことをまとめようと思います。

「ど初心者のカスタマイズまとめ」なので誰でも簡単にここまで持って行けます。(笑)

なっつみ

自分のドメイン内なんだから好きにやっちゃえ!

はじめに

パソコンと女の子

この記事を読むにあたっての注意点は以下の通りです。

  • 全て有名ブロガーさんの記事参考
  • これを真似すると(たぶん)重くなる
  • やったことをまとめてるだけ。

ということだけ前提にしておいてください。

まじでプログラミング系の話は弱いので、自作のコードなどは使ったことないです。

そして、「大好きなものを詰め込んだ可愛いブログにしたい!」を一番に置いてカスタマイズしているので、このまま真似すると、きっと重いサイトになります。

お手本というよりは、こういうやり方もあるんだな~って感じで見ていただければと思います♪

なっつみ

もちろん真似されたら嬉しいけどね。

SANGOの機能を最大限に

まず私の現在のトップページはこんな感じです。

トップページ

ワードプレスでブログを開設しています。デザインはSANGOを使用中。

SANGOは本当に初心者にも優しく、めちゃくちゃカスタマイズがしやすいです。もし「はてなブログでカスタマイズ難しい無理。」の壁にぶち当たってたらぜひおすすめです。

今まで悩んでたことが嘘みたいに簡単にカスタマイズできます。

なっつみ

私もはてなブログ信者だったからな・・・

SANGOを使っている方は以下のサイトにカスタマイズの方法や使い方が載っているので、それをまずは全て読み、入れたいコードを全部入れていきましょう!

お知らせ文

ヘッダータイトルの下の”初めての方はここをクリック”を追加してみました。

ただそれだけだと、クリック数が伸びないと思ったので”タップして見に行く”ボタンを追加。

トップページ

以下のサイトを参考にしました!

なっつみ

SANGO偉大なり。
MEMO
カスタマイズ集のような記事を書かれているブログを一通り見て、取り入れたいカスタマイズを一気に入れていくのおすすめ!

ヘッダーアイキャッチ画像

「私のブログめちゃくちゃ可愛いで!!!!」

を、全力でアピールしたかったので、ヘッダーアイキャッチ画像を追加しました。

私のブログで言う、”楽しんでる?”と書かれている画像のことです。

アイキャッチ

第一印象って大事ですもんね。

おすすめ記事を並べて載せている人が多いので迷いましたが、私は個性で攻めます!!

なっつみ

実はまだ納得できてない、あの画像・・・。
MEMO
ヘッダー画像のデザインによってブログのイメージは変わってくる!

固定ページの作成

固定ページを作成することで、めちゃくちゃサイト風のブログになりました!

ブログを作成すると、基本的にどのデザインも新着記事がトップページに更新されていく形だと思います。

固定ページを作成することによっておすすめ記事や人気カテゴリをトップページに表示することが出来ます!

以下のサイトを参考にしたので是非。(人任せ。)

なっつみ

固定ページをカスタマイズするだけでサイト感出るね!

人気カテゴリを可愛くしてみた

上記の記事を参考に固定ページを作成すると、人気カテゴリをこのように表示することが出来ます。

トップページ

このカテゴリ別の画像を、写真ではなく自分でイラストを描くことで、より可愛くカスタマイズすることが出来ました。

イラスト自体はアイビスペイントというアプリを使って描いています。

以下の記事でイラストの描き方を細かく紹介しているので、気になる方はぜひ♪

アイキャッチ写真に”らくがき”してブログを可愛くする方法。【アイビスペイント初心者】

なっつみ

自己満です。☆

タイトルを画像に変更

”おすすめ記事”などのタイトル部分を、h2タグなどを使わずに画像を張り付けてみました。

重くなるのでおすすめはしませんが、個性だけは完璧に出ます。(笑)

こんな画像です。

▼新着記事

新着記事

▼ディズニーの話

ディズニー

▼おすすめ記事

おすすめ

私のイラストは全てアイビスペイントで描いています。

なっつみ

絶対重いから良くないのはわかってるんだけど・・・自己満。☆
MEMO
SANGOにはもともとたくさんの見出しの種類が選べるようになっているので、サイトの雰囲気にあったデザインを選んでみよう!

区切りのラインを追加

タイトルを手書きにすることで、ゆる~い見た目になりサイト自体がぼやけてしまったので、項目ごとにラインを引いてみました。

トップページ

このレインボーの線のことです。

これも手書きの画像を挿入してみただけです。(笑)

▼ライン

ライン

私のブログはとにかく画像を張り付けている初心者の考えの塊です。

なっつみ

ラインがあるだけでわかりやすくなったよ!
MEMO
どうしてもラインが引きたいけど、画像で重くなるのが嫌な場合は「キラキラ ライン 顔文字」でネットで調べてみよう!文字でラインを作ることも可能です。

途中で画像を追加してみた

トップページ

よくあるようなトップページにはしたくなかったので、途中に画像を挿入してみました。

画像の背景を白にすることで、トップページ内で浮き出ている形に見えるのがポイントです。

なっつみ

こういうことは固定ページ作らないと出来ないよね!
MEMO
個性を出したい場合はおすすめですが、重くなるのであまりおすすめはしません。

まとめ

パソコンと女の子

いかがだったでしょうか。

とにかく自分好みのサイトを作ろうと思ったらこんな感じになりました。

収益化を前提で運営している方は重いし見にくくなってしまうかと思うのでおすすめはしませんが・・・。

  • SANGOのカスタマイズを最大限使う
  • 手書きの画像に変更しまくる

 

私は継続することを目標にしているので、とりあえずは大好きなものを詰め込む形をとりました。

サーバーとドメインにはお金払ってるんだから、自分がやりたいことやりまくろう!!!

さて、今日もブログ頑張りましょう♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA