hermioni.com-タカラガイ博士のライフハック論-

館山のビーチコーミング、大阪ビジネスパークの食レポ、ブログカスタマイズ、ライフハック、将棋、仕事、就活知識、医療などちょこっとギャグを交えて幅広く紹介

はてなブログテーマ「Silence」のカスタマイズと魅力と表示速度が遅いかを検証

【スポンサーリンク】

Silence
こんにちは!夢で逢えたら、ハーマイお兄です。

 

大人気はてなブログテーマ「Brooklyn」のテーマ製作者が、新たに最高のテーマを作られたので個人的に魅力的に感じた部分をカスタマイズした内容も含めて紹介します。

 

www.noname-note.com 

 

「Silence」の表示速度を確認してみる

まずはSEOにも関わってくるので、Silenceの表示速度を確認してみました。
今使用している「zeno-teal」はやや重いと言われているので、それよりも重いようであれば断念しようと考えたためです。

サブブログでテストブログを作成し、そこにSilenceテーマを導入、下記のカスタマイズをいくらか入れてテスト記事も加えて検証しました。

 

「Silence」の結果はモバイルが「47」

Silenceのページ速度モバイル

 

パソコンだと「90」という結果に。

Silenceのページ速度パソコン

いや、かなり早いですよ。

 

私のブログ(zeno-teal)ではパソコンの表示速度が「60」

zeno-tealの表示速度パソコン

モバイルに至っては「28」ですから。

zeno-tealの表示速度モバイル

めっちゃ遅い…。どないしよ。

 

 

もちろん自分の今後導入するカスタマイズで変化はあると思いますが、現段階ではSilenceの方が表示速度が上がると思うので、近々変えることを決意しました。

p.s:諸事情により、変えられませんでした。泣

【Silenceの魅力】ブログカード一覧下の説明文が長く沢山読める

私のブログの記事一覧を見てもらえればわかるのですが、基本初めに挨拶を書きます。

そのため、今までは挨拶文で説明が半分埋まります。

zeno-tealの記事一覧説明文

3月3日に至っては説明がまさかの挨拶文しかありません。お雛様もビックリです。

ユーザーが見たいのって絶対挨拶じゃないと思うんです。

挨拶の為に半分埋まってたらやってらんないよと。(挨拶すんな)

 

ブログカードの説明箇所だけCSSで伸ばそうとも思ったのですが、全体のページが崩れたら嫌だなあと困っていた矢先、silenceの記事一覧の説明見てくださいよ。。

silenceの記事一覧説明文

この五行!この五行は強いです。
挨拶あってもきっと内容にも触れるぐらいまで伸ばされていると思うんです。
これは期待しかありません。

【Silenceの魅力2】スマホ・タブレットサイズではトグルメニューに切り替わる

ハンバーガーメニューとも言われていますが、このトグルメニュー、私が使っているはてなブログテーマ「zeno-teal」では出来なかったんです。

www.hermioni.com

あんなに苦労して調べても上手くいかなかったのに、それがまさかのデフォルトで備わっているなんて…

Silenceのトグルメニュー

これがスマホバージョン。本当に有料級だと思います。作者様に感謝ですね。 

【Silenceの魅力3】シェアボタンの設置はコードを自動生成可能

作者様が投稿している、シェアボタンの設置方法を見たら記事内でコードを自動生成して簡単に作れるようにできているのが凄いです。

theme-silence.hateblo.jp

コードの貼り付け位置は、

「デザイン」>>「カスタマイズ(タブ)」>>「記事」>>「記事上」もしくは「記事下」

に張り付ければ完了です。

WebアイコンはFont-awesomeから引っ張ってきているようなので、

「設定」>>「詳細設定」>>「検索エンジン最適化」の欄に「headに要素を追加」

という項目があるのでそこにコードを貼り付けます。

シェアボタンの設置

相当お洒落ですよ。私には似つかわしくないですね…。笑

 

【Silenceの魅力4】グローバルナビまで自動生成する機能が用意されている

ここまで太っ腹な作者様を初めて見ました。

theme-silence.hateblo.jp

自分のURLと親カテゴリー、子カテゴリーをそれぞれ入力した後、「コード生成する」ボタンを押せば、コードが自動生成されます。

あとはその取得したコードを

「デザイン」>>「カスタマイズ」>>「ヘッダー」>>「タイトル下」

に張り付けるだけで完了です。簡単すぎる。

テストがてら、私も作りました。

Silenceのグローバルナビを設置してみた

と思ったらあれ?カテゴリーが無い。どこに行ったの??

色々探していたところ…

スクロールしたらひょっこりはんしました。

Silenceのナビゲーションバー作成

どうやら、はてなブログにログインすると上に常時表示される黒いバーによってカテゴリー一覧が遮られてしまっていたようです。

自分以外であれば問題無く見れると思うので、一安心です。 

番外:読者登録ボタンの設置とカスタマイズ

同じ作者様より、読者登録ボタンのカスタマイズ記事で最新投稿がありました。

私ははてなブログを新規に初めてから読者が未だに0人になので、ボタンを目立つように切り替えました。

www.noname-note.com

 

色の変更については、ボタンの色は「background-color」、ボタンの影部分の色は「box-shadow」部分を書き換えることで変更できます。

読者登録ボタン

私のはこんな感じ。青色を強調しています。
今はプロフィールの下に付けています。プロフィールの設置場所は、

「デザイン」>>「カスタマイズ」>>「サイドバー」>>「プロフィール」>>「ブログの説明」

にあります。(人によってはサイドバーのプロフィールを消している可能性が有るので注意)


あっ、読者0人なので登録ください。( ノД`)シクシク…

読者になる

 

いかがでしょうか。

Silenceでは、ナビゲーションバーを始めとした本格的なカスタマイズが初心者でも簡単に作れるように備わっていました。

私は今のテーマから変更する際、色々不具合が生じる気がしているので、もう少しカスタマイズを確かめてから休日の空いた時間を使ってゆっくりテーマを変えていきたいと思います。

私がこのブログを1月末に始めたのですが、それに合わせて作っていただいたと解釈したいです←殴