ファ氏ログ

  🎸ファ氏の雑記ブログ 🎸

初心者が「はてなブログ」のカスタマイズに挑戦した記録

f:id:FascistRed:20190127171310j:plain

これは、CSS? へ? 何それ?

美味しいの?

ってレベルの中年男性がブログのカスタマイズに奮闘する壮大なドキュメントである。

 

なんちゃって。

 

 

 

はてなブログを開設してからというもの勉強の日々。

簡単に使えそうと思って手を出したけど、はてなブログProってやつにして、独自ドメインやら何やらで最初から奮闘しまくり。

こんな事なら無料にしとけば良かったんちゃう?って思いながらも頑張ってる。

 

ようやくブログを書き始めたら、気になり出したのがブログのデザイン。

最初から用意された物を使うようになってるけど、カスタマイズが可能とか。

 

 

いや、待て。

何を考えてんねん!

そんなんド素人のおっさんにできる訳無いやん。

なんて心の声が囁いてたけど、好奇心だけで手を出してしまった・・・。

 

 

 

ド素人が「はてなブログのカスタマイズ」に挑戦!

 

カスタマイズって言う響きがカッコイイ!

でも右も左もわからん初心者に出来るんだろうか?

そう思いながら、恐る恐る始めてみたもののやっぱり大苦戦。

 

 

はてなブログにはテーマが用意されている

 

まず、はてなブログにはテーマというデザインの基本形みたいなのが用意されてる。

このテーマは、そのままで十分使えるもので、公式なものから個人で作成されたものまで種類は豊富。

最初に、このテーマを選んでそこからカスタマイズしていく感じ。

 

なんかギターのマルチエフェクターに内蔵されてるパッチから自分好みの音作りをするのに似てるやん?

そんな感じだろうとは思っても、なかなか思い通りにならんのやけど。

 

んで、このテーマを選ぶのも種類が多すぎて悩んだ。

その中から、時間をかけて選んだのが、デザイン性の高いテーマ。

既にほぼ完成しとるやん!

カスタマイズする必要ある?

 

いや、やっぱり色とかは変えたいやん。

というワケで、ZENO-TEALってテーマをインストールしてみた。

カスタマイズって言うても色を変えたりするくらいならインターネッツで検索したら情報は沢山あってCSSとか言うプログラム的なものをコピペすれば簡単に出来るらしい。

 

zeno-teal.hatenablog.com

 

 

実際に色を変える程度なら簡単に出来た!

でも、自分のブログを確認して思ったのは、重たすぎる・・・。

調べてみたらテーマによって読み込む速度に違いがあるらしい。

やっぱ、デザイン性重視だと重たくなる傾向でシンプルなものは速いみたい。

 

( ゙゚'ω゚') モマママ…マジで!?

 

はい。テーマ変更しまーす!

速そうでシンプル路線の「Brooklyn」に変えちゃいました。

 

www.notitle-weblog.com

 

 

シンプルなデザインであるが故に

 

シンプルだと主張が少なくて、他のブログと同じように見えると言う・・。

こりゃ色を変えるだけじゃ満足出来んぞ。

そう思い始めた。

 

最初にテーマを導入した時点では、ホントに寂しい感じ。

グローバルナビゲーションも無いから自分で設置せなあかんかった。

CSSのコピペで出来たから簡単やったけどw

 

でも欲が出てアレもコレもカスタマイズで何とかしたくなってきた。

あまり無理しない程度だったら何とかなる筈。

とにかく自分好みなデザインに。

 

Brooklynってテーマは人気があって、カスタマイズ方法の情報も多い。

何が出来るのか?ってとこからスタートやったけど、そんな出来んの?って感じで、魅力的なカスタマイズもあるんだわ。

 

そして奮闘する事に。

 

 

Brooklynをカスタマイズ

 

かなりの不安を抱えたままカスタマイズに挑戦。

大きな変更するくらいならテーマを変えた方が良いと思うし、簡単に済ませようと思う。

 

 

頑張ってカスタマイズした内容

 

変更したいコト言うても、グローバルメニューを付けて色変えるくらいに考えてた。

それだけでも初心者にしたら、かなり大変やん?

 

しかも、やってくうちに変更したい部分は増えてくんだわ。

 

んで、結局のところ色々やってみたワケ。

 

カスタマイズ内容
  • グローバルメニューの設置
  • グローバルメニューの設置
  • グローバルメニューの色を変更
  • お問い合わせフォームの設置
  • サイドバー見出しの色変更
  • 記事タイトルの装飾
  • 見出しの装飾とh2見出しの追加
  • ソーシャルボタンの設置
  • 上へ戻るボタンの設置
  • フォントの変更
  • カテゴリーラベルの色分け

 

箇条書きにして思ったけど、結構頑張ってるやん。

自分で自分を褒めてあげたい!

  

 

カスタマイズは、CSSとかHTML?とかを、あーしたり、こーしたりするんが基本らしい。

でも初心者にはチンプンカンプン。

 

( ̄◇ ̄;)

 

そこで初心者が出来るレベルのコピペを活用。

但し、コピペしたところを変え過ぎると地獄をみるかも。

 

 

グローバルメニューの設置

 

グローバルメニュー無いよりは、あった方がええかなって思って設置してみた。

カテゴリー少ないからショボいけど。

 

Brooklynのページ親切に設置方法が書いてあった。

