はるの趣味日記

野鳥撮影系大学生の雑記ブログ

はてなブログのカスタマイズ!コピペのみで作られた当ブログのデザインカスタマイズを全て晒していく

f:id:haru_hobby:20170802035239j:plain

 とうとう当ブログの記事が100を超えました。実際は7月時点で超えていたみたいなんですが、何も気にせず更新してしまいました...。

 

今回は100記事超えた記念ということで当ブログのカスタマイズしている部分を全部晒していこうと思います。今後ブログのカスタマイズを考えている方の参考になれば幸いです。

 

そんな偉そうなことを言っておきながら残念ながら僕はブログのデザインに関するプログラムは全くわかりません。cssとかjavascriptってなんですか?ってレベルです。かろうじてわかるのはjavaとjavascriptが違うってことくらい。

 

おまけにデザインスキルもありません。自分で1から絵を描くのがそもそも苦手なのでデザインもココナラで頼んでしまっています。

 

ですが僕のブログを見て下さい。パソコン版にしろスマホ版にしろなかなかいい感じのデザインだと思いませんか?

 

あ、片方でしか見ていない人は後で違う方のデザインを見てみてくださいね。

 

プログラミングもデザインもできない僕にも現在のインターネットの力と心優しいカスタマイズ方法を記事にしてくださっている技術者の方々の力を借りればここまでにはなるんです。

 

これ以上を求めるなら多分自分でプログラミングやデザインを勉強した方が良いと思います。そういうわけでタイトル通りカスタマイズ部を晒していきますね。では始めていきましょう。

その前に

はてなブログproに加入していないと変更できない部分もいじっているので、もしここまでのデザイン変更を加えたいならはてなブログproに加入しておいてください。

 

あとカスタマイズ後にうまく作動しなくてもこちらでは責任を取れません。自己責任でお願いします。

 

それとカスタマイズの前にコードのバックアップを取っておくこと、動作を必ずチェックすることをお願いします。

パソコン版カスタマイズ

「はるの趣味日記」ではパソコン版とスマホ版のデザインを変更してあります。使っているテーマ自体はレスポンシブ対応なんですが、あえてそれを切って別のコードを使っているわけです。

 

なのでトップのデザインは割と似ているもののパソコン版とスマホ版ではデザインが大きく違う仕様になっています。

はてなブログテーマ

f:id:haru_hobby:20170802040639j:plain

まずは使っているテーマなんですが、zeno-tealというテーマを使っています。storkというwordpressで使われているおしゃれなサイトテーマがあるんですが、それにかなり似たようなテーマです。

 

あ、storkは有料ですがzeno-tealは無料です。ていうかはてなブログのテーマに有料のやつって無いんじゃないかな?クオリティ的には有料でもおかしくないレベルの高さなんですけどね。

 

このテーマで一番気に入ってるところは記事の表示がカードタイル状なところです。他の部分はcssとhtmlのコピペで作れそうですがこの部分は難しそうだったので。もちろんzeno-tealを使うことでグローバルメニューやスライドメニューは簡単に実装できるようになってるんですけどね。

グローバルメニュー

f:id:haru_hobby:20170802034207j:plain

これを実装するには結構長いコードをコピペしないといけないんですが、zeno-tealには簡単なコードでグローバルメニューが実装できるようになっています。

zeno-teal.hatenablog.com

おすすめ記事表示部分

f:id:haru_hobby:20170802034218j:plain

ここもグローバルメニュ同様に簡単なコードで作成できます。他のテーマで実装するとなるとこちらも結構長いコードが必要になります。

zeno-teal.hatenablog.com

サイドバー

f:id:haru_hobby:20170802034241j:plain

サイドバーについてはほとんどの部分は最初からある内容なので書く部分は少ないです。

 

しかし、はてなブログの読者登録ボタンとツイッターのフォローボタン、それとアイコンを大きくしてあるのでそのコードのコピペ元を記載しておきます。

 

実際にこれの効果があるのかはわかりませんが、個人的には気に入ってるデザインです。

panmeeee.hatenablog.com

georges.hatenablog.jp

記事途中のアドセンス

f:id:haru_hobby:20170802034258j:plain

