くるみる

くるみる
  • WordPress
  • ライティング・編集
  • ブログ
  • プロフィール
  • お問い合わせ
    • Twitter
    • Instagram
  • WordPress
  • ライティング・編集
  • ブログ
  • プロフィール
  • お問い合わせ
  • Twitter
  • Instagram
  • HOME
  • BLOG
  • WordPress
  • WordPress無料テーマ「LION MEDIA」に他テーマから移行したときのカスタマイズまとめ

WordPress無料テーマ「LION MEDIA」に他テーマから移行したときのカスタマイズまとめ

2018年9月2日

  • WordPress
  • テーマカスタマイズ
  • Tweet
  • このエントリーをはてなブックマークに追加
この記事のURLとタイトルをコピーする

WordPressのテーマは無料でも優秀なテーマが数多く配布されています。

少し前までは日本語のテーマを探すだけでも苦労したのに、便利な世の中になったものです。

今回は7月から新規に立ち上げたサイトにLION MEDIA[ライオン メディア]というテーマを適用してみました。

【参考】AMP対応・SEO最適化・レスポンシブ・高機能の無料WordPressテーマ│LION MEDIA[ライオン メディア]

ようやくしばらく運用できる程度にCSSを調整できたので、カスタマイズしたポイントと内容をまとめておきます。

スポンサーリンク

目次

  • 1 LION MEDIAは子テーマまでダウンロードして適用する
  • 2 テーマカスタマイザー設定で気をつけたところ
    • 2.1 基本設定 [LION用]
      • 2.1.1 アーカイブページの抜粋文字数:80文字
      • 2.1.2 最初に開くメニューを選択:Gナビメニューに変更
    • 2.2 基本機能設定 [LION用]
      • 2.2.1 TOPカテゴリ最新記事ボックス:有効
    • 2.3 デザインスキン設定とカテゴリーの編集
  • 3 追加CSSに記述した内容
    • 3.1 記事中の画像表示の調整
    • 3.2 リストで記載したときだけ文字が小さくなってしまうのを調整する
    • 3.3 リンクをリンクっぽく表示する
    • 3.4 スマートフォン表示のCSS
      • 3.4.1 筆者プロフィール
        • 3.4.1.1 最新の投稿

LION MEDIAは子テーマまでダウンロードして適用する

WordPressのテーマを使う時は、必ず子テーマがあれば子テーマもダウンロードしましょう。

LION MEDIAはユーザー名とメールアドレスの登録でダウンロードできるようになっています。

LION MEDIA 子テーマのダウンロード

上記サイト内にある「無料テーマダウンロード」または「子テーマダウンロード」ボタンを押して会員登録をし、子テーマまでダウンロードします。

親と子の両方のテーマをWordPressにアップロードして、子テーマを有効にします。

子テーマ適用までは他のテーマと変わらない手順でできます。

テーマカスタマイザー設定で気をつけたところ

子テーマを有効化したら、まずテーマカスタマイザーで設定できるところは設定しちゃいます。

テーマカスタマイザーへのリンクは上部にあります。

Cstmz

基本お好みで設定する部分になりますが、一般的にこの値にしたほうがよさそうなポイントだけ挙げておきます。

基本設定 [LION用]

アーカイブページの抜粋文字数:80文字

13インチMacBookでChromeブラウザを最大化したときに抜粋文字が3行で折り返す程度にしておきました。

最初に開くメニューを選択:Gナビメニューに変更

記事数が少ないうちはグローバルナビでメニューを見せてこのサイトは主に何について書いているかを見せたほうがいいと思い変更しました。

記事が多くなったらdefaultの検索メニューに切り替えてもいいかもしれないですね。

基本機能設定 [LION用]

TOPカテゴリ最新記事ボックス:有効

TOPカテゴリ最新記事ボックスを有効にすることで、TOPページの新着記事の並びのあとにカテゴリ別の最新記事を1記事ずつ表示することができます。

