「Vtuberの雑学メモ帳」

注目ゲームの攻略記事＆VTuber関係の記事をまとめる趣味100％の雑記ブログ。※少年Vtuber「不断シエル」と姉が運営しています。

トップ > Vtuber > 【はてなブログ魔改造】知識ゼロ人間がコピペでブログをカスタムしてみた【カスタマイズ方法解説】

【はてなブログ魔改造】知識ゼロ人間がコピペでブログをカスタムしてみた【カスタマイズ方法解説】

Vtuber Vtuber-技術部


最近ブログのデザインを一新してみたんだけど、初心者でも色々な呪文をコピペするだけでびっくりするほど見やすくできたから感動したぜ…！
今日は、この感動を他の人と共有したくて解説記事を書いてみることにした。

早速、はてなブログで人気第2位のテーマ「Brooklyn」向けのカスタム方法を説明するぞ！

  • ちなみに [サンプルエントリー - Brooklyn]のデフォルト状態からこのブログみたいな学習ノート風デザインに改装するまで、1日あれば十分だった。

(※ガチ初心者でもちゃんと参考リンクを読めば簡単に実装できるはず！レッツ挑戦！)

本文は↓[続きを読む]から読んでくれ。

 

 ◆基本の必須カスタム

 

【グローバルメニューの追加】