グーグルアドセンスの広告についてです。本当はアドセンスの広告を記事中に入れるときはいちいち本文にコードを入力しないといけないんですが、自動で見出しの上に入るようにしてあります。

 

これも結構長くて難しいコードだったような...クリック率は下がってるか上がってるかわかりませんが使ってなかった時と収益は変わってないので大した影響は無いんでしょうね。

uxlayman.hatenablog.com

ソーシャルリンク

f:id:haru_hobby:20170802034320j:plain

本文の下にあるはてブとかツイッターでのシェアとかfacebookでのシェアに使うボタン。これもコピペです。

 

簡単にできました。javascriptを使っているので実際に作るのはかなりめんどくさいんだろうなーって思います。なんかシェア数やブックマーク数をカウントしているらしいですよ?

www.yukihy.com

アドセンス横並べ

f:id:haru_hobby:20170802034334j:plain

記事下のアドセンスなんですが、2つの広告を横並べにしてあります。一つだとなんだかバランスが悪いですが、2つ並べるとけっこうおさまりが良いんですよね。

 

とはいえ上下に2つ並べ+記事内の自動アドセンスを突っ込んだらグーグルから広告入れすぎじゃない?って改善提案が来てたのでほどほどにしましょう。僕は上に置いてたアドセンスは削除しました。

 

昔はアドセンスの広告数にも制限がありましたが今は無いですし戻してもいいんですが、広告はりすぎで検索順位を落とされても嫌ですからね。上手い方法が出てくるまでこのままかもしれません。

remotosa.com

記事内のcheckボックス

f:id:haru_hobby:20170802040202j:plain

リンクを目立たせるために使っている枠組みです。はてなブログの関連記事挿入が重たいので、リンクを文字に被せてボックスで囲んだ方が軽いし目立つので変更しました。

 

って言っても昔の記事の分は直してないのでまだはてなブログのオリジナルの関連記事を使ってる記事も多いはず。直すのはめんどいのでやらないつもりです。

www.notitle-weblog.com

記事内の吹き出し

f:id:haru_hobby:20170802040218j:plain

wordpressでおなじみの吹き出し文。あれも登録してあります。checkボックスの設定もそうでしたがいちいち文章内でhtmlを追加するのがめんどくさいのでグーグルクロムのはてなブログアドオンを登録して使う方法がお勧めです。

 

クラスの内容を覚えてしまえば吹き出しもcheckボックスも簡単に作成できますよ。

www.notitle-weblog.com

スマホ版カスタマイズ

 パソコン版デザインはけっこういろんな所を調べてきたのですが、スマホ版は逆にほとんどを羊の雑記帳さんからお借りしました。

 

他のスマホデザインも調べていたのですが結局ここのデザインが一番完成されていたので。

ヘッダー部

f:id:haru_hobby:20170802034855j:plain

パソコン版ではヘッダー画像を使っていたんですが、スマホ版では画像を使っていません。文字だけの方がおさまりが良かったので。

 

さて、このヘッダー部ですがかなり凝った作りになっていてとっても気に入っています。まずは左側のマークなんですが、クリックしたらドロップダウン式で指定した文字とリンクを表示することができます。

 

グローバルメニューと被るかもしれませんが、スマホ版はグローバルメニューの幅が狭い。なのでその狭さへの対策に使えるのではないでしょうか?

 

欠点はそもそもアイコンが何かわかりにくいので多分あんまりクリックされていないことですかね。

 

次、タイトル右側のマークですがこれをクリックすると読者登録ボタンに飛びます。こちらもデザイン的に好きなんですがやっぱりわかりにくいような気も...。

hitsuzi.hatenablog.com

グローバルメニュー

f:id:haru_hobby:20170802034914j:plain

タイトルの下のグローバルメニューです。パソコン版とほぼ同じ。ただしzeno-tealのテーマのおかげでパソコン版は短いコードでしたがこちらは結構長いコードです。

 

まあ、結局コピペで終わるので大した差は無いんですけどね。文字とリンクurlを差し替えて終わりです。

hitsuzi.hatenablog.com

スライダー

f:id:haru_hobby:20170802034927j:plain

