見出しタグのリデザインと『Jetpack』の再設定

投稿日:2017年7月7日

今回は前回からの続きで、細かなカスタマイズ集の後編となります。
 

本記事でのカスタマイズ内容は、

・見出しタグ(h1、h3)のリデザイン
・『Jetpack』プラグインの再設定

の前回の残りとなる2項目です。

 

見出しタグのリデザイン

まず行なっていくのは、見出しタグのデザインのやり直し。

見出しタグは少し前にAFFINGERデフォルトの物から、多少いじって自分好みに変えたつもりでしたが、最近になって実際に見出しタグを使うようになって(いまさら)、いざ記事内に組み込んでみると、ちょっと思ってたのと違うな~と感じたので、今回デザインを手直ししていきます。
 

h1タグのカスタマイズ

最初はh1タグ。記事タイトルとなる部分ですね。

ここには前回アイコンを「背景画像」として設定しましたが、これを私が気に入ってるAFFINGER公式のアイコンのように、色付きの丸で囲ってシャレオツ オシャレな感じにしていこうと思います。
 

新アイコンの作成

この作業はPhotoshop上で全て完結しますね。

今使ってるアイコンは48pxの透過png。
これを丸で囲うためには、イラストの周囲の余白が足りなかったため、+6pxの54pxの透過pngを新たな素材として用意しました。

しかし、これをh1の背景画像として設定してみると、丸の上下が切れてしまっていました。
どうやらここは48pxでちょうどだったらしい。
 

こんなこともあろうかと、『ICOOON MONO』様より、ワンサイズ小さい32pxのアイコンも頂いておりましたので、こちらも+6pxした38pxのアイコンを用意。

元々Photoshopは軽く触れたことがある程度だったので、透過pngのレイヤー編集の仕方とか全く分かりませんでしたが、なんやかんやで上手くいきました。
 

フォントサイズの調整

以前の物よりアイコンのサイズが小さくなったことで、相対的に記事タイトルの文字が大きく見えますね…
この記事タイトルももう少し小さくしたいなと前々から思っていたので、これを機にカスタマイズ。

h1のデフォルトのフォントサイズが27px相当だという事は前に調べておいたので、とりあえず一つ下げて26pxで。 1px違うだけでかなり変わりますね、驚いた。

しかし、26pxのフォントだとなんか一部のカタカナがガビガビになっててカッコ悪い…

試しに25pxに設定してみると、さっきより全然キレイに表示されました。 なんなんだろ? 文字によって適したフォントサイズとかあるんかな?

というわけで、フォントサイズを変更し、小ぶりになったタイトルに合わせてアイコンとの余白を詰め、個人的にはかなり満足のいく仕上がりとなりました~。

フォントが小さくなったことで、それまで2行で表示されていた長めの記事タイトルが1行で表示されるようになったのも嬉しい点ですね。
ガンプラって長い名称のやつ多いですから…
「ガンダムアストレイブルーフレームセカンドL」とか「フルアーマー・ガンダム(GUNDAM THUNDERBOLT版)ラストセッションVer.」とか。
 

h3タグのカスタマイズ

おっといかん、話が逸れる。ガンダムトークはサイトが完成してからなのだ。

続いてはh3タグ。↑の見出しで使用されてるヤツです。
h2は特に悪くないと思うのでそのままで。

h3は下線(実線)を引いていただけです。
ホントは左ボーダーが好みだったのですが、h4の背景色が透過にできないという点からデザイン的にそれはh4に設定していました。

見出しといっても、普通より少し文字が大きいってだけなので、ここが見だしだ~って分かるようなのが私の好みなんですよね。

それでもh3の使用頻度を考えると、シンプルな方が良いかなと思い、上と下に線を付けるだけでもいいかな~とやってみたのですが、なんか上の線だけ太いんですよね…

これではどうにも格好つかないので、左ボーダーと下線にしようと思ったんですが、h3では[下線を左ボーダーに変える]という項でしか左ボーダーを付けられないため、両方一緒に設定することができないんですよ。 h4ではできるのに。
(h3の「背景画像」として左ボーダー、あるいは下線を設定してやれば両方表示できると思います)

さっき透過pngで手こずったのでPhotoshopはしばらく見たくないので(笑)、仕方ないのでここは背景色で代用。

ちょっと派手すぎるかもしれないけど、あとは使ってみて調整すればいいや。
その時は左ボーダーを画像で用意しとかねば。
 

h4タグのカスタマイズ

↑これがh4です。

h4は前は左ボーダーだったけど、それをh3で使いたくなったので、h4を下線と交代。

上記で書いたように、h4には背景色を設定しておくしかないんだけど、h4はきっとそこまで使用頻度も多くないだろうし、薄めにしておけばいいだろう。

基本は小さい見だしになるほどに色を薄くしていけばシャレオt…オシャレに見えるかしら?
 

h5タグのカスタマイズ

↑これがh5。

ここは以前の旧h3と同じ下線のみで。
コレとにかく地味だったので、カスタマイズできる一番下のタグにでも設定しとけばいいや。
(h6はカスタマイザーからはカスタマイズできない)
 

hタグのカスタマイズ完了

h1とh3タグのみの予定でしたが、ついでなんでh4、h5もカスタマイズしときました。

ほんじゃ以前のデザインとともに上げときます。


↑以前のデザイン


↑今回のカスタマイズ後

