メニュー

【WordPress】ライオンメディアカスタマイズまとめ【追加CSS】

ライオンメディア

ライオンメディアの追加CSSでデザイン変更したい人

ライオンメディアの追加CSSでのカスタマイズまとめを読みたいです。

ブログ内の文字サイズ・見出しのデザイン・記事のヘッダーの幅(バイラルメディア風)・目次をおしゃれに・やさしいテイスト・グローバルナビメニューの色を変更したいです。

おまけに「サイドバーにプロフィール・YouTubeのチャンネル登録ボタン」も。

あいうえおLIFE

今日は「お悩み解決に役立つ内容」をお伝えしていきますね。

ライオンメディアの追加CSSでのカスタマイズは「調べてみても欲しいコードがあるのか?」と気になりますよね。

ぼくもライオンメディアで「ブログ内の文字サイズ・見出しのデザイン・記事のヘッダーの幅(バイラルメディア風)・目次をおしゃれに」変更したくて、コードを調べるのに困りました…

おまけに「サイドバーにプロフィール・YouTubeのチャンネル登録ボタン」の情報収集にも時間を費やす日々。

本記事の結論
  • ライオンメディアのデザイン面での追加CSSカスタマイズまとめ
  • 他のテーマでも活用可能な「サイドバーにプロフィール・YouTubeのチャンネル登録ボタン」

本記事では詳細を解説していきます。

LION MEDIA(ライオン メディア)は、AMP対応・SEO最適化・レスポンシブ・高機能。そして、表示速度が速い、無料のデザイナーズ WordPressテーマです。全体としてメディアサイト向けに作っていますが、個人ブログなどでももちろん利用できますし、カスタマイズ次第で様々なタイプのサイトに利用できるテーマになっています。

引用:LION MEDIA公式サイト

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カスタマイズまとめ

  1. ブログ内の文字サイズ変更する
  2. 見出しのデザイン変更する
  3. 記事のヘッダーの幅を変更する
  4. 目次をおしゃれにする
  5. やさしいテイストにする
  6. グローバルナビメニューの色を変える
  7. サイドバーにプロフィールを作る
  8. YouTubeのチャンネル登録ボタンをつける

ライオンメディアではサイドバーにプロフィールを設定できない問題や、YouTubeのチャンネル登録ボタンを設置するいう悩みも解決してきました。

当サイトが2022年10月時点の情報で運営している「SWELL」テーマはデフォルトで、サイドバーにプロフィールウィジェットが設置可能。

SWELLはおすすめ!【評判・レビューに忖度なくメリット・デメリットを解説】に詳細は書きました。

ぼくもライオンメディアで運営している当時は、カスタマイズすることで思い通りのデザインになったので楽しく記事が書けていました。

本記事を読むことで「文字サイズ・見出し・ヘッダーの幅・目次」という見た目に関わる追加CSSがわかるので、読者の満足度アップとライバルへの差別化に。

無料テーマでも稼げるコンテンツSEO施策の1つなので、ブログ運営者としてもレベルアップする機会になりますよ。

今日はどうぞ最後まで、お読みくださいね。

記事を書いた人

あいうえおLIFE笑顔
  • 「副業スキルで複数収入」がテーマ
  • 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQモバイル・複数ASP愛用者
  • 2サイト合計最高月間1万5,000PV
  • ブログ収益:3万〜4万円 / 月

記事を書いた人

あいうえおLIFE笑顔
  • 「副業スキルで複数収入」がテーマ
  • 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQ・ASP愛用者
  • 2サイト合計最高月間1万5,000PV
  • ブログ収益:3万〜4万円 / 月
タップできるもくじ

ライオンメディアの追加CSSカスタマイズまとめ

Background vector created by rawpixel.com - www.freepik.com

ライオンメディアで活用する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>

実際に作成した「チャンネル登録ボタン」はブロックエディターでも、任意の場所へコピペすれば設置できます。

まとめ | ライオンメディアカスタマイズの先駆者は多くいる

ライオンメディアカスタマイズの先駆者は多くいる
Background vector created by macrovector - www.freepik.com

今日はライオンメディアの追加CSSでデザイン変更したい人に向けて、下記を解説しました。

  • ライオンメディアの「文字サイズ・見出し・ヘッダーの幅・目次」のデザインを変更する追加CSSカスタマイズまとめ
  • 他のテーマでも活用可能な「サイドバーにプロフィール・YouTubeのチャンネル登録ボタン」
あいうえおLIFE

本記事を実践することで「文字サイズ・見出し・ヘッダーの幅・目次」のデザインが変更できるので、読者の満足度アップとライバルへの差別化になりますよ。

追加CSSでのデザイン変更は無料テーマならではの手間ですが、コンテンツSEO施策の1つとしてブログ運営がレベルアップする機会になること間違いなし。

同じFITが製作した上位互換の有料テーマ「THE THOR」とJINのブロックエディターの使用感を比較した【使用者が語る】JINとTHOR【ブロックエディタ】使いやすさを比較!を書きましたので、あわせてどうぞ。

今日は最後までお読みいただき、ありがとうございました!

スポンサーリンク

タップできるもくじ