ぐるぽよどっとこむ

ゲーマー社会人の雑記帳です。いろいろ書きます。

ブログテーマを「マテリアルぽっぷ」に変更&初心者がカスタマイズしてみた

スポンサーリンク


f:id:gurupoyo:20191012174231p:plain

 

さよならぐるぽよどっとこむ

 

 

f:id:gurupoyo:20191012211925p:plain

 

ようこそぐるぽよどっとこむ!!!

 

 

というわけで宣言通りブログデザインを変えました

 

 

↓宣言したやつ

www.gurupoyo.com

 

 

上2記事のサムネがひでえな!

 

テーマはこれ!

blog.hatena.ne.jp

 

こちらを使用させてもらいました!

 

記事一覧がカード表示で2列になるのと、全体的に好きなデザインだったからです

弱小ブロガーにとっては一覧にブクマ数とスター数出なくなるのはちょっと残念だけど、まあ本当に残念だなってだけなので妥協しました(記事下には変わらずボタンあるのでこれからもポチポチよろしくね!)

 

blog.hatena.ne.jp

 

以前まで使ってたのはこれです

そんな変わってなくない?って感じなんですけど

 

f:id:gurupoyo:20191012175727p:plain

 

コメント欄がない!!!

 

いや正直個人ブログにコメントなんてほとんどない時代だしこれも重要か?って言われると何とも言えないのですが、あるかないかならあったほうがいいからね!

あと返信が欲しいコメントとかあればこちらに書いてくれると返しやすいのでうれしいです

 

他にも細かいところでマテリアルぽっぷのほうが私のニーズに合っていたということもあって変更した次第です

 

底辺SE、カスタマイズとの闘い

マテリアルぽっぷのサンプルブログを見ていただけるとわかると思いますが、結構カスタマイズしました!

見てくれだけでもかっこよくしておけばきっと新規さんも「人気ブログっぽ~~~~い!」とファンになってくれるはずだ(希望的観測)形から入るタイプ、極まれり

 

具体的にどこいじったの?ってのをまとめておきます。ほぼ先人の知恵をお借りしたので私から長々と説明することはありません(鼻ホジ)

 

カラーリング、グローバルメニュー、プロフィール、一覧表示

この4つはサンプルブログを参考にしたのでまとめて書いちゃいます

 

カラーリングはこちらのページから気に入った色を実際に設定してみて、ピンときた色にしました!

 

www.colordic.org

 

メインカラーもサブカラーも#007bbbに統一しちゃってます

背景色ははてなデフォルトの背景色設定から合いそうなのを選びました!

 

前回もそうだったから察してる方もいらっしゃるかもしれませんがブルーが大好きです!!SwitchのJoy-Conも青だしPS3とPS4の本体色も青です!!

青は清涼感があっていいよね

 

グローバルメニューはサンプルは

  • ホーム
  • プロフィール
  • アーカイブ
  • ポリシー
  • お問い合わせ

の5つだったけど、うちはホーム=アーカイブなのでアーカイブは消しました!

5つだとスマホ表示したときに2行になっててなんか見栄え悪いのもあり

あと英語表記だったけど英語とかマヂ無理だから日本語表記にしました!(低能)単語帳おいち

 

プロフィールは背景を真っ白に!

cssでこんな感じに色指定してあげてます(こちら参照)

.hatena-module-profile .hatena-module-body {
  background: #ffffff !important;
}

 

一覧表示はデフォルトは記事カードが3列ですが、こちらもサンプルを参考にすることで2列+サイドバーに変更することができます

 

demo-mamegoro.hatenablog.com

 

シェアボタン

f:id:gurupoyo:20191012202553p:plain

これです

記事の上と下につけました!

 

f:id:gurupoyo:20191012202715p:plain

今までは各々デフォルトのボタンだったので統一感がなかったけど、全部同じ形式のボタンをぴったり並べてあげるだけであら不思議、大手のメディアサイトのような気分に!(気分だけ)

 

こちらを参考にしました

 

blog.minimal-green.com

 

画面トップ・ホームに戻るボタン

右下を見てくれ!!

 

f:id:gurupoyo:20191012211757p:plain

 

これ!!めっちゃ便利!!

 

左のボタンを押すとページの一番上に、右を押すとホームに戻れます

ブログは1ページが長くなりがちなので、これがあると読みやすさや直帰率の低下が期待できます!!たぶん!

さよならマウスホイールくん

※直帰率とは

外部から来てくれた読者さんがそのページ読んだらそのまま帰ってしまう率

これが低い=同じ人が自分の記事を複数読んでくれている、ということ!

こちらを参考にしました

 

www.imuza.com

 

アドセンス貼った?

貼ったよ!

 

f:id:gurupoyo:20191012211632p:plain

 

すげーーーー!!!!!!

 

とりあえずサイドバーと記事上・下に貼っておきました

サイドバーと記事上は1つずつなので発行されたタグをそのままはてなの編集画面で貼るだけなんですけど、記事下はスクエア広告を2つ表示するようにしてます。そのほうがクリック率が上がるらしい(重要)

それについてはちょっと工夫が必要なので、こちらを参考にしました

 

mamegoro.com

 

記事中にも貼りたいところですが、今日は疲れた!!!のでまたそのうちやります

 

やろう、カスタマイズ

はてなで配信されているテーマはデフォルトでもそれっぽく見える完成度の高いテーマが多いです!

でもオリジナリティを出したり、客層に合わせたレイアウトにしたりっていうのは大事だと思うので、みなさんもカスタマイズやりましょう!

あ、デザインカスタマイズするときはサブブログを作ってそっちで試したほうがいいです!

公開してるのに影響出たら大変ですからね 

 

 

生まれ変わったぐるぽよどっとこむをよろしくお願いします!!

 

 

 

記事が面白かったらクリックお願いします!

ブログランキング・にほんブログ村へ