Cat new articles

カテゴリを細かく分けて記事を書いている場合は有効にしておくと、だいたいどんな記事がこのサイトでは読めるのか読者が見当をつけることができます。

デザインスキン設定とカテゴリーの編集

デザインスキンの設定でユーザー定義カラーを5色まで設定できます。

ここで設定したカラーを憶えておいて、カテゴリーの編集画面でカテゴリーごとに色で分類することができます。

Cate hen

追加CSSに記述した内容

記事中の画像表示の調整

LION MEDIAのテーマの初期設定をそのまま使うと画像の高さが固定になっています。

大きい画像を使用してRetinaディスプレイ対応などを既に施している場合縦横比が歪んでしまうので、記事内の画像に対してCSSを書き加えました。

/*記事内の画像の歪みをなくす*/

.content img{
max-width: 100%;
height: auto;
}

リストで記載したときだけ文字が小さくなってしまうのを調整する

目次のデザインに引っ張られてリスト化した記述の文字だけ小さく表示されているので、通常本文と同じ文字の大きさに合わせました。

わたしは16pxでpxで強引に文字の大きさを設定していますが、emで調整してもよいと思います。

/*リスト内の文字のテキストの大きさを通常フォントと合わせる*/

.content ul li{
font-size:16px;
}
.content ol li{
font-size:16px;
}

リンクをリンクっぽく表示する

初期設定ではリンク色がテーマカラーに合わせた色になっていて、かつ下線が引かれていません。

リンク部分は青い下線で表現されていると「あ、ここはリンクが張っているんだ」とわかりやすくなるため、記事中のリンクは常に青でアンダーラインが引かれている状態で表示するために調整しました。

できればリンクをマウスオーバーしたときに出てくるテーマカラーのボトムラインも消したいんですが、とりあえずパッと見は思い通りになりました。

/*リンクを常時青い下線表示にし、リンクをマウスを近づけたら文字を太くする*/

.content a {
color: #0645ad;
text-decoration: underline;
}
.content a:hover{
font-weight:bold;
text-decoration: none;
}

スマートフォン表示のCSS

スマートフォン表示については全体的に文字が小さすぎるのでPC表示と同じく16px設定にし、重要な部分とのメリハリをつけるため通常本文の太字表示をやめました。

またH2見出しがPCと同じではフォントが大きすぎたのでPCより若干小さめに設定しました。

スマートフォン表示のときでもあらためて画像の高さが固定されることを防ぐためにCSSを追加しています。

/*ブラウザの横幅が480px以下のとき*/

@media screen and (max-width: 480px) {

/*文字の大きさ16px、太字をやめる、行間は1.5em*/	
p {
width: 100% ;
font-size : 16px;
font-weight:normal;
margin : 0 0 1.8em 0 ;
line-height : 1.5 ; 
}

/*h2見出しの文字の大きさを整える*/
.content h2 {
font-size : 1.375em;
}

/*スマホで見た時の画像の高さの歪みを調整*/	
img{ 
height: auto;
}

}

上記内容全てを適用したい方は、以下をコピーしてLION MEDIAを有効化しているサイトの追加CSSにペーストして適用してみてください。

/*記事内の画像の歪みをなくす*/
.content img{
max-width: 100%;
height: auto;
}

/*リスト内の文字のテキストの大きさを通常フォントと合わせる*/
.content ul li{
font-size:16px;
}
.content ol li{
font-size:16px;
}

/*リンクを青い下線にする*/
.content a {
color: #0645ad;
text-decoration: underline;
}
.content a:hover{
font-weight:bold;
text-decoration: none;
}

/*ブラウザの横幅が480px以下のとき*/
@media screen and (max-width: 480px) {

/*文字の大きさ16px、太字をやめる、行間は1.5em*/	
p {
width: 100% ;
font-size : 16px;
font-weight:normal;
margin : 0 0 1.8em 0 ;
line-height : 1.5 ; 
}

/*h2見出しの文字の大きさを整える*/
.content h2 {
font-size : 1.375em;
}

/*スマホで見た時の画像の歪みをなくす*/	
img{ height: auto;
}

}

