この記事ではWordPressテーマ『AFFINGER5』のカスタマイズ例をご紹介します。
カスタマイズといってもデザインを大きく変更するものではなく、細かい部分の微調整が主な内容です。
すでにある程度手を加えていても取り入れやすいはずなので、ぜひ挑戦してみてください。
※万が一のトラブルに備えて必ず事前にバックアップを取ったうえで作業してください。
ご覧のとおり、このブログのテーマをAFFINGER5からSANGOに替えました。
このブログ上でカスタマイズ例をお見せできないこともあり、この記事のCSSカスタマイズをブログ記事で紹介していただいた場合はこちらで紹介させていただきたいと考えています。
ご連絡をお待ちしております！
＼クリックが数字として手に取るようにわかる／
※AFFINGER5を使うならタグ管理マネージャーは導入しない理由がない超優良プラグイン。クリック率が見事に可視化されます。クリック率は収益に直結する最重要な要素。お持ちでない方には導入を強くおすすめします。
目次
AFFINGER5(アフィンガー5)のカスタマイズ例
トップページの記事をブログカードにした場合の高さ崩れを一括で整える
記事一覧をブログカードで表示するように設定した場合に、カードの高さを固定にする方法です。
現在ヨノイログではトップページをこのように縦2列の表示にしています。
いわゆる「サイト型」のトップページです。
- ブログ型：新着順に記事が並ぶいわゆる「ブログ」的なトップページのこと
- サイト型：カテゴリーごとに配置するなど、訪問者が閲覧しやすいように整理されたトップページのこと
サイト型のトップページはカテゴリーごとに整理されているため、ユーザーがサイト全体を見渡しやすいのがよいところです。
このアフィンガー5のトップページを2列表示にする方法はいくつかのブログで紹介されていたりしますが、私が参考にさせていただいたのはこちらの記事。
参考 AFFINGER 5 で超かっこいいトップページを作る方法てっぺのマネーハック.INFO詳しい手順はそちらをご覧いただくとして、簡単にポイントを整理すると以下のようになります。
- 2列構成にするためにトップページ用の固定ページを用意する
- 固定ページにアフィンガー5の固有タグ「PCとTab左右50%」を貼り付ける
- 左右それぞれにバナーリンクでカテゴリータイトルを設置し、また記事一覧をブログカードで作成する
簡単に設定できるので非常におすすめなのですが、一点困るのが記事タイトルが長い場合にブログカードの高さが変わってしまうこと。
アフィンガー5のブログカードは高さが固定ではなく、可変で設定されています。
そのため、記事タイトルの行数やサムネイルのサイズに応じて自動的に調整されるので、場合によっては特定のカードだけ高さが不揃いになってしまいます。
仮に1列表示であれば一つだけ高さが違ってもあまり気になりませんが、2列で設定しているのでずれると目立つんですよね。
こんな感じ。
「記事タイトルの文字数を必ず◯◯文字以下にする」など、管理をきっちりしていればズレは発生しづらいのかもしれませんが、なかなかそこまでできないですよね。
そこでブログカードの高さを調整します。
今回は一括で適用させられるよう、追加CSSで設定します。
下記のコードを追加CSSにコピペで貼り付けます。
.lbox div.kanren.st-cardbox{
max-height:132px;
}
.rbox div.kanren.st-cardbox{
max-height:132px;
}
高さを調節したい場合は同様に赤色で示した箇所のピクセル数を変えてあげればOKです。
またカードの個別パラメータとして高さを指定することもできます。
方法は簡単で、下記の箇所に設定したいピクセル数を入れてあげます。
カード一枚ごとに設定できますが、すべてを一括で管理できないため、やや面倒なのが欠点です。
（エディター上で置き換えを使うこともできますが）
どちらの方法も一長一短あるので、お好みで使い分けしてください。
ヘッダーメニュー上にインフォメーションバーを設定する
たとえばJINなど他のテーマでは、ヘッダーメニューの上部にインフォメーションバーを表示できたりしますが、アフィンガー5にはそのような機能は用意されていません。
アフィンガー5でインフォメーションバーを使いたい場合は、代わりにウィジェットを利用してインフォメーションバーを作成します。
ヘッダーにはウィジェットエリアとして「ヘッダー画像エリア上のウィジェットエリア」が用意されているので、そちらを活用します。
まずWordPress管理画面より、外観＞カスタマイズ＞ウィジェットを開きます。
ウィジェットはテーマのカスタマイズから開きます。
「ヘッダー画像エリア上のウィジェット」を開きます。
「ウィジェットを追加」から「カスタムHTML」または「テキスト」を追加し、表示させたいワードやリンクを貼り付けます。
なおHTMLを貼り付ける場合はタブを「ビジュアル」から「テキスト」へ切り替えた上で貼り付けます。
貼り付けた直後はこのような感じです。
背景に色がついておらず、文字列もブログの基本設定にそった色設定になっています。
背景の色設定と文字色の設定は追加CSSで行います。
下記のコードを追加CSSに貼り付けます。
#st-header-top-widgets-box{
background:#2e66aa;
color:white;
}
#st-header-top-widgets-box a{
color:white;
}
「background:#2e66aa;」は背景色の色コード、「color:white;」は文字色の色コードです。
こちらはご自分のブログカラーに合った色に変えればOKです。
上記のコードをそのまま貼ればこのブログのカラーと同じになります。
このような感じ。
もちろんフォントサイズなどこちらでも変更可能です。
またウィジェットエリアが下のメニューバーと比較して微妙に太いので、インフォメーションバーがメニューバーよりも大きく見えてしまいます。
デザイン的に許せなければこちらもCSSで微調整が可能です。
「ヘッダー画像エリア上のウィジェットエリア」とウィジェット(カスタムHTMLまたはテキスト)の間にpadding(空白)が効いているので、こちらを追加CSSで狭めてやればOKです。
#st-header-top-widgets-box .st-content-width{
padding:5px!important;
}
paddingの後の「5px」の数値を小さくすれば空白が狭まっていきます。
ちなみに初期値は7pxなので、それ以下の数字がよいかと思います。
ただしやはりスマホ表示にも影響するので、PCとスマホの両方を見ながらバランスを取った方がよさそうです。
またインフォメーションバーに採用するウィジェットは「カスタムHTML」と「テキスト」のどちらが望ましいかという話ですが、どちらでもよいのではないかと思います。
「カスタムHTML」と「テキスト」の違いはエディタで改行した際にbrタグが入るかと、文字サイズ等の基本CSSの適用の有無(？)。
どちらにせよ1行しか表示しなければどちらでも大きな差はありません。
自分はテキストを使っています。
記事タグ「こんな方におすすめ」の空白を調整する
アフィンガーの専用タグ「こんな方におすすめ」の空白を調整します。
デフォルト状態でPCで表示した場合はこのようになります。
一見いい感じですが、スマホで表示すると若干中央に寄り過ぎな感じになります。
文字数も多くなりがちなパーツなので、左の空白を調整して全体を左に寄せます。
追加CSSに下記を追加します。
ul.st-blackboard-list.st-no-ck-off{
padding:10px 20px 10px 15px;
}
横の空白が若干狭まります。
スマホで見てもいい感じです。
もっと寄せたい場合は「padding:10px 20px 10px 15px;」の最後の15pxを小さくすればOKです。
すごい目次(SUGOIMOKUJI)のインデントを階層化する
アフィンガー5の追加プラグイン『すごい目次』(SUGOIMOKUJI)は、初期設定だとデザイン的にぺったりした雰囲気。
左揃えでフォントサイズも均一なため、メリハリに欠ける印象になってしまいます。
これをh2、h3間にインデントを入れ、h3の文字を小さくしつつ行間も少し詰めます。
追加CSSに下記を追加します。
#st_toc_container ul li li {
margin-left:15px;
font-size:14px !important;
}
#st_toc_container ul li li a{
font-size:14px !important;
padding:0px 5px;
}
適用するとこうなります。
目次として見やすくなります。
すごい目次(SUGOIMOKUJI)の横幅をカスタマイズする
『すごい目次』(SUGOIMOKUJI)の横幅を調整します。
すごい目次はデフォルト設定だと、横幅が記事内のスペースいっぱいまで広がってしまいます。
このような感じ。
下のh2見出しと比較すると分かりますが、同じ幅まで外枠が広がっています。
デザイン的にメリハリをつけるために、これを若干内側へ入れます。
追加CSSに下記を追加します。
@media only screen and (min-width: 599px) {
div#st_toc_container.st_toc_hierarchical.st_toc_style_default{
margin:0px 15px 20px 15px;
}
}
保存するとこのような感じに。
微妙な数値で設定してしまったのでやや分かりづらいですが、若干内側に入っています。
どのくらい内側に入れるかは、下記の数値で調整できます。
margin:0px 15px 20px 15px;
赤字の部分を変えることで、端から何ピクセル内側に空白を取るかを設定できます。
数字は上、右、下、左の並びになっているので間違えて変更しないようにしましょう。
なお今回の追加CSSではスマホで表示した場合は目次が追加CSSが反映されないように設定しています。
スマホだとそもそも横幅が狭いので、画面幅いっぱいに表示した方がむしろ見やすいためです。
スマホでもPCと同じく内側に入れたい場合は下記の貼り付けでOKです。
margin:0px 15px 20px 15px;
}
よくある質問
追加CSSが保存できません。
サーバーのセキュリティ対策でWAFがオンになっている場合、追加CSSに保存ができません。
ご自身のサーバーの管理画面からWAFを一時的に解除する必要があります。
WAF設定はご使用のサーバーによって異なりますので、公式ヘルプを見るなどして一度設定を確認してみてください。
なお攻撃からブログを守ってくれる設定なので取り扱いは慎重にどうぞ。
まとめ
アフィンガー5は優れたカスタマイズ性を持っていますが、細かい部分はやはり自分で微調整する必要があります。
デザインに時間をかけすぎるのもよくないですが、丁寧で細部まで行き届いたデザインはユーザーの印象によい影響を与えるはず。
この記事で紹介したものの中で気になるものがあれば、ぜひ試してみてください。
また今後、このブログで採用したカスタマイズ例があれば随時追加していきます。
アフィンガー5を使ってらっしゃる方は、たまに見に来ていただければと思います。
＼クリックが数字として手に取るようにわかる／
※AFFINGER5を使うならタグ管理マネージャーは導入しない理由がない超優良プラグイン。クリック率が見事に可視化されます。クリック率は収益に直結する最重要な要素。お持ちでない方には導入を強くおすすめします。
また高速化に悩まれている方は、サーバーを乗り換えるのも有力な方法。
Conoha WINGなら他のレンタルサーバーと同じ使い勝手で手軽に速度を上げられますよ。
