コピペでOK！のみではてなブログのカスタマイズを一通りやったので、おすすめの最新カスタマイズを８個まとめたよ！
なんか自分のブログがパッとしない
そう思ったのが数日前、以前からブログのデザインとタイトルが気になっていたのですが、
少し気になりだすと記事の更新をしていても、もやもやが晴れず、、
全部変えることにしました！
- デザインが中途半端で、見にくい！
- ブログタイトル変えたほうがいいだろ！
この二点が気になり変更した点です！
ちなみに以前のブログタイトルは「毎日成長ブログ」です。
意識だけ高いのもいい加減にしてほしい
と、そんなわけで恥ずかしいタイトルとデザインをカスタマイズするべく！ここ数日奮闘しておりました。
HTMLやCSSの知識が全くないので、先人の知恵をお借りして、コピーアンドペースト（コピペ）のみで、カスタマイズさせていただきました！
コピペで数日もかかったのかと言う指摘は受け付けておりません。
コピペでできるはてなブログのカスタマイズって、ほんとにありがたいことに検索するとたくさん出てくるんですよね、プログラムができる人には本当に頭が上がりません。。
そんな数ある「コピペでOKなはてなブログのカスタマイズ」から、定番の物から最新のものまでを調べ、いくつかを参考にさせていただいたので、その中からお勧めのコピペでできるカスタマイズをまとめていきます！
全く自分の手柄ではないですが、探すの大変！と言う方は参考にしてみてください！
今回紹介するカスタマイズは以下の8点です。
- ブログタイトル下のグローバルメニューの設置
- サイドバーのプロフィールをWordPressのSANGO風にカスタマイズ
- ブログ記事のカード型レイアウト
- サイドバーのタイトル部分の装飾
- ブログのフォローボタンのカスタマイズ
- 記事下に関連記事の表示
- サイドバーの最新記事を画像付きで表示する
- ブログトップ画像の余白の調整
以上の7点を紹介していきます！
ブログタイトル下のグローバルメニューの設置
初めに、グローバルメニューの設置です。
グローバルメニューと言うのは、
ブログタイトル下にあるこのようなメニューのことです。
必須とも言えるカスタマイズですが、HTMLがわからない人には結構苦戦する作業だったったりしますよね。
このカスタマイズは、Yukihyさんのこちらの記事をコピペさせていただきました。
CSSで組んだドロップダウンメニューとスライドメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
この記事で紹介されているグローバルメニューは、触れるとドロップダウンし、子カテゴリを見ることができるものです。
実装後の動作も記載されていて、とても分かりやすい記事でした。
サイドバーのプロフィールをWordPressのSANGO風にカスタマイズ
次に紹介するのは、サイドバーのプロフィールをWordPressの人気テーマである、SANGO風にカスタマイズする方法です。
具体的には、このような感じです。
はてなブログのデフォルトの物と比べると、だいぶおしゃれ感が増しますよね！
このカスタマイズはオークニズムさんの物をコピペさせていただきました。
オークニズムさんは、このカスタマイズの他にも素敵なカスタマイズや面白いカスタマイズを数多く紹介されていました。
その中でもこのSANGO風のカスタマイズは最近公開されたもののようです。
今までにないカスタマイズですので、このデザインにする人は今後増えてくると思います。
また、自分はフォローのボタンの部分は別のデザインの物に変えてみました。
それも後程紹介します。
ブログ記事のカード型レイアウト
次に紹介するのは、ブログ記事をカード型にする方法です。
カード型と言うのは、このようなデザインです。
大きなアイキャッチ画像が特徴的で、読者の目を引くデザインが特徴的です。
はてなブログのテーマストアでも、カード型の物は人気のようですね。
確かに、おいしそうなご飯や綺麗な景色が大きく表示さると、興味を持ってしまいます。
このデザインをCSSとHTMLによって実現させたのが、あいすさんのこの記事です。
アイキャッチ画像にもこだわっていて、とても可愛いブログです。あいすさんも、プロフィールには先ほど紹介したSANNGO風のデザインを使用していますね。
コードの挿入個所まで丁寧に記載されていて自分にも分かりやすかったです。
サイドバーのタイトル部分の装飾
続いて紹介するのが、サイドバーのタイトル部分を見やすくするカスタマイズです。
実際に行うと、このようになります。
このオレンジの枠線に黒文字の部分がカスタマイズした部分です。
色は好きな色に変更できます。
コピペさせていただいたのが、ふみわさんのこちらの記事です。
一見シンプルなカスタマイズですが、このカスタマイズで僕のブログにメリハリが付きました。するかしないかで大違いです。
こまかな部分への心配りで、ブログの完成度が違ってくるんだなとひしひしと感じました。
ブログ、SNSのフォローボタンのカスタマイズ
次にブログ、各種SNSのフォローボタンのカスタマイズです。
多くのブロガーさんがつけているこのボタンですが、デザインによって目を引くか引かないかが分かれてくると思います。実装するとこのようになります。
今回コピペさせていただいたのは、いつ俺のshunさんのこの記事です。
おもしろいブログタイトルですよね。笑
この記事では、各種フォローボタンを記事の上や下に挿入する方法なんかも記述されていて、とても分かりやすかったです。
また、ボタンにカーソルを置くと、アクションが起こるのですが、その動作も何パターンかあり。自分で選べたのがよかったです。
記事下に関連記事の表示
次に記事下に関連記事を表示する方法です。
これもブログへの滞在時間を延ばしてもらうために、必須の設定ですよね。
同じカテゴリの記事なんかが目に入ると、ぽちっとしてしまうものです。
今回参考にさせていただいたのは、welpi.2さんのこちらの記事です。
このカスタマイズはまさにコピペでした。笑
コピーして、記事下に貼り付けて完了です。
ちょっとしたカスタマイズで一気に便利になるので、未導入の方は試してみてください！
サイドバーの最新記事を画像付きで表示する
次に紹介するのは、サイドバーの最新記事を見やすくするカスタマイズです。
実際にカスタマイズしたのがこちら。
画像と「おすすめ」の一言があるだけで、だいぶ印象が変わりました。
このカスタマイズを紹介してくださっていたのは、minimalgreenさんのこの記事です。
高度な以前までできなかった、高度なカスタマイズなのですが、minimalgreenさんのおかげで、とても素敵なデザインにすることができました。
最後に、ブログトップ画像の余伯の調整方法です。
実装後がこちらです。
はてなブログのトップ画像は、余白が広くなりがちなのですが、このカスタマイズで、ほど良い余白にすることができました。
コピペさせていただいたのは、月無ことのは日記さんのこちらの記事です。
tukinasikotonoha.hatenablog.com
このカスタマイズもブログの雰囲気を結構変えてくれました。
大きなトップ画像と、グローバルメニューがあると、少しかっこつく感じがします。
まとめ
以上が、今回コピペでOK！なはてなブログのカスタマイズを探している時に見つけた素敵なカスタマイズ8つでした！
HTMLやCSSが全く分からない自分でも、今回紹介した8人のブロガーさんのおかげで、今までより良い、ブログになりました！
ブログのカスタマイズは何度か行っていますが、気持ちを入れて、自分のしたいブログにすることで、より愛着がわくのを改めて実感した気がしました。
今回紹介したカスタマイズはプログラミングが全く分からない人でも、時間をかければできるものだと思うので、気に入ったものがあれば、行ってみてください！
8人のブロガー様ありがとうございました！
今度は自分でもプログラミングの勉強をしてみようと思います！
コピペでOKなカスタマイズを探しているときにこんな本も見つけたので購入してみました！
以上！「コピペでOK！のみではてなブログのカスタマイズを一通りやったので、おすすめの最新カスタマイズを８個まとめたよ！」でした！
最後まで読んでいただきありがとうございました！ツイッターフォロー、読者登録お待ちしております！