この部分もめちゃくちゃ素敵!!画像にリンクが張られていて一定時間でスクロールするという仕様です。スクロールしてくれるので画像リンクは複数設定可能。

 

ちなみに画像の左右の→をクリックすると強制スクロールできます。見てほしい記事を設定しておきましょう。

 

もちろんこの部分もかなり難しそうなコードです。まあ例のごとくコピペなので...。ちなみに差し替える部分は画像とリンクurlです。

hitsuzi.hatenablog.com

記事一覧

f:id:haru_hobby:20170802040408j:plain

日付や囲みの色が変わっています。これもコピペで一発。ここまでこどみすさんのデザインばっかりだ...。デフォルトの設定よりはよっぽどキレイになりました。

hitsuzi.hatenablog.com

記事下プロフィール

f:id:haru_hobby:20170802034940j:plain

記事下にプロフィールを設置してあります。パソコン版サイドバーのプロフィールよりもかなり手の込んだプロフィールです。

 

アイコン画像の下に名前、紹介文が来てその下にソーシャルのフォローボタンが設定されてあります。

 

ツイッターやらはてなやらfacebookやらですね。使わないSNSのフォローボタンは消してしまっても問題ないと思います。

hitsuzi.hatenablog.com

記事内のcheckボックス

f:id:haru_hobby:20170802040237j:plain

パソコン版と一緒です。

www.notitle-weblog.com

記事内の吹き出し

f:id:haru_hobby:20170802040247j:plain

パソコン版と一緒です。

www.notitle-weblog.com

記事内のアドセンス

f:id:haru_hobby:20170802034959j:plain

こちらもパソコン版と一緒。ただし広告が出てくる場所が微妙に違うかも。

uxlayman.hatenablog.com

記事内のソーシャルリンク

f:id:haru_hobby:20170802035013j:plain

こちらもパソコン版と一緒。

www.yukihy.com

記事下のフォローボタン(はてな、ツイッター)

f:id:haru_hobby:20170802035023j:plain

サイドバーに設定していたはてなブログの読者登録とツイッターのフォローボタンを記事下に設定してあります。

 

こちらもやり方はサイドバーでの設定とあまり変わりません。

georges.hatenablog.jp

見出し

f:id:haru_hobby:20170802040259j:plain

zeno-tealのテーマにはh2~h4までちゃんと見出しが設定されているのでこちら側がわざわざ見出しの設定をする必要はありませんでした。むしろ辺に設定するくらいならデフォルトの方がよっぽどマシなくらいしっかり設定されています。

 

ですがテーマの影響を受けないスマホ版カスタマイズだとはてなブログのデフォルトになるので味気ないのです。なのでスマホ版では見出しをいじってあります。

www.yukihy.com

画像デザインについて

f:id:haru_hobby:20170802035042j:plain

ブログのアイコンやヘッダーなどの画像系も外注しています。これらは自分で書いたわけではなくココナラで依頼しました。なのでさすがにタダでとはいきません。

matakondo8.hatenablog.com

ですが価格のわりにクオリティが高いものが多いのでデザインを主力の記事にでもしない限り自分で描こうと思わずに素直に任せてしまっていいと思います。

 

0から勉強していたのでは時間やお金をかけてもココナラの500円で作成してもらえるデザインにすらなかなか追い付けないと思います。コスパを求めるならできないことは外注してしまって自分のできることにのみ力を注いだ方が良いんじゃないかなーって思いますね。

最後に

こんな風にちゃんとデザインと機能の両方を考えたコードをかける人はすごいですね。尊敬します。

 

デザイン系のプログラムではないですが、僕も一応プログラムを書くことがあるので難しさはよくわかるので。

 

人の書いたコードを自分の記事にしてしまうのはちょっと気が引けましたが、それ経由で記事を見に行ってくれる人がいるならそれでいいのかもしれません。

 

知られていないっていうのは存在していないのと大して変わりませんからね。良いものでも宣伝しないと知らない間に忘れられてしまいます。よかったらぜひリンク先の記事まで行ってシェアしてあげてください!

 

...もっとも、僕が今回引用したブログはだいたい検索上位に来るものがほとんどなので知られていないってことは無いと思いますが。