ブログデザインをプチリニューアル。主にサイドバーを変更

ブログをプチリニューアル。
今まで3カラム構成だったのだが、3カラム目は実質的にAdsenceスペースにしかなってなくて意味がないように感じてた。なので、2カラム構成にしてみた。少しスッキリしたかな?

今年はブログをリニューアルしたり、管理サーバーをVPSに移転したり色々やってきたけど、比較的大規模なリニューアルはこれで一区切り。来年は多分あまりいじらないと思う。その代わり、仕事的にも今年度の目標に挙げているiOSアプリ開発の勉強と実際のアプリ開発に注力します。

では、今回のリニューアル概要を軽くご紹介。

3カラムから2カラムに

【リニューアル前】
ScreenSnapz080
【リニューアル後】
ScreenSnapz004
大きく違うのは広告枠としていた3カラム目を廃止し、広告枠含めて2カラム目に集約したこと。

広告収入的にどうなるかは分からないが、あまり活用できていなかった3カラム目をやめた分、2カラム目が広く取れるようになった。全体的にスッキリした気がするし、そのおかげで最新エントリーなどをサムネイル画像付きで表示できるようになった。

メニューをタブ構成に

ScreenSnapz005
今回頑張ったのはこの部分。参考にしたのは以下のサイト。

jQuery事始めvol.3・プラグインに頼らず自分でクリックで切り替わるタブメニューを作ってみる – かちびと.net


メニューをタブ構成にした(表示するのはPC・タブレットのみ)。ここには表示中エントリーが属するカテゴリーの最新記事、最新記事、はてブ人気エントリー、カテゴリー一覧を配置して、タブ(リンク)をクリックすることで動的に切り替えられる。

縦に配置するのもありなのだが、どうしてもスクロールが多くなるし、興味のない情報までずらずらと表示するのはイマイチと思ったので、これでサイドバーはかなりスッキリしたかなと思う。

メニュー構成の見直し

当サイトはApple系の話題が中心だが、他にアイドルネタ・開発ネタ・WEB関連ネタなどがあり、最近は出産・子育てネタなんかも増えて来た。ブログ成功の鍵はテーマを1つか2つにする事、なんて言われる中でまるっきりその逆を歩んでいる。

SEO対策的なものも色々考えた事があったが正直よく分からないし、以下のエントリーを見てブログをジャンルで絞るのではなく、「ページで絞る」っていうのに非常に納得した。

ブログでめしを食うために行っている5つのSEO | 和洋風KAI



あと、例えばiPhoneの検索でアクセスした人が、アイドル記事なんて読むとは思えず、ユーザービリティ的観点でもよいのではないかと思う。なので、前述したタブメニューでデフォルト表示は「表示中エントリーが属するカテゴリーの最新記事」とした。

最新記事も一応メニューとして残しているが、これはしばらく様子を見て廃止するかそのままとするかは検討する予定。

SNSシェアリンクの構成変更

PC・タブレット版画面

ScreenSnapz006
長い目で見るとアクセス数はやはり検索経由が多いと言う事実は変わりないが、短期間ではTwitter・Facebook・はてなブックマークなどのSNS経由が大きい。なのでSNSのシェアがやりやすいようにサイドバーに配置して、それはスクロールしても表示し続けるようにした。参考にしたのは以下のサイト。

[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する | OZPAの表4


人によってはウザイという感想もありえるので、場合によってはやめるかもしれないがとりあえず現時点は今の構成で。

スマートフォン版

IMG_1401
これは今までと変わりないのだが、1つだけ昨日公開された「LINEで送る」ボタンを付けてみた。

LINEで送るボタン|メディア運営者の方へ


これの利用シーンがどの程度あるかは現時点は何とも言えないが、とりあえずタイムリーに公開されたので付けてみた感じw

コメント送信用にMessageLeaf導入

ブログのコメント欄というのは非常に悩ましい。
無いと寂しい感じもするし、かといってあれば荒れる要因になったりもする。また、公開の場でのコメントを求めてるかと言えばそんな人は少ないし、かといってメールフォーム使う人なんて更に少ない。コメントの気軽さと、メールフォームでの閉鎖性。その両方を兼ね備えたようなMessageLeafというサービスが有りこれを導入してみた。

MessageLeaf 読者が作者へ “想い”を伝える ブログツール


このサービスを作っているソニックガーデンという会社は大企業ではないが、アジャイル開発・クラウド開発・在宅ワークなど先進的な取り組みでIT技術者にはかなり有名な会社。個人的にもとあるセミナーで副社長さんとお知り合いになれたこともあり、使ってみることにした。

PC版、スマホ版共に画面右下に以下のようなアイコンが出るようになったと思う。
default
このアイコンを押すと、、、
ScreenSnapz007
うにょーんとこんな画面が出てくる。利用にはFacebookへのログインが必須となるため(Twitter認証にも対応してくれるとベストなのだが)、Facebookユーザーしか使えない事がちょっとハードルを上げてしまうが、TwitterのDM感覚でメッセージが送れるため結構便利だ。

このサービスの導入方法については後日エントリーをまとめる予定。

まとめ

というわけで、今回のプチリニューアル内容を紹介してみた。
使いにくいという感想でも構わないので、何かご意見があればお気軽に申し出ていただけたらと思う。

あと最低限やりたい事としてはサイトロゴとfaviconがあるのだが、こればかりはスキルが無くて自分じゃ良い感じのものが作れない、、、

SPONSORED LINK

Twitterでチーをフォローしよう!

この記事のシェアはこちらから!

アナザー通信『ここだけの話』

ブログ記事の裏話や主催イベントの予定が読める週刊メルマガを発行しています。
メールアドレスの登録だけで購読できる無料メルマガです!
詳しい内容が気になる方はこちらをご覧ください。

は必須項目です

お名前(姓名)