WordPressテーマ「LION MEDIA」カスタマイズ #04いただいた質問に答えてみる

今日のエントリーは先日いただいたLION MEDIAに関するカスタマイズの質問に答えてみます。
※個人が試しているものなので、環境によってはうまくいかないかもしれません。カスタマイズは自己責任で・・・

いただいた質問は以下のような感じです。
（少し記載方を変更しています）

1.各投稿ヘッダー背景画像を固定したい
2.ブログタイトルのスペースの縦幅を広くしたい
   ブログサブタイトルの文字を大きくしたい
　ブログタイトル画像を大きくしたい
3.タイトルスペース右上にあるSNSアイコンのカラーの変更方法
4.サイドバーのDaily Rankingのアイコン、イメージ無しにする方法

今回は1〜3について。４はこのサイトではプラグインを使っていて、LION MEDIAのランキング機能は使っていません。どんな感じかは自分のための備忘録を含め次回書きます！

目次

CSSは子テーマではなく追加CSSへ

今回のカスタマイズですがCSSについては全て、テーマのカスタマイズから追加できる、追加CSSに書きました。
子テーマのstyle.cssへの記載で動くか試したんですが、動きませんでした。理由は相変わらず不明。まあ、追加CSSは手軽なのもいいですね。
なんとなくですが動的に変化する可能性のある要素に対するCSSは子テーマCSSではダメな感じがします・・・

今回いただいたご質問のうち、1の項目を行うためには親テーマのphpファイル（具体的にはsingle.php）を触る必要がありましたが、あとは追加CSSにCSSを設定していけば、たぶんできると思います。

①各投稿ヘッダー背景画像の固定方法

もともとLION MEDIAの各投稿エントリーのヘッダーは「アイキャッチ画像」が充てられるようになっています。（アイキャッチ画像がない場合は事前に登録しているNO IMAGE画像が出ます）
これを同じ一つの画像で固定する、ということですので、CSSもそうですが、親テーマのsingle.phpも少しさわってみることにしました。

<div class="singleTitle">
    <div class="container">
      <div class="singleTitle__heading">
      <!--・・・個別エントリータイトル等・・・-->
       </div>
    </div>
  </div>

このsingleTitleというクラスのbackgroundにアイキャッチ画像が使われているんですね。ですので、今回はsingle.phpで書かれているこのclassを少し変え、cssも変えてみます。

single.phpのHTML?を以下のように変更

single.phpを「singleTitle」で検索すると以下のようなコードが見つかるので、任意のクラス名へ変更。 
<div class="singleTitle__fixed">
    <div class="container">
      <div class="singleTitle__heading">
      <!--・・・個別エントリータイトル等・・・-->
       </div>
    </div>
  </div>

phpファイルを編集したら、FTPでアップロードします。
もちろんWPダッシュボードのtheme editorで編集してもOKだと思います。

CSSは以下のように追加

先ほど追加したclassに対するCSSを追加していきます。 background-imageに、固定表示したい画像のURLを書きます。 
.singleTitle__fixed {
    background-image: url(https://xxxx/xxx.jpg);
}
.singleTitle__fixed {
    position: relative;
    padding: 30px 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.singleTitle__fixed::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
　　　　　　　　background-color: rgba(255,255,255,0.7);/*若干画像の色を薄く*/
}
.singleTitle__fixed::after {
    content: "";
    display: block;
    clear: both;
}

②ブログタイトル周りを変える

次にブログタイトル周りを変えてみます。
LION MEDIAってデフォルトのままだとブログタイトルが目立たないなあとは感じていました。こちらはCSSを変えることでたぶん、対応可能になります。

ブログのロゴサイズを大きくするには

もともと、LION MEDIAではロゴのサイズは50pxに設定されていました。ここをCSSで変えます。ちなみにロゴのサイズだけを大きくしてもヘッダーの大きさが変わらないとロゴが見切れてしまうので、ヘッダー全体の縦幅も広くする必要があります。
今回はサイトタイトルの高さmax-heightを変えます。

.siteTitle__img,.siteTitle__logo{
    max-height:80px;/*画像の高さ*/
}
今回、こんな仮のタイトル画像を作って高さ80pxで表示してみています。

ブログタイトルのスペースの縦幅を広くするには

ヘッダーエリアのもともとの高さは70px。
（ロゴが50pxでエリアは70px＝20pxの差分はブラウザ上部からの余白としてmargin-top:20px;となっていました。ここは変えていません）
この高さを変えるには以下のクラスを変更します。

.siteTitle,.siteTitle__link{
	  height:100px;
}
/*他にもクラスあるかも・・・*/

.siteTitle__sub{
	display:none;/*サイトの説明に対する指定、非表示にしてます*/
}

.menuNavi{
   margin-top:20px;/*ヘッダーが高くなったことで浮いてしまったのでとりあえずトップから20px下げてみた*/
}

#menuNavi__menu{
	  background-color:#FFFFFF;/*三本の線のナビゲーション背景も白にしてみた。aに対する変化がなくなってしまったので調整要な気もする。*/
}

ブログサブタイトルの文字を大きくするには

続いてブログサブタイトル、ですがこちらについても同じくCSSです。クラスは「siteTItle_sub」なので、このクラスに対してfont-size:**px;という感じに指定すると好みのサイズにできると思います。

.siteTitle__sub{
	font-size:20px;
}
こんな感じで大きくなります。

③タイトルスペース右上にあるSNSアイコンのカラーの変更方法

これもCSSですが、以前の投稿にちらっと書いていました。ヘッダーの色を無理やり白にしているんですが、そうするとヘッダーの右側にあるSNSアイコンのデフォルトが白のため、見えなくなってしまうことを解決します。
SNSアイコンのクラスは「menuNave__link」ですので、CSSで色指定します。


/*ヘッダーカラー・ナビアイコンのカラー*/
.l-header{background-color:#FFFFFF;}
.menuNavi__link{color:#191919;}
WordPressテーマ「LION MEDIA」カスタマイズ #03子テーマCSSがうまく動かない…そんな時は

まとめ

もっぱらGoogleChromeのディベロッパーツールを使っています。

というわけで、しばらく上に書いたカスタマイズをした状態で動かしてみます。

子テーマCSSが効かない理由はわからずじまいなので、いずれ解明したいと感じています。
本当は子テーマCSSで完結したいのですが、うまくいかずに追加CSSを使っている状態だと、自分で書き足したCSSが２箇所に存在することになり、よくわからなくなってしまいそうなんですよね。

ま、とは言ってもそこまでカスタマイズに情熱があるわけではないので、いつになることか・・・とは思いますが。。

久しぶりにカスタマイズ記事を書くきっかけとなった質問をいただきありがとうございました！
ご質問４については別途書きますねー！

メモと考察カテゴリの最新記事