天塚財閥

プロブロガー目指し奮闘中月間7万PV26歳大卒ニートの成長過程を綴る雑記ブログ

【天塚右京】はてなブログを有料化して徹底カスタマイズしたぞ!

f:id:uchan79:20190206224443p:plain

月間1万PV突破に際して、ようやく当ブログもPRO化したぞ!
それは、ブログを始めて以来の、かねてからの目標だった
月間1万行ったら、有料化するんだと
そして今、新しい気持ちでリスタートできる
プロブロガーへの道という新しい旅路に立つことで!

これで月間4000から月間7500PVブロガーや!
次は月間1万PV突破で念願のはてなPRO化!

やっと日間200PV安定!読者数も100人突破!記事量産でゴリ押しや! - 天塚財閥

有料化に際してやったカスタマイズを公開!

有料化に伴いCSSをいじれるようになったので
5日間ぶっ通しでカスタマイズにカスタマイズを重ねた
独自ドメインの取得もした
ブログ収入の主力となるグーグルアドセンスは、独自ドメインでないと申請ができない
現在目下申請中だが、色よい返事を期待するばかり
当記事ではどのようなカスタマイズを行ったのか説明しよう

トップページの表示形式を一覧形式に

見てくれよ、この野暮ったいトップページを!
これで2年間やってたわけだからな

f:id:uchan79:20190206064227p:plain


それに比べて今なんかこれよ

f:id:uchan79:20190206064359p:plain


ずっっとカード式表示に憧れがあった!
とにかくオシャンティーだから!それに尽きる
視認性にも優れるし、ずっと眺めていたいデザインじゃないか
今のところトップページの記事数は14記事表示させるようにしている
それでちょうどサイドバーのモジュールの長さと同じになるのと
単に欲張りということでもある
表示数の兼ね合いはグーグルアナリティクスの数字を見ながら調整したい
データはうそつかへんからな!

はてなPROだからこそできる非表示設定

記事にキーワードリンク
はてなによる広告
ブログのヘッダ
ブログのフッタ
全部非表示!
これは管理画面の設定→詳細設定でいじれる項目
これでスッキリさせたぞ!

名前も変更→天塚右京|INTJ5w4

まあこれは有料でなくてもいつでも変更できるけれど

浮かれちゃ悪いかしら??
実は結構ブログタイトルからひっかかってくる検索流入も多い
だって決めたんだ!INTJの教科書になると!!
ならば、名前も単なる天塚右京から天塚右京|INTJ5w4に変えちゃえ
ゴテゴテしいけど実益を今は取りたい

はてなテーマ UnderShirtを導入

人気テーマでかつ、カード式だったからこれに一択!
blog.hatena.ne.jp
このテーマを元に、さらにCSSで細部まで自分のこだわりを反映させていったのだ!
それを紹介しよう!

タグ表示をカテゴリ風に

UnderShirtの既存のデザインから、CSSをかませてカテゴリ風にした
カテゴリの四角もradiusを強めて丸みを帯びさせた

f:id:uchan79:20190206070211p:plain

Brethtaking!<息を飲むほど美しい>
男性と女性の違いを一言でそれぞれ説明するなら、どうする?

男性は直線的
女性は曲線的

と俺は説明するね
体格や、直截的なコミュニケーションを取る傾向にある男性は、直線的であると形容できないだろうか?
一方でそれはアグレッシブさも兼ね備えている
四角の角ばったデザインは、かような文脈を持つことからかは知らないが
何やら目に刺さってくるような気がして丸みを持たせた

それと、カテゴリの数が多くても読者に分かりづらいので15コに絞った

ブログタイトルをセンター寄せに!ヘッダー画像は後回し

UnderShirtの初期設定だとブログタイトルが左寄せになってしまう
そのままだと不格好なのでセンタリングすることに!

f:id:uchan79:20190206071602p:plain

今のところはヘッダー画像を設定する予定はない
というのも、この手のヘッダーやらを自作するセンスがてんで湧いてこない
だったらプロのひとに外注するのがいいんだろう
“ロスチャイルド家の紋章みたいなヘッダーしてください!”ってね
が、箱と中身を一致させたいという気持ちが今はある
要は、箱だけ豪華にしても中身スカスカなのは頂けない
ヘッダー画像はもっとPVと収入が伴ってからでいいだろう

グローバルメニューを再導入

無料時代の四角い紺色から黒背景の丸いのに変更
f:id:uchan79:20190206072023p:plain

やっぱ丸いのはかわいい
PVを稼いでるカテゴリをピックアップした

また、今回の大幅カスタマイズに際して過去記事を遡っていった
たどり着いたのは、最初の記事
こんなこと書いたっけ?

ブログ内容としては、ネット文化の考察から恋愛論、時事、英語学習法とかかな?
まぁ手探りでやってくんで温かい目でね?

あなたはそこにいますか?Helloはてなブックマークさん? - 天塚財閥

