WordPressテーマ「ALPHA」のLusterでウィジェット右端の文字に余白がないのでカスタマイズ修正

有料WordPressテーマ「ALPHA」のLusterでウィジェット右端の文字に余白がないのでテーマを修正しました。

いつのバージョンアップからか、サイドバーの文字だけのウィジェットで余白が無いことがずーっと気になっていました。文字だけのウィジェットというのは、「最新の投稿」などです。

なにかわからないけどダサいような気がする・・・。

ということで、久しぶりにサポートフォーラムをのぞいても、有料サポートとの回答がぐちゃぐちゃになっていて見づらかったので放置していました。

ずっと気になっている状態っていうのも嫌だったのですが、グーグル先生に頼るもピンポイントでの答えがずっと見つかりませんでした。

しかし今回、救世主が現れたのでこの機に修正に着手しました。

それがこちらの記事。（WordPress x α（ALPHA）さま）

ウィジェット「最近の投稿」の右端に余白が欲しい – WordPress x α（ALPHA）ふと気付いたのだけれど、投稿のタイトルが長いと、 右サイドバーに表示させている「最近の投稿」の表示がなんだか残念な感じ。。 右端に余白が欲しいです。 ということlightseagreen.xyz

こちらで書かれている記事内容でのデザインが「Snow」ということで、多少の違いがあるのか、私の場合（Luster）はそのままだといろいろうまくいかなかったので合わせ技で備忘録メモ。

 

「ALPHA」親テーマを編集するか？子テーマを編集するか？

結論から言うと、親テーマのバージョンアップ時に上書きされると面倒なので子テーマを編集したかったのですが、私の場合はどうもうまくいかなかったので親テーマへの編集にしました。

子テーマの編集をした方が後で楽なので、子テーマの編集で成功（問題なし）した人はそのまま終えてください。

そのため、

1. 子テーマを編集（うまく行ったら終了）
2. （うまくいかないなら）親テーマを編集

といった順序で進めていった方がいいと思います。

 

シンプルに子テーマに記述するとき

ALPHA子テーマの「style.css」に以下の記述を追加します。

.sub .widget ul {
margin: 0;
padding: 0px 20px 0px 0px !important;
list-style: none;
}

※「padding: 0px 20px 0px 0px」20の数値が右余白ですのでお好みで変更してください

これで表示された感じがOKな人はそのまま解決です。
おめでとうございます！

 

続いては、親テーマに記述する方法ですが、その前にどういった現状が起きているのかを書き残しておきます。

 

「ALPHA」右端の余白が無いのがどうしても気になる

「ALPHA」のLusterでウィジェット右端の文字に余白がない現状が起きていました。これはちょっと・・・気になるレベルです。

 

親テーマファイルの「skin」＞「luster」＞「skin.css.php」のファイルを編集します。（「luster」はあなたが使っているデザインを選択してください）

※編集するときは何かあったときに元に戻せるように、メモ帳に一旦コピーしたりバックアップしておくなどしておきましょう。

 

で、WordPress x α（ALPHA）さまサイトを参考に、修正箇所を発見。

本当にここでいいの？前後の説明があまりないけど合ってる？大丈夫？などと不安になりながらも、引き下がる選択肢はないので勇気を出して編集。

参考にしたサイトに従って「padding: 0;」から「padding: 0px 30px 0px 0px;」に変更します。

そうすると、

成功！！！

ヤッター！と思っていたのもつかの間。
別のことに気づきます。

他の（正常に空白がある）ウィジェットの空白にも影響・・・。

これはつらい。

ダメだ、、、、

修正する前はこちら↓

今回の問題は、画像付きのウィジェットは正常に表示されていて、文字のみのウィジェットだけが右端余白が無い（狭い）という状態です。他の正常なウィジェットに影響を及ぼすカスタマイズだったようです。（当たり前ですが・・）

しかし、特定のウィジェットだけをカスタマイズする方法が見あたらないので、微調整して両方のバランスが取れる数値を探すことにしました。

そこがこちら↓

 

20pxで指定してみる

20pxで指定すると、下記のようになります。

 

そして画像付きのウィジェットは？

 

うん、いいじゃないですか。
これでいこう！黄金の数値を発見した！

と思い、親テーマへの記述はやめて、子テーマへの記述をしようとしたわけです。

※参考サイト様が親テーマへの編集を先に書いていたためこの流れになりました。

 

「ALPHA」子テーマに記述したら

子テーマへの記述は冒頭の部分でお話しした通りです。親テーマはいじらず、子テーマのみへの記述です。

.sub .widget ul {
	margin: 0;
	padding: 0px 20px 0px 0px !important;
	list-style: none;
}

ちなみに、記述した内容にメモを付けたものがこちら。

そう、さきほど発見した黄金の数値を指定して編集完了！

と、ここでまたトラブル・・・

黄金の数値を無視した空白度合いに。

さらには、左側にも余白が出るようになりました。

ダメだ、、、、

 

結論、「ALPHA」親テーマへの編集

子テーマへの編集をあきらめて、親テーマへの編集を決意。「ALPHA」のバージョンアップ時には面倒ですが再度記述をしようと思います。

親テーマへの記述で以下のように表示されるようになりました。

 

20pxが黄金数値とか言いながら、最終的には15pxで落ち着きます。笑

コードはこちら

.sub .widget ul {
	margin: 0;
	padding: 0px 15px 0px 0px;
	list-style: none;
}

 

まとめ

冒頭で述べたように子テーマへの編集でOKだという人は、それで終了させた方が楽なのでおすすめです。ただ、私の場合は全体的な空白が生まれてしまったので断念しました。

これは私の場合だけかもしれませんので、子テーマへの編集を優先して試してみてください。

それでもうまくいかない場合は、親テーマの編集で着地したらいいと思います。親テーマのバージョンアップ時には編集したものが上書きされますので、忘れずに記述するようにしてください。

※次回以降のALPHAバージョンアップによって、この部分に修正が入ることもありますので様子を見ながら編集してくださいね。

長い間、気になっていた余白部分がすっきりとして満足です。有益な記事に助けられました。

関連記事

ワードプレスで困ったときに非常に参考になった記事まとめサイト構築で困ったとき、わからないときに参考にさせてもらった記事をまとめます。同じ何回もググってしまうので自身への備忘録を兼ねてのページです…itwo.biz ワードプレステーマ「ALPHA WordPress Theme」を使ってみた感想とレビュー評価当サイトは吉田さんの吉田デザインを利用することが多いです。そのデザインは飽きの来ないシンプルなデザインが特徴です。そんな中、長らく利用してい…itwo.biz