kajōgaki | 社会人の学びのNote

1日5分で学べる箇条書きに拘ったビジネス知識・スキルの自己啓発ノート

はてなブログデザインテーマ「Brooklyn」のカスタムギャラリー

はてなブログデザインテーマ「Brooklyn」のカスタムギャラリー

目次

  1. Brooklynのカスタムギャラリー
  2. その他で活用させて頂いているツール
  3. 素人でもコピペでデザインできる参考サイトCSS

Brooklynのカスタムギャラリー

前回、自分の備忘録として、「はてなブログデザインテーマ「Brooklyn」のカスタム備忘録 | 「kajōgaki | 社会人の学びのNote」2021年カスタマイズの自己啓発」の記事を書きましたが、そこでは、色々調べている時の参考にさせて頂いたブログ記事内のリンクが切れてたり参考記事が削除されていただので、素人同然の私としては、無くなるとわからなくなってしまうので、自分の備忘録として記しました。

ここでは、もっとわかりやすく利用させていただきました「Brooklyn」のカスタムをギャラリーとしたいと思います。

「Brooklyn」作者のSHIROMAG様

www.notitle-weblog.com

グローバルナビの設置やシェアボタンの設置やカスタムが学べます。

Twitterのシェアボタンが動かないときはこちらの記事が参考になります。

 カスタマイズしたツイートボタンが、ブラウザによって動作しない場合の解決法

グローバルメニューにアイコンを追加

redo5151.hatenablog.com

はてなブログアイコンフォントのクラス名で、グローバルメニューにアイコンを追加することができます。

グローバルメニューにアイコンの調整

nanana015.hatenablog.com

グローバルメニューにアイコンを追加したときの、アイコンと文字の幅を調整する方法を解説してくれてます。

トップページのカスタマイズ・記事一覧

romita.hatenablog.com

はてなブログ無料版でトップページのカスタマイズ・記事一覧で見やすくできます。

無料ではてなブログを利用している方に有効です。

有料で利用している方は、設定の詳細設定から設定が可能です。

記事内で、スマホ画面時にズラッと記事が並ぶのを防ぐ、TOP画面を記事を減らす方法も書かれています。

ブログのヘッダとフッタを非表示(有料プラン)

staff.hatenablog.com

デフォルトでデザインに関わらず表示されるブログのヘッダ部分とフッタ部分が表示されなくなります。

パソコンとスマホで別々のヘッダ画像

acchinosorara.hatenablog.jp

パソコンは横長でスマホは縦長ですが、パソコンでの見え方をイメージして作った横長の画像をスマホ用の縦長画像などにして別々に表示させる方法を解説してくれてます。

「上に戻る」ボタン

www.gipsyjazznyumon.com

上戻るボタンをコピペで実装する方法を解説してくれてます。

現在はこちらに変更してます。

www.fuji-blo.com

目次の変更

www.fuji-blo.com

たまたま見つけたノートの目次に一目ぼれして利用させて頂いてます。

トップページ記事一覧をカード型(1列)にカスタマイズ

www.zero-point-five.com

トップページの記事一覧をカード型(1列)に変更する方法を解説してくれてます。

記事一覧をふわっとさせる

www.fuji-blo.com

フジブロっ!様の記事で「記事一覧をふわっとさせるカスタマイズ」を発見して、面白い!と思い利用させていただいてます。

記事一覧のアイキャッチ画像がマウスオーバーでフワッするモーションが実現できます。

サイドバーのプロフィールのカスタマイズ

www.fuji-blo.com

フジブロっ!様の「はてなブログ-プロフィールをおしゃれにカスタマイズするデザイン10選」記事内で自分で好みに選択しながら作成でき自動でコードが作成してくれて使うことができます。

上記でカスタマイズした際のフォローボタンのカスタマイズも教えてくれてます。

 はてなブログ-フォローボタンのカスタマイズ【Twitter、Pinterest、YouTubeにも対応】

サイドバーのバナーセンタリング

mtacblog.com

サイドバーにバナーを設置したときに、配置が寄ってしまったときのセンター寄せの方法を解説してくれてます。

「この記事は〇分で読めます」自動追加

redo5151.hatenablog.com

記事上に、自動で「この記事は〇分で読めます」を表示することができます。

リライトした記事の更新日付【手動で表示させる方法】

schizoid-personality.hatenablog.com

記事をリライトした時に更新日を自動で設定してたのですが、誤字などを直しただけでも作動してしますので、自分で付け足す方法に変更したのですが、自分で付け足す方法を解説してくれてます。

「URLと記事タイトル」をコピーする、追従するボタンを設置

yaanon.hatenablog.com

追従する「URLと記事タイトル」をコピーするボタンをコピペだけど設置する方法を解説してくれてます。

記事ページのフォントサイズを変更

www.slooowlife.com

記事ページのフォントサイズを好きなフォントサイズに変更する方法を解説してくれてます。

タイトル文字サイズもこと方法で変更してます。

記事中にアイコンフォントを利用

redo5151.hatenablog.com

記事中にアイコンフォントを使う方法を解説してくれてます。

CSSで未使用のセレクタを見つけて削除方法

thesaibase.com

ブログカードの下につくURL削除

www.tairakenji.com

その他で活用させて頂いているツール

その他で活用させて頂いているツール

カラーコードを調べる

 HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

CSSでカラーを変更するときなど、いつもカラーコードを調べるときに、利用させて頂いてます。

ページの読み込み速度の調査

 PageSpeed Insights - Google Developers

画像の圧縮ツール

 Optimizilla

ページの表示速度には、画像のサイズが影響してくるので、画質を保ったままに、JPEGやPNGイメージを最小サイズに圧縮するツールを利用させていただいてます。

ブログ記事の検索ワード

 ラッコキーワード

画像の無料素材

 pixabay

画像の編集

 FotoJet

ブログランキング

 みんなのブログランキング

某ブログランキングは、サイドバーとかに貼らなければいけなく、自ブログへの流入もあるけど、流出もあり、特に自ブログをリンク移動でつないでいる場合には、プラス効果よりマイナス効果が大きいと判断してブログランキングには参加してませんでしたが、この「みんなのブログランキング」は登録だけで自ブログに貼らなくてもOKなので流出のマイナス面がありません。

素人でもコピペでデザインできる参考サイトCSS

素人でもコピペでデザインできる参考サイトCSS

サルワカ様

 【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

 CSSで作る!吹き出しデザインのサンプル19選

Webクリエイターボックス様

 少しのコードで実装可能なCSS小技集

 【第2弾】少しのコードで実装可能なCSS小技集

 【第3弾】少しのコードで実装可能なCSS小技集

 【第4弾】少しのコードで実装可能なCSS小技集

Pulp Note様

 【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

Nomad Code様

 コピペで使えるブログカスタマイズツール

TOP