【LION MEDIA】 テーマのCSS構成を紹介、拡張性高くデザインを変更したい方は必見!

Sponsor Link








【LION MEDIA】 カスタマイズ応用編(テーマのCSS構成)、デザインを変更したい方は必見!

少し上級者向けの記事になります。

LION MEDIAのデザインを変更したいと思っている方で、CSSに関連するLION MEDIAのテーマ構成についてご説明します。

CSSの技術は知っている(もしくは、インターネットで調べながら理解できる方であればOK)けど、LION MEDIAテーマのCSS構成の内容がどうなっているのか分からないという方には必見!の情報です。

CSSは簡単にも関わらずデザインと深く関連しており、素晴らしい技術だと思います。皆様のサイトにおいても、本記事を参考に色々と変更してみてください。

 

LION MEDIAのCSS確認

CSS(カスケーディング・スタイル・シート)は、HTMLと組み合わせて使用する言語です。HTMLで各要素の意味や情報構造を定義し、CSSでデザインを装飾します。ページを構成するコンテンツ部分とデザインを別々に定義しようという考えです。

このCSSですが、LION MEDIAにも存在します。

CSSの定義確認ですが、

確認①:テーマのインストール物件に含まれるCSSを直接確認
確認②:WordPressのテーマ編集でCSSの内容を確認

の2つの方法があります。

 

確認①の場合、LION MEDIAの親テーマをインストールした物件(”lionmedia-200.zip”)の中を直接確認します。

\lionmedia-200.zip\lionmedia\style.css

 

確認②の場合は、テーマ編集から親テーマ(LION MEDIA)を選択してください。

 

LION MEDIAのCSS内容

LION MEDIAのCSS内容について説明します。CSSはデザインに深く影響しますので、変更する場合は、必ずバックアップを行うなど、慎重な作業をお願いします!CSSの変更を間違うとデザインが崩れ、場合によっては修復不可能になりますので、十分注意してください。

CSSを変更すれば当然画面に影響する訳ですが、その中でも、特に使用頻度が高いと思われる重要な項目について説明します。記載する内容は親テーマの情報となりますが、親テーマの内容にデザイン定義を追加する形が基本となりますので、参考にしてください。

 

CSS変更時の注意点

あと、これだけは絶対に行わないでください。

”LION MEDIAの親テーマのCSSを直接編集は絶対に行わない”

デザインを変更する場合の追加/変更のCSS定義は、必ず、以下の”LION MEDIAの追加CSS”から実施してください。親テーマの変更はお勧めできません!!

 

画面ヘッダー部分に関する定義

/*ヘッダー*/
.l-header{
position:relative;
width:100%;
background:#f0b200;
}
.l-header::after {
content: “”;
display: block;
clear: both;
}
/*エキストラ*/
.l-extra{
position:relative;
background:#191919;
}
.l-extraNone{display:none;}
/*ラッパー(メイン&サイドバーを囲む要素)*/
.l-wrapper {
position:relative;
display: flex;
width:1100px;
max-width:95%;
margin: 0 auto;
}

 

画面フッター部分に関する定義

 /*フッター*/
.l-footer {
position:relative;
width:100%;
background:#191919;
}

 

サイトタイトル(ヘッダーと同じ)に関する定義

/*サイトタイトル(ヘッダーで使用)*/
.siteTitle{
float:left;
width:calc(100% – 350px);
height:30px;
overflow:hidden;
margin-top:20px;
}
/*ロゴがあるとき*/
.siteTitle__logo{
display:block;
max-width:100%;
max-height:30px;
line-height:30px;
}
/*ロゴがないとき*/
.siteTitle__name{
display:block;
letter-spacing:0.5px;
line-height:30px;
}
.siteTitle__link{
display: block;
float:left;
width:auto;
height: 30px;
}
.siteTitle__link:hover {opacity:0.75;}
.siteTitle__img{
width:auto;
max-height:30px;
}
.siteTitle__main{
display:block;
color:#ffffff;
font-size:2rem;
font-weight: 900;
}
.siteTitle__sub{
display:block;
color: rgba(255,255,255,0.75);
font-size:1.2rem;
margin-left:10px;
float:left;
}

 

メニューに関する定義

/*メニューナビ(ヘッダーで使用)*/
.menuNavi{
float:right;
max-width:350px;
}
.menuNavi__list{list-style:none;}
.menuNavi__item{float:left;}
.menuNavi__link{
display:block;
width:50px;
height:70px;
line-height:70px;
text-align:center;
font-size:1.2rem;
color: rgba(255,255,255,0.75);
cursor:pointer;
transition: .2s;
}
.menuNavi__link-current,
.menuNavi__link:hover{
color:#ffffff;
background:#191919;
text-shadow:none;
}

 

検索ナビに関する定義

/*検索ナビ(エキストラで使用)*/
.searchNavi{
display: flex;
padding:15px 0;
}
.searchNavi__title{
height:30px;
line-height:30px;
text-align:center;
color:#ffffff;
padding:0 15px;
background:#f0b200;
margin-right:5px;
border-radius:5px;
font-weight: 500;
}
.searchNavi__list{
list-style:none;
flex-grow: 2;
padding-top: 8px;
margin-right: 15px;
overflow: hidden;
}
.searchNavi__item{
color: #bfbfbf;
float:left;
height:14px;
overflow:hidden;
line-height:1;
margin-bottom:8px;
transition: .2s;
}
.searchNavi__item:hover{
color:#ffffff;
font-weight:bold;
}
.searchNavi__link{padding:0 10px;}

 

