何でもありのカオスなブログ

気づいてる?サーバー移転&リニューアル完了!今回のテーマは『ノート』をイメージしてカスタマイズ

      2014/05/31

ブログリニューアル

うぉー疲れたー!

ども!ひろ@tekito-daro)です!

今月はサーバーが不調になったこともあって、ブログ更新する気がだだ下がりしてしまいまして…

じゃーブログのリニューアルでもすっかな!ってずっと弄っておりましたw

あ、サーバーも移転したのでこれで読み込みOSEEEEEEEEEEE!!ってのも改善されたんではないかなと思いますがどうでございましょう(^ω^)

それじゃ今回のリニューアルのポイントを書いていきますよー!

さくらサーバー→wpXに移転

wpx

今月はGWあけからなぜか急にブログが重くなりまして…

いろいろ試した結果サーバーが悪いんじゃね?
って結論になり、とりあえずお試し期間で色々試しておりました。

さくらサーバーからは、メールを送ってから10日ほどで返事が来ました。おっせぇ・・・。
結局さくらサーバーのメール返信の遅さが決め手となり、移転を決意。

エックスサーバーwpXレンタルサーバーで悩んだんですが、今んとこWordPressしか使ってないのでwpXにしました。

勉強してWordPress以外を使いたくなったらXサーバーに移転すればいいしね!

いやー、移転したらブログも管理画面も表示が早くなったので快適!wpXレンタルサーバーの移転は満足でした(・∀・)

使用テーマをSTINGER→gushに変更

びふぉー(STINGER)

リニューアル前

あふたー(gush)

リニューアル後

今回はレスポンシブデザインが使ってみたかったので、ブログテーマはGushを使用しております。

これ初めて使ったんですけど面白いんですよ。ウィンドウの幅をせまくすると表示が変わるのでよかったら試してみてネ☆(ゝω・)v

ただ、カスタマイズが各サイズでCSS書かないといけなかったりで結構大変でした。これからgushに変えようかなーって思ってる人はカクゴすべし!

スマホで見やすく!

リニューアルでまず考えてたのが、スマホからもっと見やすくしたいなーってこと。

前のままだと、本文は問題ないけど関連記事とか見づらかったんですよねー。なので今回はCSSをスマホ用にしっかりいじりました!

あと、追尾式の上に戻るは、スマホで読むとき邪魔だなーと思ったので撤去。かわりに一番下にカテゴリーなどと一緒に置いてあります。

スマホ フッター

上から出てくるカテゴリーは、ウェビメモさんのこの記事をそのまま使わせていただきました!

スマートフォンサイトでちょっとしたメニューを上からにゅっと出すときに使えるシンプルなjQuery|ウェビメモ

本当はまだまだ改良したいんだけど、終わりが見えなくなりそうだったのでとりあえずこれで一段落。

シェアボタンをデフォルトから変更

びふぉー

シェアボタン

あふたー

シェアボタン 変更後

やっぱデフォルトよりも見た目が(・∀・)イイ!!

これも実は、ウェビメモさんのやつをそのままパク・・・ゲホゲホ、マネさせて頂きました!

スマホではサイズを変更&数を減らしております。

CSSで見た目をノート風に!

どうでしょう。ノートっぽく見えますかね?

今回はカスタマイズするときに、ノートっぽい見た目にしたい!と思い、日付やサイドバー、shadowなどをこだわってみましたw

本当は本文の後ろに、うすーい線をいれようと思ったんですが読みやすさ重視ってことでヤメました。

日付をわざと横に出してるんですけど、付箋っぽく見えますかね?w

アイコンフォントを使ってみた

SNSボタンや、h3タグについてるピンはアイコンフォントを使ってみました!

いやー、これ便利っすわ。簡単にイイ感じになるのでそのうちサイドバーとかにも増やすかも(^ω^)

最新記事にNewをつけた

日付を見ればわかるかもしれないけど、ひと目で新しいってわかることも大事かなと。

参考にさせてもらったのはこちら

記事の投稿日を取得して好きな日数だけnewアイコンを表示しておく方法|ウェビメモ

みぞれし様には足を向けて寝られません(ノ∀`)

ひとこと

あ゛ー、しばらくはあんまり弄りたくないな!w

でも今回のリニューアルはかなり気に入ってるのでもうこんなに大掛かりな変更はしないだろう。たぶん。

あ、そういやようやく中の人実装しました

そんじゃまた(・∀・)ノシ

 - ブログ