Welcome to Silent hill

週刊少年ジャンプの感想や就活、静岡のことについて書く「地域密着型脱力系雑記ブログ」

はてなブログをカスタマイズする時に参考にしたいサイトをまとめておきました。

ãã½ã³ã³ã使ãå­¦çã®ã¤ã©ã¹ãï¼ç·å­ï¼

自分用まとめ兼、ブログ改造したいなユーザー向け記事です。

昨日今日で改造した部分はヘッダーにグローバルナビゲーション

(ヘッダー部分にカテゴリー等を表示)を追加したこと。

そして見出し目次の調整です。

はてなだと、スマホにも同じモノを反映させることが出来るみたいなので、どっちか設定しておけば両方良い感じのデザインになります。

 

 

今回は、カスタマイズする際に参考にさせてもらったサイトをまとめたいと思います。

 

 

ヘッダーを改造しよう

ヘッダーってどこ?

タイトル下です。

今ぼくのブログを見てもらえればわかるんですけど、タイトルの下に色々入ってますよね。

今はグローバルナビゲーションっていうのが入ってますが、元は何も入ってませんでした。

なので空白。寂しい感じでした。

 

グローバルナビゲーションって?

f:id:tnkbnbn:20180624213137p:plain

これです!!!!!

他のブログでよく見るヤツです。

色んな記事にアクセスできるように、てっぺんにカテゴリーやブログ説明へのリンクを持ってきています。

ブログによって、スマホに対応させたり、メニューとして機能させたり、色々カスタマイズできるみたいです。

 

ブログやる上で、ナビゲーション必須だと思います。

Googleアドセンスの審査にも関わってくるので絶対付けておきましょう。

 

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

やり方&参考にしたサイト

 やり方ですが、はてなブログでのやり方が載ってますので他のブログサイトはどうなるかわかんないです…

ぼくはこのサイトを参考にナビゲーションを設置しました。

 

www.yukihy.com

 

やり方は簡単でサイトに載ってるテキストコードをヘッダーとCSS欄にブチ込んで数値をイジるだけ

注意すべき点はリンクの数に合わせて倍率を変化させる必要があるところです。

例えばリンクを5つ表示したい場合、100を5で割った数字を、コードに組み込みます。入れるところは17~18行目(これ以外のコードが前にある場合、行数も変動します)くらいにある「width:~%」に入れます。

個人的にオススメなのは5つくらい。

あとはリンクを中央寄せにするのか、ナビゲーションをページいっぱいまで引っ張るのかなど、細かいところをイジりましょう。

 

 カラーの変更もメッチャ簡単です。色のコードはここから引っ張って来るのをオススメします。

html-color-codes.info

「この色がいいな」って思ったらそこを押せばコードが出てくるので直感的に理想の色合いを実現できます。オススメです。

ブログやwebサイトのカスタマイズにはこのカラーコードが必要不可欠な気がするのでブックマークしておくと色々便利かもしれません。 

 

ナビゲーション導入のやり方はこんな感じです。この方のブログはもっと色々なカスタマイズ方法が載ってるのでマジで参考になります。オススメ!

www.yukihy.com

 

見出しの変更

次に見出しの変更です。見出しは大、中、小、と三種類あり、既存の設定だと太字+文字サイズが変更されるだけです。

カスタマイズすることで、このブログの見出しのようなオレンジのヤバイ見出しを作る事だって可能です。

見出しをイジるだけで、格段に記事が読みやすくなるんでこれも導入必須って感じですね

 

こちらのサイトを参考に変更しました。

www.notitle-weblog.com

置いてあるコードを引っ張ってデザインCSSに貼るだけなので、本当に簡単です。

カラーの変更はさっき挙げたカラーコード一覧のサイトで確認すると良いです。

 

目次の変更

 目次に関してはご自由に、って感じです。

既存の目次が気に入らなかったのでカスタマイズしましたが、特に不満が無い場合、そのままでも大丈夫だと思います。

Googleアドセンスの審査もそこは見ないんじゃないかな~~~!どうだろうか

 

www.bombkun.com

www.bombkun.com

 

理想形を作るために、必要な情報がガッツリ載っててスゲー役立ちました。

シンプルな方が良いんで!

 

おわりに

ブログはちょいちょいイジった方がいいと思います!!!!!!見やすくなるんで!!!!

あとその人の個性も出る気がします。センスもね。

そんな感じでセンスゼロのブログになっちゃいましたが、これからもちょいちょい読んでもらえたらスゲー嬉しいです。

 

そう言えばW杯、日本代表が予選抜けましたね!!!!!!おめでとう!!!!

頑張れニッポン!!!!!!

f:id:tnkbnbn:20180628232312p:plain