ブログの外観を大きく変えてみました。

Sponsored Link

こんにちは!でんでんです。

最近はWeb関係の仕事をたくさんいただけるようになって、あらゆるジャンルの記事の修正、投稿やら、カスタマイズやら、結構メディアの管理を任されることが多くなってきました。

実はまもなく収益化するような事業もあったり。ぐへへ。

…という話はさておき、最近はそんな感じで、ぼちぼち“HTML”“CSS”“PHP”…とかいう、Webページを作るための言語を勉強しています。結構難しくて、慣れが必要なので、自分の趣味ブログをおもちゃにしながら体で覚えていこうと思って、この際イメチェンしちゃおう!という軽いノリでいじり始めました笑

とはいえ、1日に数百アクセスはあるブログなので、色々ぐちゃぐちゃなところを見てしまったユーザーさんもいらっしゃるかもしれません。メンテナンスモードにせずにいじったので…スミマセン。

いずれはブログのテーマを作ったり、1からホームページを作ったり、そんな仕事を受注できるようになりたいけど、今の自分のサイトじゃあポートフォリオとして使えないので、それもあってこれから少しずつ改変していくことにします。

so-many-dream-custom

実はブログタイトルを変えました

そうです、前まで「でんでんのいえ」っていうタイトルだったんですが、この際タイトルも変えてガラッと変えてしまおうと思ったので。

タイトルは “so many dream” でいきます

このたび「so many dream」と、ドメインの名前をそのまま使う方針に切り替えました。

なんていうか、「でんでんのいえ」はちょっとダサいな、って思ったのと、ドメインの「so many dream」はかなり気に入ってるので、ブログタイトルに入れたかったな、と思ったからです。

ヘッダーに画像を挿入

まずはヘッダー。今までめちゃくちゃ殺風景で、グレーの背景に「でんでんのいえ」と小さく書かれただけのヘッダーでした。

あー、カスタムする前のブログ、スクショでも撮っておけば、ビフォーアフターできたのになぁ…

ロゴは自分で作りました

とはいえあんまりいいのが思いつかなかったので、とりあえずコルクの背景素材を入手してそれをはめ込みました。

あと、簡素なものでいいから、ブログタイトルの画像を作りたかったんですよ。サイトのロゴになるわけですからね!というわけで、Illustratorを使ってロゴを描いてみました!

装飾とかそういうセンスがないので、とりあえずコルクの背景にしっくりくるように、タイプライターの文字をイメージして作りました。ちょっとだけインクがにじんでいるような加工をしてみたんですが、なんかあれですね、輪郭がぼやけたようにしか見えないw拡大したらちゃんとにじんで見えます(笑)

グローバルメニューも少し編集

前までメニューバーも初期のデザインのままで、しかもタイトルの文字と一緒に左に寄ってて、PCで見るとめちゃくちゃバランスの悪い外観だったので、こちらも編集。

中央寄せ、線や文字の色も変更

まずは、メニューがいくら増えても減っても大丈夫なように、中央に寄せることにしました。

あと、細かいんですけど、「ホーム」とか「連絡先情報」とかの、メニューの各項目の間を区切っていた線を消して、マウスのカーソルを乗せた時だけオレンジ色に変わるようにしました。ちゃんとアンダーバーも表示されるので、前に比べていい感じになったと思います。

一番大きく変わったのはメインコンテンツ部分

そして何より変わったのがメインのコンテンツ部分ですよね!

前のブログを見てくださったことがあればめちゃくちゃわかりやすいんですが、あぁスクショ撮っておけば比較できたのに…!

コンテンツの背景を削除

ブログの記事やウィジェット部分の背景が白だったのを、透明にして、最背面にあるブログ全体の背景色と同化させました。ちょっとフラットデザイン感が出るかな、と思って(笑)トップページの記事一覧も同じことをして、背景を透明にしてあります。

そして最背面の背景は、コンクリートの壁みたいな画像に変更。

記事一覧を横に3つ、タイルのように並べました

今回ので一番大掛かりだったのはこれかな。もともとは1行に1つ、横長の見出しがあったので、それがなんか普通すぎて気に食わなかったんですよね…

サムネイル画像を長方形にするようにテンプレートを書き換えたり、横幅を変えて一つ一つをカードのように区切ったり、そして影もつけたり。手探りでやったので、なかなか骨の折れる作業でした。今、達成感がすごい。

横に3つなので、今まで通り1ページに10記事にすると、1記事だけ余っちゃって綺麗にならないので、1ページに表示する記事数を9記事にして、3×3でタイルみたいに綺麗に収まるように考えました。

広告を思い切って増やしてみた

広告も少し増やすことにしました。僕はGoogleアドセンスというのを使って広告収入を得ているのですが、このGoogleアドセンス、1ページに表示させられる広告数が3つまで、って決まってたんですけど、どうやらその制限が撤廃されたとか。

というわけで、思い切って4つに増やしてみることにしました。これで明らかにアクセスが減ったりとか、不評であれば直しますが、単純に広告の数を増やせば、その分表示回数が増える=広告収入が上がるので!

アバターも作ってみた

cropped-portrait6-1.png最後に、めちゃくちゃ細かいんですが、いずれ書く予定のプロフィールとか、Twitterとかで使えるアバターの画像も作りました。笑

今開いているページのタブをみてください。ちっちゃ〜くアバターが表示されているんです!

実際に作ってみて思ったんですが、なかなか難しいですね。全然似てないしw

またちゃんと似顔絵を作ってもらうことにしますが、当面はこれで行こうかと。

あ、ちなみに、これはIllustratorではなく、外部のサービスを利用しました。使ったのはこちらのサービスです↓

イケてる似顔絵メーカー

さいごに:これからもよろしくね

とまあこんな感じで、ブログ開設以来ずっと先送りしていた「ブログの見た目がダサい」問題を、少しでも改善できたかと思っています。

なんだかんだ結構忙しく、趣味でブログを書いている時間があまりないんですが、それでもなんだかんだ戻ってくるので、結局これからもこんな感じで書き続けるんでしょうね。

オススメのゲームの話、面白いアプリの話、TwitterとかSNSの話、ビジネスの話、雑談…etc

全くもって専門性のないブログではありますが、たま〜にアクセス数が爆発するような、役立つ記事も書いたりしているので、気が向いたら足を運んでくださいね!

今後とも、でんでn…いや、”so many dream” をよろしくお願いします!

ではまた。

Sponsored Link