そこにあるソースコードをデザインCSSにコピペして、メニューに並べる名前とアドレスを入力するだけ。

 

簡単。

 

 

グローバルメニューの色を変更

 

Brooklynのデフォルト状態は、グローバルメニューが黒いバックに白文字。

なんかちゃうねん。

って事で、色を変更。

 

 

次項のサイドバー見出しの色変更と併せて参考サイトのソースコードをコピペして色のコードだけ好みの色のコードに変更。

 

www.godaiblog.com

 

こちらを参考にコードをコピペして色の部分を変更。

 

 

サイドバー見出しの色変更

 

グローバルメニューの色を変えたら、サイドバーの色との違いで統一性がなくなってしもた。

サイドバーだけ黒やねんもん。

 

だから、サイドバーの見出しも色を変える事に。

 

flowcare.hatenablog.com

 

こちらの記事を参考に、グローバルメニューと同様に色を変更。

 

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

 

これは、面倒な作業やったで。

だって、コピペちゃうやん。

コピペに慣れた身には、大変やったわ。

 

お問い合わせフォームは必要か?

と言われたら、どうかはわからんけど、アドセンスに申請したりするなら必要らしい。

どっちにしろグローバルメニューが寂しいし、気になるから設置に挑戦したった。

 

フォームは、Googleフォームを使用。

 

 

www.uxirisu.tokyo

 

初心者にも分かり易く説明されてるサイトがあって助かった。

手順通りにやれば問題無いはず。

 

 

記事タイトルの装飾

 

かなり良い雰囲気になってきたけど、なんか足らん気がする。

特に記事一覧のトップページ。

トップページの需要があるのかは、わからんけど、気になったら放っておけん。

 

色々調べた結果、記事のタイトルを装飾すれば見栄えが良い気がした。 

そこで、記事タイトルに二重線を付けたった。

 

saruwakakun.com

 

 

見出しの装飾とh2見出しの追加

 

あとは、記事の見出しも統一性を持たせたい。

んで、インターネッツで調べてたんやけど、はてなブログの見出しは、大見出しがh3ってやつらしい。

 

h3   !?(・_・;?

 

よくわからんが、それだとSEO的に不利だとか。

 

SEO  !?(・_・;?

 

よーわからんけど、なんか不利とか書かれてたら、嫌やわ。

なんか対策せなあかんのちゃうん?

 

そう考えて調べましたよ。

h3をh2へ変換するコードを使えばええらしい。

ちゅーワケで、見出しの装飾と併せて実施。

 

見出しの装飾は、この記事を参考に好きなデザインをコピペ。

 

www.notitle-weblog.com

 

あれ? でも変わらんやんけー!

 

(#゚Д゚)ゴルァ!!

 

 

どうも、デフォルトの設定を一度リセットせなあかんみたい。

さっきの記事に書いてあるリセットするコードをコピペしたら解決した。

 

サ-センwww

 

あとは、この記事を参考にh3をh2に変換したった。

 

www.momotarou-nikko.com

 

 

ソーシャルボタンの設置

 

ソーシャルボタンを設定すんのは、ええんやけど、カウントされるヤツが多くね?

訪問者少ないのに、そんなん恥ずいやん。

 

だから、カウント無いやつを設定ですわ。

 

blog.kaerucloud.com

 

 

上へ戻るボタンの設置

 

ブログの記事を読み終わって記事の先頭に戻りたい時とかあるやん?

そんな時に親切に戻るボタン付いてるサイトを発見!

めっちゃ羨ましい!

欲しー!ってなるやん?

 

これまた得意のコピペで設置。

何箇所かにコピペせなあかんから面倒やけど、頑張ってみた。

 

www.travelbanana.net

 

 

 フォントの変更

 

はてなブログのデフォルトのフォントサイズは使うテーマで違うんやね。

このBrooklynだとデフォルトで16px。

一般的には、16pxだと丁度良いくらいって基準やと思うけど、他のWordPressで作成されたサイトとか閲覧してると、もっと大きめの文字が良い気がして・・。

 

(;゚∀゚)

 

フォントのサイズを17pxへ変更。

フォントは、WordPressで多く使われてるメイリオ優先にしてみた。

 

www.wankorokun.com

 

こちらのサイトを参考にコードをコピペするだけ。

分かりやすくて、初心者でも簡単だった。

 

 

カテゴリーラベル の色分け

 

そして気になったのが、カテゴリーラベル 。

カテゴリーを複数に分けても、全部同じグレーで表示される。

WordPressで運営してるサイトってカテゴリーによって色が違うのが多いやん?

あんな風に出来へんのかいな?って調べてみたよ。

 

出来る!

 

blog.z0i.net

 

探せば、あるもんやね。

こちらおサイトを参考にコピペして好きな色に変更。

カテゴリーが増えると面倒やけど、分かりやすくなったと思う。

 

 

まとめ

 

ブログのカスタマイズは疲れる。

大きく変更するくらいならテーマを変えた方が労力もかからん。

 

因みにトップページの記事一覧をカード型にするなんて事も出来るらしい。

でも、きっとページの読み込みは遅くなると思ってしてない。

 

敢えてソースコードは記載してないので、参考サイトで確認してみてー。

 

初心者が出来る範囲でしかやってないけど、らしくなったと自己満足なのである。

気になる人は、やってみよー。