あべろぐぷらす

元SEが半農半Xな暮らしを目指して頑張る様子を福島から発信するブログ

【はてなブログ】『ZENO-TEAL』カスタマイズ!テーマ変更してからやってきたことをまとめてみようと思う。

f:id:abeshi01:20171124232032p:plain

こんにちは、あべし(@honjituno)です。先日ブログデザインをリニューアルしました!『ZENO-TEAL』というめちゃくちゃおしゃれなデザインで、とても気に入っています。

 

デザインのリニューアルに合わせて、心機一転、色々とカスタマイズをしてみました。せっかくですので、もともとやっていたカスタマイズや、いくつか新しくスタマイズしてみたものをまとめて紹介していきたいと思います!

abeshi-syokupan.hatenablog.com

カスタマイズを始める前に

カスタマイズの紹介をしていく前に、カスタマイズといったら『バックアップ』ですよね!新しいテーマにする時には、デザインCSSがまっさらになってしまうそうなのですが、ぼくはこわかったのでhtml含め全てコピペしておきました!

 

後悔先に立たずですので、『やばい!』ってなった場合に備えて、作業前にはバックアップを必ず取るようにしておきましょう! 

元からのカスタマイズ

今回新しくカスタマイズしたものを紹介する前に、以前からカスタマイズしていたものをまず紹介していきたいと思います!他にもいくつかカスタマイズしていましたが、このテーマに適用できたものは以下の通りです。では早速!

サイドバーシェアボタン

サイドバーのシェアボタンのカスタマイズです。サイドバーもおしゃれにしたいですよね!

www.ituore.com

目次を隠せるようにするやつ

最初は隠れていて、目次を見たい時だけクリックすると表示されます!カスタマイズすると、見た目をかなりすっきりさせることができます。

www.yukihy.com

ぱんくずリスト設置

読者が道に迷わないようにしっかりと設置しておきたいやつです。SEO的にも良い効果があるみたいです。

www.du-soleil.com

蛍光ペン 

強調したい部分が蛍光ペンを使ったようになります。ここに来るまでにも何度か使っていますが、これです!!青系の色が好きなので、水色の蛍光ペンにして使っています!

www.north-geek.com

ヨメレバ・カエレバをおしゃれに

最近カスタマイズした中では一番良かったものです!このブログでは本の紹介にリンクを貼ることが多いです。実際に使ってみるとこんな感じになります! 

abeshi-syokupan.hatenablog.com

サイドバーにインスタグラム

はてなブログでサイドバーに自分のインスタグラムをのせようと思ったら、カスタマイズするしかありません。ぼくのインスタの更新頻度は著しく低いですが、ブログにインスタはぜひやってみたかったので頑張りました。 

abeshi-syokupan.hatenablog.com

アドセンス設置を自動化

はてなプロに移行してからのカスタマイズです。アドセンスを文中に自動で設置してくれます。文中アドセンスをやりたい方には必須かと思われるカスタマイズですので、ぜひやってみて下さい!

www.shigo45.com 

新しいカスタマイズ

ここからが『ZENO-TEAL』に変更したから行った新しいカスタマイズです!基本、デザインテーマに関するカスタマイズですが、その他にもちょこちょこカスタマイズしてみました!

グローバルナビゲーションの設置

カッコいいのでやってみました!このブログでは『ブログのこと』、『福島レポート』、『うつ』、『読書』の4つを設定してみました。

zeno-teal.hatenablog.com

ブログのメインカラーの変更

ブログのメインカラーを変更することができます。ブログにオリジナリティーを出すために、自分の好きなカラーに変更してみました。ぼくは青系の色が好きなので、以前と同じで青をメインカラーにしています。 

zeno-teal.hatenablog.com

タイトル下におすすめエントリの設置

これもカッコいいので設置してみました!自分ではいいと思っていても、なかなか注目されずに埋もれてしまっている記事ってありますよね。そんな記事たちをおすすめ記事として並べておくことができるんです!

 

最初なので、とりあえず人気記事をいくつかと、埋もれていると思っている記事を並べてみました。少ししたら入れ替えたりするかもしれませんが、この並びでいってみようと思います。

zeno-teal.hatenablog.com

 

h2固定化の解除

ZENO-TEALの最初の設定では、h2タグの見出しが固定化されるようになっています。ブログを読み進め、スクロールしてみると分かるのですが、h2の見出しもずっと一緒についてくるようになっています。ぼくはなるべくシンプルしたい派なので、固定化を解除してみました。

zeno-teal.hatenablog.com

 

アイキャッチない記事にデフォルトの画像を設定

アイキャッチ画像がない記事には、この画像がデフォルトで出てきます。適当に作った急いで用意した感が出てしまっていますが、アイキャッチが用意できてない記事には当分の間この画像が表示されます。

