今日はWordPressで無料テーマ「LionMedia」を使っている方で、他の人と少し差別化を図りたい人向けの記事をお送りします。
＜関連記事＞
過去記事：<超初心者向け>ワードプレスでサイトを立ち上げるまで
過去記事：＜超初心者向け＞ワードプレスでサイトを立ち上げるまで Part2
過去記事：＜超初心者向け＞ワードプレスでサイトを立ち上げるまで part3
過去記事：＜恐怖＞「ワードプレスで画像が表示されない！」ときの対処法
WordPressでブログを立ち上げている方は、まず最初に無料テーマを使うと思います。
私が使っているのは「LionMedia（ライオンメディア）」です。
出典元：LionMedia（ライオンメディア）公式ホームページ （2018年10月29日引用）
「LionMedia（ライオンメディア）」はとても優秀で、最初からSEO対策、AMP対応されているなど、初心者でもあっという間にキレイで洗練されたホームページを作ることができてしまいます。
ところが、優秀であるが故に、多くの人が使っているため、差別化がしにくくなってしまっています。
そんなあなたが、もう少し個性を出したいと思ったら、ホームページのトップ画面に自分の個性ある画像を表示させてみてはいかがでしょう。
トップページにヘッダー画像をつけよう
「LionMedia」ではデフォルトトップページにはタイトルを記載し、色を変更するくらいしかありません。
これはこれでシンプルでわかりやすいページになるのですが、少し個性がないですよね。
どうせなら、タイトル下に自分のお気に入り画像やブログテーマに合った画像をいれたいと思いませんか。
それがこれです。
では、これを設定するためにどうすればいいか。
追加CSSの設定
残念ながら「LionMedia」のデフォルト機能では、簡単にトップページにヘッダー画像をつけることはできません。
でも、以下の方法なら簡単にできます。
追加CSSを設定するのです。
方法はそんなに難しくありません。
（１）「外観」→「カスタマイズ」→「追加CSS」を選びます。
（２）下記の画面にある欄に、CSSを記載します。
記載するCSS
/*ヘッダー画像*/
.key {
display: block;
height: 340px; /*画像の高さに合わせて設定*/
background: url(背景画像のURL) no-repeat center center;
background-size: cover;
opacity: 0.8; /*ここはお好みです*/
}
@media only screen and (max-width: 767px){
.key{
height: 200px; /*モバイル用に、高さを小さめに*/
}
}
.key__list {
display:none;
}
→5行目の（背景画像のURL）は、あらかじめ保存をした画像をメディアから、表示させたい画像を選ぶと右に「ファイルURL」と記載されたところがあるので、それをコピーして貼り付けてください。
TOPピックアップ記事を”有効”にすることを忘れずに
追加CSSを設定しても「あれ？表示されないんだけど」と思ったあなた。
私と同じです。
実は追加CSSを設定してもなぜか表示されず、なんでかなーと悩んでいたところ見つけました。
「TOPピックアップ記事」を”無効”から”有効”にしないと表示されないんです。
つまり、このヘッダー画像は「TOPピックアップ記事」として認識されているわけなんですね。
ロリポップ！ユーザはWAFを一時的に無効に！
ちなみに、追加CSSを編集するときは一時的にWAF（Web Application Firewall）の設定を無効にしてください。
そうでないと、エラーになってしまいます。
このWAFは「LionMedia」のカスタマイズをするとき、いろいろな局面で無効化しておかないと編集自体ができないことが多いです。
かといって、これを無効のままにしておくのはお勧めしません。
これはセキュリティ対策なので、基本は”有効”にしておき、編集をするときや”エラー”が出たときに”無効”としてみるというのが正解でしょう。
まとめ
追加CSSの設定
TOPピックアップ記事を”有効”に
WAF設定を一時的に無効化
さあ、これでトップページにヘッダー画像が表示されました！！
やってみると意外と簡単ですね！
これであなたのブログもあなた色が出せますね！