参考→[https://www.notitle-weblog.com/brooklyn]

グローバルメニューとはタイトル名の下に表示されるカテゴリメニューのことだ。

とても簡単に設置できるので参考リンクを見ながらカスタムしてみよう！

一番目立つところにカテゴリメニューが置いてあると、ついつい他の記事も読みたくなるよな！
実装しないのはかなり損なので今すぐ実装した方が良いぞ。

 

【カテゴリーを見やすくする】

参考→[https://blog.wackwack.net/entry/2016/09/22/185558]

グローバルメニューを活かすため、カテゴリーの階層化(ツリー化)もやっておこう。


1つのカテゴリーから複数のカテゴリーに分岐させるためには、先に「パンくずリスト(カテゴリーの順序関係)」を決める必要があるぜ！

  1. 【例】カテゴリに(1)「ブルプロ」、(2)「ブルプロ-CBT」という2つのカテゴリを追加しておく。
  2. 書き終わった記事のカテゴリ選択時に(1)→(2)の順でカテゴリを指定すると「パンくずリスト」が作成される。

記事ごとにしっかりパンくずリストを設定すると、サイドバー*1内で複数のカテゴリーを入れ子表示にできるぞ。

カテゴリとグローバルメニューをリンクさせる時は、階層の一番上にあるカテゴリ(上の例なら「ブルプロ」)のURLをリンク先に選べばOK！

 

【目次＆箇条書きの装飾アレンジ】

参考→[https://www.hs-note.com/entry/blog-customize8]
ここで紹介されているコードをコピペすれば、目次＆箇条書きのデザインが派手になる。

↓目次アレンジ例↓

デフォルトのデザインより参考書っぽくて見やすいよな！

↓箇条書きアレンジ例↓

  • 目次枠の色→#ffb6c2(ピンク)
  • 目次背景色→#fff2fc(薄いピンク)
  • 導入タイトル＝目次タイトルの色→#ff5063(濃いピンク)

※細かい部分の色の変更方法は上記参考リンクの最後の方にちゃんと書いてあるぜ。
ちなみに、箇条書きを囲う枠の色はデフォルト＝#ffb03f(オレンジ色)のままだ。

 

また、俺のように目次枠の角を丸めたい場合は、[～/*文の行高*/]の後にborder-radius: 12px;を追記するだけでOK！
(目次以外でも、枠を丸めたい時は同じ呪文を貼っておけば丸くなるぞ！)

 

【「見出し」を丸っぽい四角枠に変更＆色チェンジ】

参考→[https://www.tsubasa-note.blog/entry/heading-design-customize/]

  1. 参考記事を見ながらデフォルトの吹き出し表示をリセットするための部分をコピペしよう。
    (変更後のデザインが崩れるのを避けるために一応やった方が安心)
  2. 好きなデザインの下にあるCSSをコピーし、はてなブログのCSS欄に貼り付けよう。

※俺の場合、h3(大見出し)には[見出しカスタマイズ9]を選び、h4(中見出し)には[見出しカスタマイズ6]を選んでいる。


コピペした後、[back-ground-corol]が含まれる行の後に「border-radius: 12px;」を追記すれば見出しの枠が丸くなるぞ！

 

コピペしてきた見出しの線色を変えたい時は、border-color: #50c6ee;など#〇〇〇の部分を好きにいじれば色が反映される。

  • 色選びに迷ったら#50c6ee(ポップな水色)にすると良いんじゃないかな。

 

【レスポンシブデザインの有効化を忘れずに！】

俺と同じようなカスタムがしたい人は、必ずブログ管理画面＞[デザイン]からスマートフォンアイコンを選び、[詳細設定項目]の中の[レスポンシブデザイン]にチェックを入れておこう！

 

このレスポンシブデザインにチェックを入れれば、目次や見出しのカスタマイズがスマホでの閲覧時にも反映されるので超見やすくなるぞ！

 

◆地味に効果が大きいブログカスタム

 

【サイドバーカスタム(項目の表示パネルを長方形に)】

参考→[https://www.hiromaki.net/entry/brooklyn-customize]

サイドバーのカスタムは、上記リンクの「独自プロフィールの追加」の後にある「スタイルシート」項目をCSS欄にコピペすればOKだ。

サイドバー項目の背景色は[background-color]の後のカラーコードを変えると変わる。

地味な差だけどデフォルトの吹き出し型よりは長方形の方がスッキリして見やすいぜ。

 

【「記事作成日時(日付)」パネルの背景色を変える】

参考→[http://darie-daphnia.hatenablog.com/entry/2016/02/20/173822]

サイドバーのパネルの色を変更したら、ついでに更新日時の色も変更してしまおう。
上記の参考リンクを見ればすぐにカラーチェンジできるはずだ。

 

【タイトルとタイトル下の説明文をカスタマイズ】

・文字中央寄せ→[【はてなブログ】当ブログに適用したカスタマイズのまとめ【Brooklyn】 - ジョー・ヒタギの止リ木 | 「ものづくり」や「ものなおし」をするブログ]
・文字色変更→[ブログタイトルと説明の文字色を変更する - MonoTsuduriテーマ]
・背景色変更→[https://www.gipsyjazznyumon.com/life/blog-title-customize#i-2]


俺はタイトルと説明文の背景色を統一して、記事上部のパンくずリスト(カテゴリ)が目立つようにした。

  • タイトル背景色を#50c6ee(水色)に、文字色を#fff(白)に変えてみたぞ。

 

【サイドバーに記事ごとの目次リストを追尾表示】

コピペ→[https://gist.github.com/Twilyze/30809fa76691983312dced621eb1040a#file-changelog-md]


この機能を実装すると、記事を下に読んでいった時に、記事の目次が画面横に付いてきてくれるようになる。
PCで記事を読む時にめちゃめちゃ便利なうえ実装も超簡単なのでオススメだ！

  • この機能を追加する場所はサイドバーの一番下が良いと思うぞ。

懸念点はヘッダーに長いコードを貼る分ちょっと表示が遅くなるかもしれないということくらい。

 

【蛍光ペン風アンダーラインを実装】

参考→[https://randamlife.hatenablog.com/entry/2019/03/19/194108]


参考リンクのCSSをコピペすると、蛍光ペンで書いたようなアンダーラインが使えるようになる。

  1. デザインCSSをはてなのCSS欄にコピペする。
  2. 普段通り[編集(見たまま)]モードで好きな文章を書く。
  3. [HTML編集]モードに切り替え、<u>好きな文章</u>という形式に編集する。
    ※つまり、文章の前後に<u>～</u>を追加するだけでOK。

 

【YouTubeアカウントをプロフィール欄に設定する】

参考→[https://www.kissaten-no-heya.com/2017/02/youtube-2.html]

ブログの他にYouTubeをやっている人は、YouTubeのチャンネル登録ボタンをサイドバーに置くのがオススメだ！

上記リンクのCSSをコピペしプロフィール欄に貼り付けるだけでこのブログみたいな表示にできるぞ。

(特にYouTuberやVTuberではてなブログも書いてるような人には便利だよな！)

  • 俺ははてな側のプロフィール画像をOFFにして、コピペした文末のあとに<br>をつけて改行させてからプロフィール文を書いている。

 

【スクロール時に「上へ戻る」ボタンを追加する】

参考→[https://affiliate-couple.hatenablog.com/entry/returntop]

このリンクが一番分かりやすいのでオススメ！

PCはもちろんスマホで閲覧した時にも「上へ戻る」ボタンが使えて便利だ。

はてなブログだと記事のカテゴリツリーがページ最上部に表示されるから、「上に戻る」ボタンは絶対につけた方が良い。

 

【プロフィール画像を大きく表示し、角を丸くする】

参考Ａ→[https://buono-buono.net/37]
参考Ｂ→[【はてなブログ】写真や画像のカドを丸くして表示する方法！ - 黒木ノ水岩]


※デフォルトのプロフィール画像はサイドバー設定から無効にしておこう！

今回は正方形の画像をプロフィール画像に使ったので、Ｂを参考にして角を丸めてみたぞ。

  • シンプルな画像にしたかったからbox-shadow: ～の影を作る1行は消した。

 

【再生ボタン付きGIF画像を掲載する】

参考→[https://www.yuru-ppo.xyz/entry/2018/11/20/212011]
参考記事の内容通りにカスタマイズすれば、以下の手順で再生ボタン付きのGIFを貼り付け可能。

  1. ゲームの録画ファイルをAviutlで編集して[デフォルト]出力からmp4作成。
  2. ブラウザ上で使える【→動画GIF化】などを利用してmp4から数秒のGIF画像を作成。
    (サイズ＝縦320×横180、開始時間＝0、長さ＝mp4の最大秒数、FPS＝10で設定)
  3. 作成したGIFを普通の画像のように「写真を投稿」欄からアップロード。
  4. 記事内(GIFを挿入したい部分)にアップロードした画像を貼りつける。
  5. [HTML編集]タブからGIFの画像アドレス(https～.gif)の部分を探してコピー。
  6. <img data-gifffer="" />の「"」と「"」の間に5でコピーした部分を貼る。
  7. 4の画像アドレスを削除し、6で作ったアドレスに置き換える。

これでブログ内に再生/停止ボタン付きのGIFが貼り付けられるはず。
少し面倒だけど、ゲーム攻略記事を書く時にとても便利なので重宝している機能だぜ！

 

【Twitchの配信画面をサイドバーに埋め込む】

参考→[https://jgr8620.hatenablog.com/entry/2020/10/14/221114]

ネット上の情報が古くてなかなか埋めこめなかったんだけど、この記事のおかげでようやく埋めこめたぜ(2020.11.9)！
(俺くらいの規模でもブログに配信欄を埋めこんだら視聴数が一気に増えてびっくりしたので、ブログを持っている人はとりあえず埋め込んでみると良いかも？)

 

【はてなブログの記事を画像ごとバックアップする】

参考→[https://www.rejanaq.com/entry/2018/11/04/231424]

上記の記事の通りにやっていけば文章＋画像を全てバックアップできる。
念のため、半年～1年に1度はバックアップしておくと安心だ。

*1:画面右の縦長い部分