今回の設定を以下のサイトに設定しています。

【関連】派遣社員からフリーランスへ│派遣社員で副業から始めてフリーランスになろう

よかったら記事の中身も読んでみてくださいね。

筆者プロフィール

栗原 ひろみ
栗原 ひろみ
WordPressを使用したWebサイト運営・制作、記事コンテンツの編集・フリーライターをやっています。得意ジャンルはグルメ、節約、旅、プロ野球、ガジェット。
⇒プロフィール詳細
最新の投稿
  • 2020.11.04書評「ひとりは勇気が持てない」と躊躇する人に『ひとり酒、ひとり温泉、ひとり山』が届いてほしい。
  • 2020.09.14書評ブログ運営の正解がわかる!『ブログ術大全』
  • 2020.05.05書評withコロナ時代に役に立つ!「不調を治す!リンパストレッチ&マッサージBook」
  • 2020.04.13仕事道具在宅勤務になって本当に便利に使っているグッズ2020

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でひろみ@WEBサイト運営・ライターをフォローしよう!

Follow @kurumiru_work
  • Tweet list
  • このエントリーをはてなブックマークに追加
スポンサーリンク

関連記事

  • テキストエディタ

    Windowsでブログを更新するために使っているソフトまとめ

    2016年1月21日

  • MacでWordPressブログを更新するためのアプリまとめ

    2018年10月16日

  • テキストエディタ

    functions.phpのエラー回避!PHPファイル更新用の無料テキストエディタ

    2014年6月22日

  • WordPressテーマ「New Standard」で個人事業主サイトを作成するポイント

    2018年2月17日

前の記事「人生が変わる『オンラインサロン』超活用術」で人生変えてみない?
次の記事プラグイン「Advanced Ads」は記事中の広告表示を細かく設定できる
記事一覧へ

検索

カテゴリー

  • Android (2)
  • PR・イベント (2)
  • WordPress (18)
  • おすすめアプリ (5)
  • コラム (4)
  • スケジュール管理 (7)
  • スマホ (1)
  • ライティング・編集 (10)
  • 仕事道具 (10)
  • 手帳・ノート (11)
  • 文房具 (1)
  • 書評 (27)

キーワード

Adsense (1) Dynalist (2) Facebook (1) Google (3) ICレコーダー (1) Instagram (1) iPhone (2) Mac (7) note (2) PowerPoint (2) PR (1) Skitch (2) SNS (1) ToDo (5) Windows (4) Wunderlist (2) するぷろ (1) アフィリエイト (2) カナダ (1) カレンダー (4) コミュニティ (2) サンクチュアリ出版Webマガジン (3) シニア向け (2) スクリーンショット (2) スタンプ (2) タグを削除: サンクチュアリ出版Web サンクチュアリ出版Webマガジン (1) テキストエディタ (2) テーマカスタマイズ (4) トラベラーズノート (2) ブログ (4) プログラミング (1) マーケティング (3) ライティング (2) リヒトラブ (2) 介護 (1) 初心者 (1) 動画 (2) 動画編集 (1) 名刺 (2) 天気 (2) 寄稿 (1) 広告 (1) 手帳 (1) 書評 (3) 画像編集 (2)

人気記事

  • 【シニア向け】Androidスマホを使いやすく設定変更しよう。
  • Dynalistを日記やToDoアプリとして利用する方法
  • ブログよりnoteに書くほうがいい、コラム。
  • 3年日記帳に万年筆、ペンを走らせる快感で楽しく記録する。
  • 「ジェーン・スー生活は踊る」の先輩ライターさんのお悩みに心が震えた
トップへ戻る
  • ホーム
  • 運営サイト
  • サイトマップ
  • 免責事項
© 2018 くるみ