この当時はMBTIの存在を知らなかったわけだしな
ネット文化にしたって、ンなもん興味あるのは少数派なわけだし
恋愛論語るって、お前ホントにタイプ5か??
英語に至ってはあれからブログ経営に集中してるからtoeicも880点のままだし
ピカソも芸風が代る代るしていったわけだし、今後とも天使右京の活躍をヨロシクね☆

プロフィールにh4タグ導入で視認性を上げる

f:id:uchan79:20190206073645p:plain

前がひどすぎたんや!
とは言っても今のデザインが最善とも思わない
が、見やすくはなったでしょう?

サムネイルを変更

2年も同じの使ってたし、変えちゃお!

f:id:uchan79:20190206074238j:plain

右のほうがメタリックでカッコいいよね?

記事表示から概要を消し四角を丸めカテゴリを左上に表示

f:id:uchan79:20190206193535p:plain

ここまでコンパクトにするのにかなりCSSと格闘することになった
何分CSSは難しいからな

☆記事の日付を非表示
これはかなりの冒険だと思う
トップページにおいては、日付の表示は取っ払った
記事内では日付が表示される
その分カードのサイズがコンパクトになってすっきりした
記事を読むかどうかの基準はひとえにタイトルとアイキャッチに集約される
だったら日付はいらない!

☆記事概要も非表示
同じ理由で概要ではなくタイトルが大事
だだったらしい情報が多いのは良くない

☆はてなスター非表示
これも景観の問題
記事内だけで表示させたらよろしい
でも、スターもらうのは大好き!!

☆カテゴリをサムネイル左上に表示
これもカードの縦幅を縮めるため
カードサムネイルにタグを貼る感覚でデザインにも優れる

☆四角を丸くする
おおよそ角ばったデザインは全部CSSで丸くするぞ!

独自ドメインの取得

au79.hatenablog.comからwww.au79.workに変更!
取得はお名前ドットコムでやった
これでグーグルアドセンスに申請できる

.workドメインにした理由

.workなんていう珍しいドメインにしたのは安かったからだけではない
SEO的観点ではドメインによって優劣がつくわけではないのだという
だったら安いやつでええやn
.comとか.jpとか、伝統的なドメインもある一方で
そのほうが訪問者は安心感があるかもしれないが
たぶnほとんどのひとはブログのドメインまで見てない
IT強者だとworkとかxyzといったマイナードメインの存在も知っていると思う
つまり、.workドメインに不安を持つ人は、言うならば中途半端にIT知識のあるひとなんじゃないか
ちゃんとhttpsで保護されてんだし変なブログちゃいますよ!

既存の有名なドメインなんて、目もくれるな!
この俺天塚右京がが取得したドメインこそが、ブランドになるんだ!

まだまだあるカスタムリスト

細部にこそネ申が宿るのなら
一切の手抜きをしたくない
が、今は記事数を重ねることを優先したい
以下は今後カスタムしたい微調整事項だ

PC

Google Tag Managerで記事の読了率をチェック
目次CSSを微調整
記事カードのブックマークボタンを非表示にする
記事中のカテゴリを丸くする
人気記事の日付を非表示にする
関連記事カードの四角を丸くする
フッター情報を両端に表示させる
記事ページの白枠を丸くする
ブログランキングタグを横並びにする
サイドバーの余白を詰める
記事のリライト更新日時を表示させる
カテゴリの>のアニメーション消す
カエレバの全面的導入

スマホ

プロフィール拡大
ヘッダーイラスト注文
人気記事の日付を非表示
複合メニューバー二段構え
カテゴリ右に記事数を表示
改ページの導入
not foundにモジュール追加
カード式サムネイルを導入
オシャンティーなシェアボタンの導入

カスタマイズして直帰率は下がったのか?

結論をいうと、下がってる
カスタマイズで見やすいデザインに仕上がったのは間違いない
CSSを噛ませすぎて重くなったのか、ずっと更新をしていなかったからなのか
はたまた独自ドメインで検索エンジンに再評価されているからなのか
一日あたりのPVは変わっていないのはまだよかった
何分150記事しか書いてないのだから数を当てていきたい

さらなる高み より美しいブログへ

かようなカスタムを経て完成したのが現在のデザイン!
パッとみワープレやんけ
お前そんなにはてなブログ要素消してはてなブログが嫌いなのかという声が聞こえそうだが

俺は、はてなブログが大好きだ!

訪れたひとがその美しさに飲まれ、印刷して額縁に飾りたくなるような…
そんなデザインにしたい
ブログは自分の心象風景を投影する、舞台装置だから!
空の色すら自分で決めたいよね…?
でもそれは、実力が伴ってからのおはなし

ここからは、プロブロガーへ向けて最短距離で爆速DA!

ネットで成功しているのは〈やめない人たち〉である

ネットで成功しているのは〈やめない人たち〉である