LION MEDIAの設定方法:タイトルロゴの拡大・サブタイトルのサイズ変更

LION MEDIAの設定方法:タイトルロゴの拡大・サブタイトルのサイズ変更

先日、本ブログはライブドアブログからWordPressに引っ越しました。
無事、SSL化も完了です!

その際、デザインテーマには人気のLION MEDIAを選んだところ、
凄く良い…んだけど痒いところに手が届かない感じがありました。

今回はLION MEDIAのカスタマイズについて、備忘録的に紹介します。
取り上げるカスタマイズテーマは「タイトルロゴの拡大」と「サブタイトルのフォントサイズ変更」です。

Advertisement

LION MEDIAとは?

LION MEDIAは無料公開されているWordPressのテーマです。
デザイン性が高く、SEO対策もしやすいことに加え、軽いという3拍子揃っており大人気。

以下のサイトでダウンロードできます。
https://fit-jp.com/theme/theme_download/

ダウンロードする場合は、「無料テーマ」と「子テーマ」をダウンロードしてください。
「無料テーマ(親テーマ)」がデザインデータ、「子テーマ」が編集用データです。
従い、「子テーマ」を編集していきます。

タイトルロゴの拡大方法

LIONE MEDIAを使った方、あれ、タイトルロゴ小さくない!?と思いませんでしたか?
しかも、カスタマイズ項目をいじれば設定できると思いきやできず。
ここで諦めた方も多いのではないでしょうか。

しかし、CSSで編集することが可能です。
親テーマのCSSを探っていくと、.siteTitleから始まる行があります。

これがタイトルロゴ(あるいはタイトル文字)を設定する行ですので、
子テーマのユーザーカスタマイズエリアにて.siteTitleの上書きをしていきます。



以下のコードをユーザカスタマイズエリアに追記の上、●の箇所にお好みの数値を入れてください。
オススメ値はheight:40~60px、margin-top:10~20pxです。

a.siteTitle__link
{
height: ●px;
}
.siteTitle {
height: ●px;
margin-top: ●px;
}
img.siteTitle__img
{
max-height:●px;
}

ここまでやると、ロゴはLION MEDIAのスタイルを崩さない範囲内で、
最大サイズまで設定することができます。しかし、ここで問題が。
スマホ版の個別記事ページが酷いことになっている。

これは、siteTitleのmargin-topを変更した影響ですので、
スマホ版のみmargin-topをさらに変更します。
加えて、paddingというパラメータを追記して数値を入力すると、
個別記事ページのタイトル背景のサイズを変更することができます(~300px)。

先述のとおり、ユーザカスタマイズエリアに追記して編集ください。

@media only screen and (max-width: 767px){
.singleTitle{
margin-top:●px;
padding:●px 0;
}
}

以上で完成です!
自分のサイトを確認する際は、キャッシュを削除した上で更新してください。

なお、paddingをPC版に適用すると、PC版個別記事ページのタイトル背景を変更することができます。

サブタイトルのフォントサイズ変更

タイトルロゴは大きくなりました。
しかし、サブタイトルのサイズも大きくしたい

というわけで、以下のコードを追記・編集します。
siteTitle__subがサブタイトルの記述設定です。
●の数値は記述の長さにもよりますが、1.4~2.0くらいが良いでしょう。

.siteTitle__sub {
font-size: ●rem;
}

以上です。備忘録的な感じでしたが、ロゴサイズ等でお困りの方、是非参考にしてください。