ランキングページに関する定義

/*ランキングボックス(TOPページで使用)*/
.rankingBox{
padding: 60px 0;
margin-bottom:60px;
background:#f7f7f7;
}
.rankingBox__over{
overflow-x: auto;
overflow-y:hidden;
}
.rankingBox__list{
display: table;
counter-reset:number;
height:0;
}
.rankingBox__item{
display: table-cell;
position:relative;
}
.rankingBox__item:before{
position:absolute;
counter-increment: number;
content: counter(number);
display:block;
width:30px;
height:30px;
line-height:30px;
text-align:center;
background:#bfbfbf;
color:#FFF;
z-index: 5;
}
.rankingBox__item:nth-child(1):before{background:#ecd357 ;}
.rankingBox__item:nth-child(2):before{background:#a9c6d5 ;}
.rankingBox__item:nth-child(3):before{background:#c58459 ;}
.rankingBox__img{
overflow:hidden;
width:230px;
height:230px;
}
.rankingBox__img img{
width:410px;
max-width:410px;
height:230px;
margin-left:-90px;
vertical-align:bottom;
transform: scale(1);
transition: ease-in-out .2s;
}
.rankingBox__img img:hover {transform: scale(1.2);}
.rankingBox__title{
height:calc(100% – 230px);
background: #f0b200;
}
.rankingBox__titleLink{
display:block;
height:100%;
font-size:1.5rem;
line-height:1.5;
color:#FFF;
padding:15px;
}
.rankingBox__titleLink:hover {background: rgba(255,255,255,0.25);}

 

カテゴリページに関する定義

/*カテゴリー新着1件(TOPページで使用)*/
.categoryBox{padding-bottom: 20px;}
/*シングルページ*/
.categoryBox.categoryBox-gray{
padding-top: 60px;
background:#f7f7f7;
}
.categoryBox__list{
display:flex;
flex-wrap:wrap;
list-style:none;
margin-left:-20px;
}
.categoryBox__list::after {
content: “”;
display: block;
clear: both;
}
.categoryBox__item{
width:calc(33.3% – 20px);
float:left;
margin:0 0 40px 20px;
}
.categoryBox__title{
color:#f0b200;
border-top:2px solid;
font-size:1.8rem;
}
.categoryBox__titleLink{
position:relative;
display:block;
padding:20px 0;
}
.categoryBox__titleLink::before{
content:””;
position:absolute;
top: 50%;
right: 10px;
border-right: 1px solid;
transform: rotate(45deg);
margin-top:-3px;
width: 6px;
height: 6px;
border-top: 1px solid;
transition: .5s;
}
.categoryBox__titleLink:hover::before{
transform: rotate(765deg);
width: 10px;
height: 10px;
margin-top: -5px;
}

 

カテゴリ説明部分に関する定義

/*カテゴリー説明ボックス(カテゴリーアーカイブで使用)*/
.categoryDescription{
position:relative;
padding:30px 0;
background: #f0b200;
}
.categoryDescription::before{
content: “”;
background-color: rgba(0,0,0,0);
background-image: linear-gradient(90deg, rgba(0,0,0,.15) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.15) 50%, transparent 50%);
background-size: 2px 2px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.categoryDescription::after {
content: “”;
display: block;
clear: both;
}
.categoryDescription__explain{
float:left;
width: 70%;
padding-right:2.5%
}
.categoryDescription__heading{
position:relative;
display:inline-block;
color:#FFF;
font-size:3rem;
padding-bottom:20px;
margin-bottom:20px;
}
.categoryDescription__heading::before{
content:””;
position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;
background: rgba(255,255,255,0.5);
}
.categoryDescription__sub{
display:block;
color:#fff;
font-size:1.2rem;
margin-bottom:10px;
}
.categoryDescription__text{
color:#fff;
line-height:1.75;
}
.categoryDescription__post{
float:right;
list-style:none;
width: 30%;
padding-left:2.5%
}
.categoryDescription__item{
position:relative;
width:100%;
overflow:hidden;
}
.categoryDescription__item:before {
content:””;
display: block;
padding-top: 56.25%;
}
.categoryDescription__item img{
position:absolute;
top:0;
width: 100%;
height: auto;
}
.categoryDescription__ribbon {
display: inline-block;
position: absolute;
top: 10px;
left: -35px;
width: 125px;
padding:10px 0;
background: linear-gradient(#E73831, #BD2021);
color: #fff;
font-size: 1.5rem;
text-align: center;
transform: rotate(-45deg);
z-index: 999;
}
.categoryDescription__link{
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.categoryDescription__link::before {
content: “”;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.05) 50%,rgba(0,0,0,0.25) 100%);
transition: .2s;
}
.categoryDescription__link:hover::before {opacity:0;}
.categoryDescription__title{
position:absolute;
bottom:0;
font-size:1.8rem;
color:#FFF;
line-height:1.25;
margin:10px;
}

 

投稿記事ページに関する定義

/*シングルページのタイトルボックス*/
.singleTitle{
position:relative;
padding:30px 0;
background-repeat:no-repeat;
background-position:center center;
background-size: cover;
}
.singleTitle::before{
content: ”;
background-color: rgba(0,0,0,0.75);
background-image: linear-gradient(90deg, rgba(0,0,0,.15) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.15) 50%, transparent 50%);
background-size: 2px 2px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.singleTitle::after {
content: “”;
display: block;
clear: both;
}
.singleTitle__heading{
float:left;
width: 70%;
padding: 0 2.5% 0 0;
}

Sponsor Link








コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です