YUUU BroG

- ゲームとイラストとWebデザイン -

はてなブログ初心者がほぼコピペだけでデザインを変更してみた

f:id:yuu-tunamayo:20170524234001j:plain

どうもゆうう兄です。
実はここ1カ月くらい、少しずつブログのデザインをひっそりとカスタマイズしてきました。笑
私はproに登録していないのでないので、スマホ版のデザインは変更することができなくて悶々としておりますが...(-ω-)

デザインを調整するにあたって、先輩方がカスタマイズについての記事を丁寧に書いてくださっていたので色々と参考にさせていただきました!
正直ほとんどコピペです(笑)重要
コピペだけでもPCページの方は格段に見やすくなったかと思います。

 私のようなはてなブログ初心者でも簡単にカスタマイズができたので、とても助かります!
そこで今回は私が参考にさせていただいたデザインのカスタマイズ記事を紹介したいと思います!

ゆうう兄が参考にさせていただいたブログカスタマイズ記事

ブログデザイン

tsukuruiroiro.hatenablog.com

「LITERALLY」というブログの「DUDE」というはてなブログテーマを紹介している記事です。
コピペだけで誰でも簡単におしゃれなブログを作ることができます。
テーマを適用した後、自分好みに細かい調整をする方法も記事内で解説してくださっているので、とてもわかりやすいです。

 

見出しCSS

shiromatakumi.hatenablog.com

シロマティさんの「NO TITLE」というブログ「コピペで簡単!CSSではてなブログの見出しをカスタマイズ!」という記事です。
コピペするだけですぐに実装することができる「見出し」に関するCSSが複数まとめてあり、自分のブログのイメージに合ったデザインの見出しに変更することができます。
見出しを変更するだけでもイメージがかなり変わります。

 

シェアボタン

www.ituore.com

shunさんの「いつから俺ができないと錯覚していた?」略して「いつ俺」というブログです!
「コピペ一発!はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ!」という記事に記載されています。
こちらもコピペだけですぐに実装することができ、はてブ、Facebook、Twitter、Google+、Pocketのシェアボタンを一度に作成することができます。
またCSSを記載する場所の説明も詳しく記載されていますので、始めてCSSを調整する方にもわかりやすい内容になっています。

 

続きを読むボタン

www.ituore.com

こちらも上記に引き続きshunさんの「いつ俺」内でご紹介されている「コピペ一発!はてなブログの続きを読むボタンをめっちゃオシャレにカスタマイズ!」という記事になります。
手を抜いてしまいがちな「続きを読むボタン」ですが、こちら続きを読むボタン用のCSSが数種類紹介されているので、自分のブログに合ったデザインのものを選ぶことができます。
jQueryを使用したマウスホバー時にちょっとした動きのあるボタン等も用意されているので一見の価値ありです!(PC用)

 

はてブ・Twitter連携

shijinblog.hatenablog.com

SHIJINさんの「SHIJIN BLOG」というブログで書かれている「はてなブックマークとtwitterとの連携、はてなブログのフォローボタン設置は必須事項」という記事です。
はてなブックマークとTwitterを連携することのメリット・デメリットといった一見ややこしい用に思われがちな内容ですが、初心者にもわかりやすく解説してくださっています。
加えてTwitterのフォローボタンの追加方法も記載されていますので、あわせて確認してみると良いかもしれません。

 

まとめ

以上の記事が私がデザインを調整する際に参考にさせていただいた記事になります。
cssやhtmlの知識があってもなくても、そもそもどこにCSSを記述すればいいの!?といったことも解説してくださっている記事がたくさんあり、とても参考になりました!
ブログのカスタマイズの奥深さを感じました!
勝手に紹介してしまったのですが、大丈夫なのでしょうか...。
それだけが心配です。

ブログのデザインを変更したいと考えている方、ぜひ参考にしてみてはいかがでしょうか。


ここまで読んでいただきありがとうございました!さらば!

ブログ カテゴリーの記事一覧