f:id:abeshi01:20171109153841p:plain 

zeno-teal.hatenablog.com

シェアボタンのデザイン変更

シェアボタンのデザインも変更してみました!自分の好みで4種類のうちから選択することができます。ちなみにこのブログでは2番目を採用することにしました。

zeno-teal.hatenablog.com

フォントデザイン

フォントも少しだけ変更してます。

www.north-geek.com

この記事が気に入ったらフォロー設置

これは!!と思い早速実装!これまでのカスタマイズの中でも、トップクラスにお気に入りです。これで記事下の印象がグッと変わってきます。

www.foxism.jp

やってみたいカスタマイズ

ここからはまだやっていないけど、これからやってみたいカスタマイズを紹介していきたいと思います!

プロフィール部分をマテリアルデザイン風に

プロフィール部分はこれまで手を入れたことがありません。よくあるプロフィール紹介のページも用意してないですし、少し特徴的なデザインにしてみようかなと思います。

www.foxism.jp

 

ブログタイトル部分のデザイン変更

みなさんcanvaって知っていますか??ぼくはアイキャッチ画像の作り方を調べていて知ったのですが、canvaを使うといい感じのデザインを無料で作ることができます!

 

これまではブログのアイキャッチ画像しか作っていませんが、ブログタイトルの部分もcanvaを使っていい感じにしたいと思います!

www.canva.com

 

おすすめ記事・関連記事をおしゃれに

おすすめ記事や関連記事の紹介もおしゃれなデザインにカスタマイズできます。今のブログカード方式もいいのですが、『チェック!』とか『合わせて読みたい!』とかやってみたいです!

www.notitle-weblog.com

 

おすすめ記事のスライダー

スマホ画面でこんなことも出来るみたいです!仕組みは全く分かりませんが、カッコいいのでぜひやってみたいです!

hitsuzi.hatenablog.com

おしゃれな囲み枠

おしゃれなデザイン憧れます。ブログの中で囲み枠があると文章が一気に読みやすくなります。上手く使いこなせるようになりたいです。

saruwakakun.com

 

引用デザイン

またしてもサルワカさんのカスタマイズです。30種類のサンプルが紹介されています。地味な箇所かもしれませんが、引用デザインも変えてみたいです!

saruwakakun.com

 

どうせならSEO関連のお話も

あれこれカスタマイズしていく中で、どうせならさらっとできそうなSEO関連のことも一緒にやってしまおう!と思いました。SEOははまりすぎると抜け出しだせなくなりそうですので、本当にさらっとです。 

Bingウェブマスターツール登録

仕組みはよく分かっていませんが、Bingウェブマスターツールなるものに登録しているとBing経由でのアクセス数が増えるかもしれない!ということらしいです!

 

登録するだけでアクセス数が増えるならぜひ!というわけで早速登録してみました。

www.shotanomad.com

ただ、とても丁寧に書かれているにも関わらず、なぜか、Bingウェブマスターツールにサイトマップを登録することができませんでした。

 

あれこれ試してから、少し休憩し、ようやくこちらのブログも読んでやっと登録することができました!入力が必須の項目があったのに、そこに記入してなかったことが原因でした笑。みなさんご注意を!

www.tamashii-yusaburuyo.work

GoogleサーチコンソールRSSフィード送信設定

こちらも仕組みはよく分かりませんが、Googleサーチコンソールはサイトマップを登録するだけのものではないそうです。RSSフィードの送信設定をするだけでSEO的にいいことがあるそうなので、こちらもサクッと設定してみました!こちらは一発でできましたよ!

www.shotanomad.com

どうせならその他の色々も

カスタマイズではありませんが、SEOのお話に引き続き、その他の色々についてもやってしまいたいです。てか、やってなかったこと多すぎですね笑。

お問い合わせフォームの設置

しっかりとしたブログには、だいたいお問い合わせフォームありますよね。

www.mutant-tetsu.com

プライバシーポリシーの設置

こちらは必須っぽかったのに、やってなかったやつです笑。急いでやっておこうと思います。

www.sulphurbottom.com 

というわけで、まだまだカスタマイズは続いていきます。カスタマイズは楽しいので、気がついたら際限なく追及してしまいそうです。カスタマイズのお話をこえてSEOや、その他の色々で紹介したような部分も書いてみました。長文エントリにも関わらず、ここまでお読みくださり本当にありがとうございます。

 

今回のデザイン変更で、ブログとして必須の部分でまだ手付かずだった部分も明らかになってしまいました。急いでやらなきゃ笑。みなさんも、気になるカスタマイズはありましたらぜひやってみて下さい!それではー!