読者です 読者をやめる 読者になる 読者になる

たこさんちゃんねる

WEBであったり、写真であったり、カメラであったり、旅行とか、なんかそんな感じとかでどうでしょうか。

MENU

はてなブログのデザインをカスタマイズしてみた。

WEBの話

くしゃみはとまらず、暖かい日中、春が来たかなと思ったので、ブログのデザイン・構成を少し変更してみました。変更しただけで、PVや売上などの効果検証はここからなので、なんか効果が出そうなものがあれば参考にしてくださいな。

ベースデザイン 

theme-blank.hateblo.jp

こちらのBlankを使用させていただきました。

このベースデザインをもとにいろいろと調整を。

作業環境

好みでいいと思いますが、ある程度HTML・CSSに対応したエディタなどで、CSSをエディタで書いて保存を繰り返したほうがいいかもしれません。はてなのデザイン変更部分でやると、保存の度に前タブに飛ばされるので、少し億劫です。

SublimeTextでも、ATOMでも、最近良さげなVScodeでも、いいと思います。

私は適当にhatena.cssみたいな感じにファイルを作ってGoogleChromeのdevツールで確認して調整を行いました。

CSS完全ガイド 第2版

CSS完全ガイド 第2版

 

 困ったときはオライリーでも買っておきましょう。読んだことないけど。

確認事項/事前確認

自分の書いているエントリーのターゲット、ユーザー層を把握。また届けたいターゲットユーザーの確認。

Google Analyticsを確認し、どの端末・デバイスで読まれているのか、画面サイズをチェック。また男性・女性、年齢層なども大まかに知れるので、そこを見ておく。

基本的にブログなどのメディアサイトは6割〜7割超えスマホで読まれるので、スマホに力をいれて、PCの方は自己満足やtoBを目的にする。

つまり、直帰率や回遊率などの改善やPVや収益もスマホの方が影響が出やすいので、改善やABテストもそちらで行う方がいい。

メディアは、ページ表示速度が命である。早くて、読みやすくて、シェアしやすいものを目指す。サーバーをしっかり構成していたり、WordPressチューニングならまだしも、ブログサービスを使っている時点である程度のページ表示速度は諦めなくてはいけないが、ちょっと足掻いてみるのも他との差別化が図れる。

 

それではもろもろ付け足したものなどなどを。

シェアボタン

記事をシェアしてもらってPVアゲアゲ↑↑

という安直な考えではなく、読む前に保存やシェアをしてほしいのか(上部)、読んだ後にシェアしてほしいのか(下部)を考える。FV(ファーストビュー)は一番肝な部分で、なるだけ余分なものを置きたくない。それに、ページ表示速度にも関係する。なので、上だけ、下だけという案も一考する。

シェア数などだけをみて、読む人やシェアする人もいるので、ひとまずはどっちにも置く→上だけ→下だけというのを試してもいいかもしれない。

 

参考サイト

www.yukihy.com

SNSフォローボタン

はてなブログは、新着エントリーやグループ機能などである程度の新規記事通知が行えるが、新しい記事を更新したことを知ってもらう術があるに越したことはない。フォロワー数の多いインフルエンサーのブログはそれだけでPV高い。

ブログで文章を綴れない場合は、TwitterやInstagramなどで練習してある程度フォロワーがつき次第ブログに転じてもいいかもしれない。

Instagram

Instagram

  • Instagram, Inc.
  • 写真/ビデオ
  • 無料

 

参考サイト

www.ituore.com

テキストリンクのホバーアニメーション

マウスを載せた時に色が変わったり、形が変わったりすることをホバーアクション・ホバーアニメーションなどという。このホバーアニメーションは、ただおしゃれだから、かっこいいからという理由だけでつけてはいけない。なぜそこにアニメーションが必要なのか、どうしてそのアニメーションなのかをしっかりと考える。

考えた結果、まあなんかいい感じのやつにしよう…ってなるのも仕方がない。

参考サイト

www.nxworld.net

グローバルメニュー

どんなサイトにもメディアにも見かけるグローバルメニュー。どんなカテゴリーがあるのかを明示できる場所でもあるし、どんなカテゴリーに飛んでほしいのかを明示できる場所でもある。

参考サイト

www.yukihy.com

その他

基準フォントを、Noto Sansにしています。

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0.05em;
}

あとはまあいろいろ運用しながら考えます。

いろいろ参考サイト

www.life-is-bitter.com

hacogaki.hatenablog.com