このブログの「kajōgaki | 社会人の学びのNote」のはてなブログのデザインテーマ「Brooklyn」のカスタムについて自分のイメージ通りにカスタムが終了したので、ここで備忘録を作成しておきたいと思います。
HTMLやCSSなど全然わからない素人が調べてコピペで完成させています。
ですので、プロの方がみると、いやいや、ここはこうした方が良いでしょなど思われるかと思いますが、HTMLやCSSなど全然わからない素人が検索力だけで行っているのでご了承ください。
「kajōgaki | 社会人の学びのNote」の行ったカスタム備忘録
読者さんへの前置きメッセージ
本記事では『はてなブログのデザインテーマ「Brooklyn」を使ってこれからカスタムしようかな』という方に向けて書いています。
この記事を読むことで、「記事の中でやりたいカスタムがあれば、コピペだけでできるカスタム」ができると思います。
最後の方にテーマ以外で記事中のカスタマイズも記載してます。
※無料版ですと体裁が崩れる可能性もあるので必ずバックアップを取ってからお願い致します。
はてなブロガー様は是非、読者登録をお願いします。
この記事は自分の備忘録的な要素が高いので、「はてなブログデザインテーマ「Brooklyn」のカスタムギャラリー」を作成しましたので、そちらをご覧頂いた方が、みやすいかも知れません。
この記事を書いた以降のカスタムはこちらのギャラリーにクリップしていってます。
目次
- はてなブログのデザインテーマ「Brooklyn」のカスタム備忘録
- デザインテーマ「Brooklyn」
- TOPページを記事一覧化
- スマホTOP画面を記事を減らす
- ブログのヘッダとフッタを非表示（有料プラン）
- 広告の非表示（有料プラン）
- グローバルナビの設置（はてなPro向け）
- シェアボタンをモノトーンに変更
- パソコンとスマホで別々のヘッダ画像に
- 「上に戻る」ボタンを追加
- ブログ目次カスタマイズ
- 記事一覧をふわっとさせる
- グローバルメニューにアイコンを追加
- サイドバーのプロフィールのカスタマイズ
- バナーのセンタリング
- トップページ記事一覧をカード型(1列)にカスタマイズ
- トップページの読み込みが遅くなった
- 「この記事は〇分で読めます」自動追加
- リライト日付自動表示
- 「URLと記事タイトル」をコピーする、追従するボタンを設置
- 記事ページのフォントサイズを変更
- タイトル文字サイズを変更
- 記事中のカスタム
- この記事まとめ
はてなブログのデザインテーマ「Brooklyn」のカスタム備忘録
現在ははてなブログ有料版を利用しているので、記事内の内容で無料版ですと体裁が崩れたりする可能性もあるのでご注意ください。
また、試す場合は必ずバックアップを取ってから行うようにご注意ください。
また、カスタムを行う場合はご自身の責任においてお願い致します。何かあっても責任は負えませんのでご了承ください。
はてなブログ ヘルプ：「記事データをエクスポート（バックアップ）する」
1.デザインテーマ「Brooklyn」
はてなブログを開設した時、デザインテーマを探す時にシンプルなテーマでモノトーンが良いなと思っていたので、デザインテーマ「Brooklyn」に一目ぼれして使わせて頂く事としました。
デザインテーマ「Brooklyn」を作成して頂いた、SHIROMAG様の「Brooklyn」のページはこちらになります。
「はてなブログの超便利なデザインテーマ「Brooklyn」を作りました」
素敵なテーマを作成頂き感謝です。
2.TOPページを記事一覧化
●TOPページを自動的に記事一覧のアーカイブページに飛ばす方法
開設した当初は無料でいじっていたので、TOPページを記事一覧にしたかったので行ってましたが、Google AdSenseの申請前に有料としたので、現在はコードは削除してこのカスタムは利用してません。
参考にさせて頂いた記事は、ことり日和様の「はてなブログ無料版でトップページのカスタマイズ・記事一覧で見やすく」です。
① レスポンシブデザインなのかを確認
デザイン
スマ－トフォン
詳細設定
レスポンシブデザインに ☑
② ダッシュボード内にコードを貼付け
設定
詳細設定の中のheadの要素を追加にコードを貼り付け
→詳細設定の中の一番下の変更するボタンを押し変更
● コードの自分のURLの所は自分のブログのURLに変更
● コードの自分のブログ名の所は自分のブログのURLに変更
3.スマホTOP画面を記事を減らす
スマホTOPページの表示記記事数を設定する方法
スマホでのTOP画面にずらっと記事が並ぶのを防ぎたかったので、表示する記事数を決めれるように変更。
スマホTOPページでは5記事に表示されるように変更。
参考にさせて頂いた記事は、ことり日和様の「はてなブログ無料版でトップページのカスタマイズ・記事一覧で見やすく」です。
① コード貼付けの場所
ダッシュボード
デザイン
カスタマイズ
フッタ
②フッタにコードを貼付け
③変更を保存する
コードのここに1回あたりの表示記事数を設定の所は表示したい記事数の数字に変更
4.ブログのヘッダとフッタを非表示（有料プラン）
このカスタマイズは有料プランで可能と無ります。
せっかく有料プランにしたので、ヘッダとフッタを好みにカスタマイズしようと行いました。
●「記事を書く」などのメニューやHatena Blogロゴ、Hatenaロゴなどの非表示
● はてなIDとサービス名の非表示
参考にさせて頂いた記事は、はてなブログ開発ブログ様の「「ブログのヘッダとフッタを非表示にできるようにしました（有料プラン）」」です。
ブログ設定画面の「詳細設定」からヘッダ・フッタを非表示
設定
詳細設定
ヘッダとフッタ（PC版）
ブログにヘッダを表示しないに ☑
ブログにフッタを表示しないに ☑
5.広告の非表示（有料プラン）
せっかく有料プランにしたので、そのうちGoogle AdSenseを申請しようと思っていたので広告を非表示に
ブログ設定画面の「詳細設定」からヘッダ・フッタを非表示
設定
詳細設定
広告を表示しないに ☑
6.グローバルナビの設置（はてなPro向け）
「Brooklyn」にグローバルナビを設定する方法
参考にさせて頂いた記事は、SHIROMAG様の「はてなブログの超便利なデザインテーマ「Brooklyn」を作りました」です。
SHIROMAG様の「はてなブログの超便利なデザインテーマ「Brooklyn」を作りました」ページには一般ユーザー向け(無料プラン)のコードも記載されています。
① ヘッダのタイトル下欄にコードを貼付け
デザイン
カスタマイズ
ヘッダ
タイトル下
Brooklynのグローバルナビをドロップダウンにする方法
参考にさせて頂いた記事は、SHIROMAG様の「Brooklynのグローバルナビをドロップダウンにする方法」です。
グローバルナビをドロップダウン式にしたかったので、こちらのドロップダウン式を取り入れさせて頂くことに。
● コードのここにリンク先のURLの所はリンクさせたい先ののURLに変更
● コードの項目の所はドロップダウンに記載する項目の名前に変更
● コードの項目（サブ）の所はドロップダウン項目からのサブ項目に記載する項目の名前に変更
7.シェアボタンをモノトーンに変更
折角のモノトーンでしたので、シェアボタンもモノトーンにしたかったので、使わせて頂きました。
参考にさせて頂いた記事は、SHIROMAG様の「はてなブログの超便利なデザインテーマ「Brooklyn」を作りました」です。
① 記事上と記事下にコードを貼付け
デザイン
カスタマイズ
記事上
記事下
記事下か記事上、もしくは両方にコピペ
記事上にシェアボタンを付けたい場合は記事上欄に貼付け
記事下にシェアボタンを付けたい場合は記事下欄に貼付け
記事上下にシェアボタンを付けたい場合は記事上と記事下欄に貼付け
記事下にコピペ
上のコードの下に次のコードを貼付け。
このコードは記事下に貼っていれば、記事上には貼らなくてOKとの事です。
始めに紹介したグローバルナビ（Pro向けの方）を入れる場合
のコードはすでに記述されているのでここのコードからは消して下さいとの記載がされてましたので削除。
SHIROMAG様の「はてなブログの超便利なデザインテーマ「Brooklyn」を作りました」記事内で、「消さなくても動きますが、消さないとページの読み込みが遅くなってしまいます。」と書かれてました。
Twitterボタンが動かなかったので
Twitterボタンが動かなかったので、検索して調べて訂正。※上記コードは訂正してないコードです。
参考にさせて頂いた記事は、星空と虹の橋のあしあと様の「カスタマイズしたツイートボタンが、ブラウザによって動作しない場合の解決法」です。
① 「text={Title}」を「text={URLEncodedTitle}」へと変更
8.パソコンとスマホで別々のヘッダ画像に
パソコンは横長、スマホは縦長の画像にしたかったので、利用させて頂くことに。
スマホとPCのヘッダ画像を変える方法
参考にさせて頂いた記事は、そららのクリエイティブログ様の「ヘッダ画像をパソコンとスマホで別々にする方法【はてなブログ」です。
① 事前作業
利用するヘッダ画像は「はてなフォトライフ」にアップロードして、画像アドレス（URL）をコピーして控えておく。
② コードの貼付け
デザイン
カスタマイズ
ヘッダ
タイトル下にj貼付け/p>
● コードのここに画像URLを入れるの所は「はてなフォトライフ」にアップロードした画像アドレス（URL）に変更
● PC版とスマホ版がごっちゃにならないように注意
③ 続いてCSSのコードの貼付け
② コードの貼付けと同じ場所に貼付け
デザイン
カスタマイズ
ヘッダ
タイトル下にj貼付け/p>
9.「上に戻る」ボタンを追加
単純に上に戻るボタンが欲しかったで探して追加しました。
はてなブログに「上に戻る」ボタンを追加する方法
参考にさせて頂いた記事は、パソコンガイド様の「はてなブログに「上に戻る」ボタンをコピペで簡単に設置する方法」です。
① head内にコードを貼付け
ダッシュボード
設定
詳細設定
headにコードを貼付け/p>
① フッタ内にコードを貼付け
ダッシュボード
デザイン
カスタマイズ
フッタにコードを貼付け/p>
① デザインCSS内にコードを貼付け
ダッシュボード
デザイン
カスタマイズ
CSS内にコードを貼付け/p>
ボタンの色を変える方法
好みのボタンの色にボタンの色を変える方法は、上で紹介したCSSのカラーコードを変更します。
「変更箇所」ボタンが常に見えている時の色が書かれているコード
「変更箇所」カーソルがボタンの上にある時の色が書かれているコード
いつもカラーコードを調べる時は「ホームページ 作成、運営管理ガイド カラーコード一覧表」を利用させて頂いています。
10.ブログ目次カスタマイズ
目次をカスタマイズしたいと思っていて検索していた時にたまたま見つけたノートの目次に一目ぼれして使わせて頂くことにしました。
表示・非常時の目次タイプが多いような気がしていた時に変わった目次が良いなと思っていたのと、ブログコンセプトにもピッタリだったので感謝です。
参考にさせて頂いた記事は、フジブロっ！様の「はてなブログ目次カスタマイズ-コピペで使えるデザイン集」です。
11.記事一覧をふわっとさせる
上記の目次を発見した際に同じフジブロっ！様の記事で「記事一覧を”ふわっ”とさせるカスタマイズ」を発見して、面白いと思い使わせて頂くことに。
記事一覧のアイキャッチ画像がマウスオーバーでフワッするモーションが実現できます。
① デザインCSS内にコードを貼付け
ダッシュボード
デザイン
カスタマイズ
CSS内にコードを貼付け/p>
12.グローバルメニューにアイコンを追加
グローバルメニューが少し寂しかったので、アイコンを追加することに。
参考にさせて頂いた記事は、redoブログ様の「【ブログカスタマイズ】「はてなブログ」のアイコンフォントの種類・使い方を解説｜グローバルメニューにおすすめ」です。
① グローバルメニューのコード内の項目の名前にアイコンコードを追加
デザイン
●コードのクラス名の所ははてなブログアイコンフォントのクラス名に変更
グローバルメニューにアイコンの調整
グローバルメニューにアイコンを追加してみたらアイコンと文字の幅が重なる感じに…。
幅を調整して整える事に。
参考にさせて頂いた記事は、７ログ！様の「CSS初心者が、はてなブログ『Brooklyn』をカスタマイズしました」です。
① デザインCSS内にコードを貼付け
ダッシュボード
デザイン
カスタマイズ
CSS内にコードを貼付け/p>
13.サイドバーのプロフィールのカスタマイズ
そんなに気にしていなかったサイドバーのプロフィール欄ですが、たまたま何かを検索している時に神的なものを発見したので使わせて頂くことにしました。
参考にさせて頂いた記事は、フジブロっ！様の「はてなブログ-プロフィールをおしゃれにカスタマイズするデザイン１０選」です。
フジブロっ！様の「はてなブログ-プロフィールをおしゃれにカスタマイズするデザイン１０選」記事内で自分で好みに選択しながら作成でき自動でコードが作成される神ワザです。
プロフィール欄フォローボタンのカスタマイズ
フジブロっ！様の記事で、プロフィール欄フォローボタンも好みにカスタマイズできたので使わせて頂くことにしました。
参考にさせて頂いた記事は、フジブロっ！様の「はてなブログ-フォローボタンのカスタマイズ【Twitter、Pinterest、YouTubeにも対応】」です。
上手くモノトーンに合う形になり満足です。
14.バナーのセンタリング
バナー設置で配置が寄ってしまったので、センター寄せしたく検索することに。
参考にさせて頂いた記事は、エンティ’ｓ Life様の「《ブログ運営》バナー広告を中央揃えさせる方法【COCOON】」です。
① HTMLで広告コードを囲む
15.トップページ記事一覧をカード型(1列)にカスタマイズ
当初はトップページを記事一覧に飛ばして記事一覧にしてましたが、サイドバーの長さと合わないので気になっていたので、カード型(1列)に変更することに。
参考にさせて頂いた記事は、zero-point-five様の「【はてなブログ】トップページ記事一覧をカード型（１列）に変更する方法」です。
① デザインのタイトル下にコードを貼付け
デザイン
カスタマイズ
ヘッダ下
タイトル下にコードを貼付け/p>
② デザインCSSにコードを貼付け
デザイン
カスタマイズ
デザインCSSにコードを貼付け
16.トップページの読み込みが遅くなった
トップページ記事一覧をカード型(1列)にカスタマイズした所、記事のアイキャッチ画像のせいなのか表示速度が落ちた気がしたので、取り敢えず表示されてるブログのアイキャッチ画像を圧縮してサイズを落とすことに。
ブログの表示速度は、「PageSpeed Insights - Google Developers」で調べてみました。
画像圧縮に使わせて頂いているサイト「Optimizilla」
「画質を保ったままに、JPEGやPNGイメージを最小サイズに圧縮する賢いツール」との記載通り画質が保たれてます。
17.「この記事は〇分で読めます」自動追加
記事の文字数に応じて、”この記事は何分で読めます”という表示をHTMLを使って自動で設定する方法
参考にさせて頂いた記事は、redoブログ様の「【ブログカスタマイズ】はてなブログで「この記事は〇分で読めます」の簡単コード実装方法を紹介！」です。
① レスポンシブデザインなのかを確認
デザイン
記事
記事上にコードを貼付け
● コードの”var wpm”の所は数値(600)を変更すれば1分間に読む時間が変更可能
● コードの”font-size”の所は80%を変更すればフォントサイズが変更可能
● コードの"color"の所は#999999を変更すれば色の変更が可能
18.リライト日付自動表示
記事更新した時に自動で日付が表示される方法
参考にさせて頂いた記事は、Brooklynカスタマイズ様の「【はてなブログ・Brooklyn】記事の更新日を表示させるカスタマイズ」です。
① デザインカスタマイズ記事下にコードを貼付け
デザイン
カスタマイズ
記事下にコード貼付け
② CSSにコードを貼付け
デザイン
カスタマイズ
デザインCSSにコード貼付け
19.「URLと記事タイトル」をコピーする、追従するボタンを設置
「URLと記事タイトル」をコピーするボタンの設置方法
参考にさせて頂いた記事は、はんこキャプターやぁのん様の「「URLと記事タイトル」をコピーする、追従するボタンを設置」です。
① デザインカスタマイズ記事下にコードを貼付け
設定
詳細設定
headに要素を追加にコード貼付け
アイコン用フォント「Font Awesome」は既に記載があれば不要。
② デザインカスタマイズ記事上又は記事下にコードを貼付け
デザイン
カスタマイズ
記事下又は記事上にコード貼付け
③ デザインCSSにコードを貼付け
デザイン
カスタマイズ
デザインCSSにコード貼付け
● ボタンの高さ合わなかったので、はんこキャプターやぁのん様の記事より高さを変更。
● 配置も低かったので、はんこキャプターやぁのん様の記事より画面下からの位置部分を変更。
20.記事ページのフォントサイズを変更
参考にさせて頂いた記事は、BE A SLOWLIFE様の「【はてな】レスポンシブデザインでスマホ・PCの文字サイズを個別設定する方法」です。
① デザインカスタマイズ記事下にコードを貼付け
デザイン
カスタマイズ
デザインCSSにコード貼付け
21.タイトル文字サイズを変更
参考にさせて頂いた記事は、BE A SLOWLIFE様の「【はてな】レスポンシブデザインでスマホ・PCの文字サイズを個別設定する方法」です。
① デザインカスタマイズ記事下にコードを貼付け
デザイン
カスタマイズ
デザインCSSにコード貼付け
記事中のカスタム
記事中には主に囲み文字と蛍光ペンマーキングを利用してます。
参考にさせて頂いているサイトは、サルワカ様の「【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30」です。
1.囲み文字
① 使いたいCSSのコードを貼付け
デザイン
カスタマイズ
デザインCSSにコードを貼付け
② 記事の挿入したい部分にHTMLを貼付け
コードのカラーコードの所は自分のブログの好みにに変更
参考例
線の色：「border: solid 2px #FFC107;」の「#FFC107」部分
上部のボックス部分：.box-title
背景の色：「background: #FFC107;」の「#FFC107」部分
文字の色：「color: #ffffff;」の「#ffffff」部分
参考にさせて頂いているサイトは、サルワカ様の「【CSS】文字に色々なデザインの下線を引く（点線・波線・二重線・蛍光ペン風など）」です。
① HTMLに直接書く（インライン）
いつもカラーコードを調べる時は「ホームページ 作成、運営管理ガイド カラーコード一覧表」を利用させて頂いています。
2.記事中にアイコンフォントを利用
参考にさせて頂いた記事は、redoブログ様の「【ブログカスタマイズ】Font Awesomeのアイコンフォントが表示されない？｜「はてなブログ」に対応させる方法を紹介！」です。
① 「はてなブログ」での記述方法
3.ブログ記事の検索ワード
いつも利用させて頂いているサイトは、ラッコキーワード様の「無料のキーワードリサーチラッコキーワード」です。
4.アイキャッチ画像の無料素材
いつも利用させて頂いているサイトは、pixabay様の「高品質なフリー画像素材」です。
この記事まとめ
今回は、「kajōgaki | 社会人の学びのNote」のブログページをつくり始めて、カスタマイズが自分の好みのカスタマイズにひと段落しましたので、これまで行ってきたカスタマイズの備忘録として記事に残させて頂きました。
HTMLやCSSなどが分からない自分でも、自分で興味を持って一生懸命調べて挑戦してみたら、そこそこ頑張れたかなと思います。
ブログを開設すると、自分が愛着を持てるブログになる思いますので、はてなブログで始めたばかりなどの方は、色々挑戦してみたら良いかと思います。
その際は、くれぐれもバックアップを忘れずに！
このブログなどについて
社会人に学びが必要な具体的理由の記事を『社会人に学びが必要な具体的理由 | 将来不安を解決するのは学び時間を自己投資』で書かせて頂いておりますので、ご興味ございましたら、ご覧頂けたら幸いです。
このブログ「kajōgaki | 社会人の学びのNote」は、忙しい日々でも、1日5分以内で読めるように、1記事を2,000文字から3,000文字以下に抑えてまとめ、5分程度で読めるボリュームの箇条書きでのまとめた社会人としての学びNoteをコンセプトにほぼ毎日出来る限り学びのアプトプット記事を更新しております。
朝の時間には、自己啓発のアウトプットの時間として、ほぼ毎日、Twitter、Instagramなどに学びの要点を投稿しています。
Twitter、Instagram、Pinterest、Facebookのアカウントがある方は、フォローを宜しくお願い致します。
kajōgakiのSNS
- Twitter - @kajogaki_note
- Instagram - @kajogaki
- Pinterest - @kajogaki
- Facebook - @kajogaki
随時、新しい学びのアウトプット記事を更新してますので、是非、はてなブロガー様は読者登録をその他の方はお気に入りやブックマークなどをお願い致します。
昨日より今日の自分が0.1％何かで向上したとすれば
三日坊主で1年で300日学んだとしても
● 1年間で1.3倍の成長
● 10年間で10倍の成長
● 20年間で100倍の成長
● 30年間で1000倍の成長