みやもとメモ

「Notion」「資格」「ブログカスタマイズ」「Microsoft To Do」「Chrome拡張機能」などについて書いていきます。

目次
目次

【はてなブログ-カスタマイズ】デザインテーマって意外と簡単にカスタマイズできるんですね

この記事をシェアする

またしてもブログカスタマイズに関してです。
数日前から適用していますが、デザインテーマをカスタマイズしてみました。

私はSilenceというデザインテーマを使用しています。
ブログを始めてすぐ、テーマストアから好みのデザインテーマを探してSilenceに辿り着きました。

最初は「好みのデザインテーマが見つかった。よかったよかった。」で満足していたんですがSilenceのページをよく見るとカスタマイズに関するご案内が色々と書いてありました。

テーマストアで他のテーマも見てみたんですが、カスタマイズの案内があるかどうかはまちまちみたいです。
自分のはたまたまカスタマイズの案内があってラッキー。といった感じです。

ということで、今回は実際に適用したカスタマイズ内容について書いていこうと思います。

グローバルナビを設置

実物(画像)

まずは手っ取り早く、画像を載せます。

グローバルナビ

スマホの場合

こんな感じです。
ホームへのリンクと、各カテゴリーのリンクを設定してみました。
なんだかサイトの見栄えが良くなった気がします。
どんなジャンルを書いているブログか一目で分かるのも良いかなと。

スマホの場合も、カスタマイズ前はカテゴリーがだいぶ下の方にあったので上部のメニューから参照できるのは良いなと。

デメリットとして、カテゴリーを追加・変更・削除するときに随時メンテする必要があるところです。
そんなにカテゴリー追加されることはないと思うのでそれほどデメリットに感じてないですが、面倒になったらもしかしたら外すかもです。

(追記)
PC版、スマホ版ともに別のものに変更しました。
それぞれ記事を書いているので、こちらも良ければぜひ。

miya-moto-memo.hatenablog.com

miya-moto-memo.hatenablog.com

適用手順

手順のページが用意されていたので、それに従って設定しました。
ありがたいです。

参考リンク

シェアボタンを設置

実物(画像)

シェアボタン

こんな感じです。
これは記事ページで表示されるみたいです。

元々記事下にシェアボタンを設置していたのですが(標準のブログパーツ)、記事上にもシェアボタンを設置してみました。

記事下の標準のやつはどうしてもSilenceのデザインにマッチせずに浮いて見えてしまうのですが、今回適用したシェアボタンはデザインがマッチしてますね。(そりゃそうだ。)

ただ記事下の標準のやつはだいたいのはてなブログにあるやつなのでお馴染みの感じで安心感はありますよね。(なので残してます。)

適用手順

こちらも手順のページが用意されていたので、それに従って設定しました。
ありがたいです。

参考リンク
追記

上記の手順の「3.シェアボタンにシェア数を表示」のコードは削除しました。
削除した理由は、JavaScriptエラーが出てしまうためです。

なお、「3.」の削除だけならシェアボタンの機能自体は有効なままです。
JavaScriptエラーが出るくらいなら、「シェア数の表示」はなくても良いかなと思った次第です。

テキストのカスタマイズ

実物(画像)

テキストのカスタマイズ

こんな感じです。
テキストを強調できますね。

Silenceは白と黒を基調としたデザインなので、乱用しないように気を付けたいと思います。

適用手順

こちらも手順のページが用意されていたので、それに従って設定しました。
ありがたいです。

参考リンク

おわりに

ということで、デザインテーマのカスタマイズに関してでした。
思ったより簡単にカスタマイズできたことに感動したので書いてみました。

ちなみに他にもいくつかカスタマイズの案内ページがありましたが、いったん見送りました。
後ほど時間がある時にしれっと適用するかもしれません。

(追記)記事下にフォローボタンを設置してみました。
こちらもデザインテーマのカスタマイズになります。良ければぜひ。

miya-moto-memo.hatenablog.com

関連記事

グローバルナビゲーションの関連記事をまとめました。
気になる記事があればぜひ。

TOPへ戻る HOMEへ