横並び画像(スマホ表示時除く)にそれぞれ説明文を下部に付けたけどちゃんと表示されてるかな?
 

ではこれで「見出しタグのリデザイン」は完了!

…ここまでで2200字…
これで1記事として投稿もできそうなモンですが、カスタマイズ自体はさほどやっていないので、次のもまとめてやってしまいましょう。

 

『Jetpack』プラグインの再設定

お次は多機能プラグイン『Jetpack』の再設定…というより、設定の見直しですね。

Jetpackは複数の機能(42個?)を備えたプラグインで、各機能を有効化していく事で、このプラグイン一つで有効化した分のプラグインを入れたのと同等の機能を追加していく事ができます。

この高性能さゆえに、テーマとの競合や、WordPressが重くなってしまう、といった弊害も起こり得るとの話です。
この辺はJetpack導入時の記事に書いたような気がします。

私はこのJetpackをコメント機能の拡張のために導入して使っていましたが、現在『PageSpeed Insights』でのサイト表示速度向上を目指しているため、余計な物はとことん省いていこう、ってな具合です。

どれほどの効果が見込めるかは全く不明ですが、使ってない物を入れておいて良い事は無いでしょうから、スッパリ切っていきます。
 

『Jetpack』の機能一覧

Jetpackの機能は、メニューの[Jetpack]>[設定]画面から複数のタブを切り替える事で確認できますが、この画面からでは何故か確認できない機能が多々あります。

その全機能の一覧画面へは、

"○○○.xxx(サイトアドレス)/wp-admin/admin.php?page=jetpack_modules"

とURLに打ち込むことで表示させることができます。

Jetpackを紹介しているサイトを見るに、過去にはこのページへのリンクが設定画面に存在していたようですが、現在はURL直打ちでしか飛べないっぽい??
 

不要機能を無効化

この機能一覧画面を見ると、設定した覚えのない機能までもが有効化されていたことが分かります。
追加サイドバーウィジェットとかURL短縮リンクとか、基本付いてても邪魔にならなそううな物がほとんどのようですが、もしこれらの機能によりサイト表示が遅くなっているかもしれないと思うと、やはり必要最低限にとどめておきたいですね。

私の場合は、「コメント」の1つさえあればいいのではありますが、現在ほかにアクセス解析を入れていないので、「サイト統計情報」は残しておきたいかな。
…ぜんぜん見られていないってのは分かっているんだけどさ、ついつい毎日チェックしてしまうんよね…

デフォでオンになっていた機能を無効化する際、どんな機能か名前からは判断つかない機能ばかりなので、参考サイトを見ながら一つずつ切っていきます。

問い合わせフォームを好きなところに設置できる「コンタクトフォーム」や、インデックス促進の「拡張配信」、XMLサイトマップ作成の「サイトマップ」など、まだ当サイトでは導入していない機能もボタン一つで付ける事はできるんですが、これらは有名なプラグインで実装可能なので、AFFINGER公式で勧められてる物の使用を検討しています。
 

有効化しておきたい機能

各機能を調べていく中で、ちょっと面白そうな機能もありました。

1つ目は「通知」。WordPressのツールバー上から、サイトのアクティビティがチェックできます。
サイトの閲覧数が急上昇した時や、コメントなんかも画面遷移せずに確認できるっぽい?(使ったことないので詳しくは分かりません)

2つ目が「ウィジェット表示管理」。これは各ウィジェットを、条件指定したページ毎に表示、又は非表示にするという機能のようです。
何気にすごくないですかこれ?  ちょっと使い方がよく分からないんですけど…
各ウィジェットに[公開状態]という項目が追加されてました。ここから細かく設定しておくっぽいです。

この2つは後々便利そうな気がしたので、有効化のままにしておきました。

そしてもう一つ!「Photon」という機能です。
これは通常の設定画面からもチェックできたと思うんですが、画像の読み込みを高速化してくれる機能らしいです。
当サイトのようなギャラリーメインのサイト(予定)にはありがたいかもしれません。

こちらは今は不要ですが、もしかしたらいつか使いたくなる時が来るかもしれません。
 

というわけで、計4つの機能を残してほかのJetpackの機能を無効化しておきました。

『PageSpeed Insights』でサイト表示速度チェック

ではこれで『PageSpeed Insights』で三度サイト評価が上がったかチェックしてみましょう!!

結果は……

モバイル: 63点 → 65
パソコン: 73点 → 75

と、少しですが間違いなく上がりました!
いや、正直こんなちょっとしたことで上がるとは思わなんだ。

今回も例によって何度も分析を繰り返してなるべく正確なデータを取ったつもりなんですが、前回より明らかに良くなったんですよ!

モバイルはほとんど赤点(64点以下)が出なくなりましたし、過去最高の78点も出せました(^^)

パソコンは前回は低い時は61点とか出てましたが、今回は低くとも72点。 最高点は前回と同じ81点。
なんだか安定していた感がありますヽ(⌒▽⌒)ノ

 

おわりに

今回も4000字オーバーしちゃったけど、良い結果が出せたので満足。

手こずったのはPhotoshopの使い方ですね。 今後写真の編集とかもできるに越したことはないので、こっちも使えるようになりたいですね~
 

さて、次回は…

今回のJetpackの記事の中で出た、「コンタクトフォーム」、「インデックス促進」、「サイトマップ」、このあたりの機能が当サイトにはまだ備わっていないので、プラグインで一つずつ対処していこうと思います。

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.