LION MEDIAを使ってやさしいサイトにする方法 │ ここつぶ

1. かっこいいメディア系ブログテーマ「LION MEDIA」
2. ダッシュボードの外観からの主な調整
- 2.1. ダッシュボード→外観→カスタマイズでの調整
3. テーマの編集で簡単カスタマイズ！
4. ランキングページの作成方法

かっこいいメディア系ブログテーマ「LION MEDIA」

このブログは前回もお話したことがありますが、今現在LION MEDIAを使用しています。
無料テーマとしてはすごく評判のいいテーマですね。

デザインをカスタマイズしなくてもカッコ良いサイトが出来上がります。
しかし、優しかったり、可愛いイメージのブログにしたい方には少しカッコよすぎる印象がありますね。
今回はこのLION MEDIAをDEMOサイト程度の優しいイメージのサイトにカスタマイズする方法をご紹介いたします。
子育てや美容、フード系のブログなんかにぴったりなんじゃないかなぁと思います！

DEMO

こちらよりLION MEDIAをダウンロード
※子テーマも必ずダウンロードして適応させてください！

ダッシュボードの外観からの主な調整

ダッシュボード→外観→カスタマイズでの調整

基本設定 →最初に開くメニューを選択

画像１、デフォルト表示をメニューにする
デフォルトは検索フォームが表示されているのでメニューに変更しました。
メニューが表示されるとサイトっぽくなりますね！

メニューには固定ページやカテゴリ、ランキングページなどを表示させることができます！
メニューを新規作成します。

項目を追加ボタンでメニューの項目を編集できます！

デザインスキン設定

ベースデザインをLIGHTにする。
ヘッダやフッタが明るい色ベースになり優しい印象になります！

メインカラーを#63ceceにする
※こちらはお好みのカラーに調整してください。

テーマの編集で簡単カスタマイズ！

外観→テーマの編集にある、style.cssのページ最下部に以下コードをコピー＆ペーストしてください。
コード中の#63ceceをお好みのカラーに変更してください。
好みのカラーに変更する際、合わせて#eef7f7も変更してください。
こちらはメインカラーと同系色の淡い色を選択するとサイトに統一感がでますよ♪

こちらのコードの主な調整内容

・サムネイル画像の影を取り、角丸の画像トリミングに変更

・投稿ページのタイトル部分背景を黒系から明るいグレーボーダーに変更

・サイドエリアの見出しを背景色付きに変更

・ランキングページの画像調整（画像サイズを大きく）

/*///////////////////////////////////////////////// //下記ユーザーカスタマイズエリア /////////////////////////////////////////////////*/


/* デザインカスタマイズここから */

body {
  font-family: "Noto Sans Japanese", "Roboto Slab", "sans-serif", "Lato", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "ＭＳ Ｐゴシック", "MS PGothic";
  color: #444;
}


/* サムネイルまわり */

.u-txtShdw {
  text-shadow: none;
}

.eyecatch {
  border-radius: 6px;
}


/* 投稿ページタイトルまわり */

.singleTitle {
  background-image: none!important;
}

.singleTitle::before {
  background-color: #f9f9f9;
  background-image: linear-gradient(#f3f3f3 50%, transparent 50%, transparent);
  background-size: 10px 10px;
}

.heading.heading-singleTitle {
  color: #444;
}


/* フッタまわり */

.t-light .l-footer {
  background: #eef7f7;
}

.widget .tag-cloud-link {
  background-color: #fff;
}


/* フッタPowered by WordPress非表示 */

.copySns__copyInfo {
  display: none;
}


/* ヘッダまわり */

.globalNavi__list {
  margin: 0 auto;
}

.imgListWidget__item img {
  border-radius: 6px;
}

.rankingPage__item:before {
  border-radius: 6px 0 0 0;
}


/* ランキングまわり */

.eyecatch.eyecatch-ranking {
  width: 200px;
}

.rankingPage__contents {
  width: calc(100% - 220px);
}

.rankingPage__item {
  border-bottom: 1px dotted #ccc;
  padding-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .eyecatch.eyecatch-ranking {
    width: 140px;
  }
  .rankingPage__contents {
    width: calc(100% - 160px);
  }
  .rankingPage__item {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
}


/* カレンダーデザイン */

.widget .calendar_wrap tbody a {
  background: #63cece;
}

.l-sidebar .heading.heading-widget::before, .heading.heading-widget::after {
  border-bottom: none;
}


/* サイドエリア見出しデザイン */

.l-sidebar .heading.heading-widget {
  background-color: #eef7f7;
  color: #63cece;
  padding: 10px;
  font-size: 1.6rem;
}