記事内に広告を含みます
この記事には広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
WordPressテーマLION MEDIAのCSSカスタマイズ
ライオンメディアの追加CSSでデザイン変更したい人
ライオンメディアの追加CSSでのカスタマイズまとめを読みたいです
ブログ内の文字サイズ・見出しのデザイン・記事のヘッダーの幅（バイラルメディア風）・目次をおしゃれに・やさしいテイスト・グローバルナビメニューの色を変更したいです
おまけに「サイドバーにプロフィール・YouTubeのチャンネル登録ボタン」も
あいうえおLIFE今日は「お悩み解決に役立つ内容」をお伝えしていきます！信頼性の担保は下記を参照ください。
ライオンメディアの追加CSSでのカスタマイズは「調べてみても欲しいコードがあるのか？」と気になりますよね。ぼくもライオンメディアで「ブログ内の文字サイズ・見出しのデザイン・記事のヘッダーの幅（バイラルメディア風）・目次をおしゃれに」変更したくて、コードを調べるのに困りました…
結論（本記事の内容）
- ライオンメディアのデザイン面での追加CSSカスタマイズまとめ
- 他のテーマでも活用可能な「サイドバーにプロフィール・YouTubeのチャンネル登録ボタン」
目次以降では詳細な理由や具体例を、画像も用いて解説します。
LION MEDIA(ライオン メディア)は、AMP対応・SEO最適化・レスポンシブ・高機能。そして、表示速度が速い、無料のデザイナーズ WordPressテーマです。全体としてメディアサイト向けに作っていますが、個人ブログなどでももちろん利用できますし、カスタマイズ次第で様々なタイプのサイトに利用できるテーマになっています。
引用：LION MEDIA公式サイト（2023年4月時点の情報ではサイトが非公開になっています）
2017年10月27日にFITというWEB製作事務所からリリースされ、有料テーマの上位互換に「THE THOR」があります。THE THORのカスタマイズ記事を【THORに追加CSS】manablog風にカスタマイズ【マナブファン必見】に書きましたので、あわせてどうぞ。
2020/02/28現在はWordPressテーマ「Cocoon 」に乗り換え。2021年10月時点の情報で当サイトは、ライオンメディア→Cocoon→JIN→SWELLへテーマ変更。
ライオンメディアを使用していた当時の記事になります。ライオンメディアのデザイン面での変更は追加CSSで完結しますが、初心者には難しく感じますよね。
「外観→カスタマイズ→追加CSS」にコードをコピペして更新すればOK。
ライオンメディアの追加CSSカスタマイズまとめ
- ブログ内の文字サイズ変更する
- 見出しのデザイン変更する
- 記事のヘッダーの幅を変更する
- 目次をおしゃれにする
- やさしいテイストにする
- グローバルナビメニューの色を変える
- サイドバーにプロフィールを作る
- YouTubeのチャンネル登録ボタンをつける
ライオンメディアではサイドバーにプロフィールを設定できない問題や、YouTubeのチャンネル登録ボタンを設置するいう悩みも解決してきました。
当サイトが2022年10月時点の情報で運営している「SWELL」テーマはデフォルトで、サイドバーにプロフィールウィジェットが設置可能。SWELLはおすすめ！【評判・レビューに忖度なくメリット・デメリットを解説】に詳細は書きました。
ぼくもライオンメディアで運営している当時は、カスタマイズすることで思い通りのデザインになったので楽しく記事が書けていました。
本記事を読むことで「文字サイズ・見出し・ヘッダーの幅・目次」という見た目に関わる追加CSSがわかるので、読者の満足度アップとライバルへの差別化に。
あいうえおLIFE無料テーマでも稼げるコンテンツSEO施策の1つなので、ブログ運営者としてもレベルアップする機会になりますよ。
今日はどうぞ最後まで、お読みくださいね。
タップできるもくじ
ライオンメディアの追加CSSカスタマイズまとめ
ライオンメディアで活用するCSSを6種類、他テーマでも使えるカスタマイズを2種類、合計8種類を解説します。
①：ブログ内の文字サイズ変更
たしかに言われてみればブログ内での文字サイズとか小さいなあとは思ってはいました。あごうさブログさんのコードで変更してみると、グッと視認性アップ。
②：見出しのデザイン変更（CSS）
見出しデザインは記事を読む読者には適当ではマズイ大切な部分。他のブログを見ながら、やはりシンプルがいいなと思い落ち着きました。
2022年10月時点の情報で当サイトが運営する「SWELL」テーマで、見出し変更するカスタマイズをSWELLの見出しをCSSでサルワカデザインに【SANGO風でおしゃれ】に書きました。
③：記事のヘッダーの幅を変更する（バイラルメディア風）
はじめは変わらないかなと思いましたが、やってみるとインパクト大。2022年10月時点の情報で姉妹サイトの「人生を変えた映画・アニメBlog」の記事のアイキャッチも、同じデザインでバイラルメディア風にしています。
④：目次をおしゃれにする
デフォルトでも悪くはなかったですが、全体のデザインに統一性を持たせてくて変更してみました。
見出し3は番号非表示に
「1-1、2-1…」と目次のH3部分が増えていくと、わずらわしいときは非表示にするのも1つのアイデア。
⑤：やさしいテイストにする
サムネイル画像の影を取り、角丸の画像トリミングに変更・投稿ページのタイトル部分背景を黒系から明るいグレーボーダーに変更・サイドエリアの見出しを背景色付きに変更・ランキングページの画像調整（画像サイズを大きく）
引用：cocotsubu
下記のとおりの細かなデザイン変更をしていきます。
- サムネイルまわり
- 投稿ページタイトルまわり
- フッタまわり
- フッタPowered by WordPress非表示
- ヘッダまわり
- ランキングまわり
- カレンダーデザイン
- サイドエリア見出しデザイン
⑥：グローバルナビメニューの色を変える
あいうえおLIFEライオンメディアで運営してると気になる箇所だったので、カスタマイズ。
⑦：サイドバーにプロフィールを作る
冒頭でも伝えましたがライオンメディアではサイドバーにプロフィール設置できないので、SANGO風なデザインで「HTMLとCSS」を紹介してくれています。HTMLコードは「サイドバーのウィジェット」へ、CSSは「追加CSS」へコピペ。
php編集できるなら追加CSS不要なカスタマイズ
難易度はと難しめですが、function.phpの編集と小テーマでの「sidebar.php」が編集できれば可能です。
⑧：YouTubeのチャンネル登録ボタンをつける
あわせて読みたい
チャンネル登録ボタンの「スクリプトコード」を生成するWebページへ「チャンネルID」を入力。
チャンネル登録ボタンのコードを「カスタムHTML」へ
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-layout="full" data-count="default" data-channelid="UCixcCo68uriqY1EPO0RCBhQ"></div>実際に作成した「チャンネル登録ボタン」はブロックエディターでも、任意の場所へコピペすれば設置できます。
まとめ | ライオンメディアカスタマイズの先駆者は多くいる
今日はライオンメディアの追加CSSでデザイン変更したい人に向けて、下記を解説しました。
- ライオンメディアの「文字サイズ・見出し・ヘッダーの幅・目次」のデザインを変更する追加CSSカスタマイズまとめ
- 他のテーマでも活用可能な「サイドバーにプロフィール・YouTubeのチャンネル登録ボタン」
あいうえおLIFE本記事を実践することで「文字サイズ・見出し・ヘッダーの幅・目次」のデザインが変更できるので、読者の満足度アップとライバルへの差別化になりますよ。
追加CSSでのデザイン変更は無料テーマならではの手間ですが、コンテンツSEO施策の1つとしてブログ運営がレベルアップする機会になること間違いなし。
同じFITが製作した上位互換の有料テーマ「THE THOR」とJINのブロックエディターの使用感を比較した【使用者が語る】JINとTHOR【ブロックエディタ】使いやすさを比較！を書きましたので、あわせてどうぞ。
今日は最後までお読みいただき、ありがとうございました！