WordPress無料テーマ「Lightning」
ホームページの関する追加CSSを記載しています。
目次
- 架空 Frenchibi-え爺の追加CSS。
- 横幅いっぱいの「ずらし・重ねレイアウト」を作る。
- 架空 Coffee-えbi爺のCSS。
- 架空 ないえみらい-えbiG CafeのCSS。
- 架空 Italiano-えbiGのCSS
- 架空 Barber shop-えbiG美容室のCSS。
- ブロックパターンで美容室の追加CSS。
- 架空 奈井江みらい内科クリニックのCSS。
- 架空 CSS。
- 架空 CSS。
- 架空 CSS。
- 架空 未来-保育園のCSS。
- フッターの「Powered by WordPress…」を消すCSS
１ 架空 Frenchi-えbi爺の追加CSS。
まず、「外観」→「カスタマイズ」→「追加CSS」に書いたCSSを載せておきます。
ただしフッターナビを中央寄せにするCSSは載せてません。
(Lightning有料版でできることなので)
CSSを載せておきます↓
/*ヘッダーロゴ大きく*/
.site-header-logo img{
max-height:70px;
}
@media (min-width: 992px){
.site-header-logo{
padding-top:5px;
margin-bottom:5px;
}
}
/*セリフ体へ*/
h2,.reserve-tel,.page-header-title,menu-table,.course-menu{
font-family:serif;
}
/*コンセプト部分レイアウト*/
.test-cover{
position:relative;
}
.test-text{
position:absolute;
top:20px;
left:0;
width:45%;
background:#f7f6f4;
z-index:2;
padding:100px;
}
.test-image1{
position:absolute;
top:50px;
right:28%;
width:30%;
z-index:3;
}
.test-image2{
position:absolute;
top:0;
right:0;
width:30%;
}
@media(max-width:768px){
.test-text{
position:static;
width: 100vw;
margin: 0 calc(50% - 50vw);
margin-top:82% !important;
padding:50px 30px;
}
.test-image1{
width:50%;
right:40%;
}
.test-image2{
width:50%;
}
}
/*コース見出し*/
.course-heading{
margin-bottom:-20px;
z-index:1;
}
/*アニバーサリー*/
.anniversary-cover{
outline:3px solid #e4c89c;
outline-offset:5px;
}
/*テイクアウト見出し*/
.takeout-heading{
margin-bottom:-27px;
z-index:2;
}
/*ニュース*/
.news-heading{
margin-bottom:-15px;
}
.uagb-post__title{
background:transparent;
font-size:1em;
font-weight:400;
}
/*アクセス見出し*/
.access-heading{
margin-bottom:-10px;
}
/*アクセスレイアウト*/
.test2-cover{
padding:0;
}
.test2-cover .wp-block-cover__inner-container{
display:flex;
max-width:100vw !important;
flex-wrap:wrap;
align-items:flex-start;
}
.test2-image{
width:50%;
z-index:1;
}
.test2-text{
width:50%;
padding:50px 50px 50px 80px !important;
align-self:flex-end;
position:relative;
top:100px;
right:50px;
}
@media(max-width:768px){
.test2-image{
width:80%;
}
.test2-text{
width:80%;
padding:30px !important;
top:-30px;
right:0;
margin-left:auto;
}
}
/*フッターの余白無くす*/
.site-footer-content{
padding-top:0;
}
.widget{
margin:0;
}
.site-footer-content .wp-block-social-links{
margin:0;
}
/*フッターのpowered by wordpressを消す*/
.site-footer-copyright p:nth-child(2){
display:none;
}
２ 横幅いっぱいの「ずらし・重ねレイアウト」を作る。
３ 架空 Coffee-えbi爺のCSS
書いているCSSを載せておきます。
なお、フッターの背景色を変えるCSSは非公開とさせていただきます。
Lightning ProにするとCSSを書かなくてもフッターの背景色を変えられるそうです。
CSSを載せておきます↓
/*見出しを明朝体に*/
h2,h3{
font-family:serif;
}
/*コンセプト画像を重ねる*/
.concept-image1{
position:relative;
top:100px;
left:50px;
z-index:2;
}
.concept-image2{
position:relative;
top:0px;
left:-50px;
}
/*コンセプトの文章を中央寄せ*/
.concept-text{
max-width:650px;
margin:0 auto;
}
/*フッターのPowered by WordPress...を消す*/
.site-footer-copyright p:nth-child(2){
display:none;
}
/*スマホ画面*/
@media(max-width:768px){
.concept-image1{
top:30px;
left:15px;
}
.concept-image2{
top:-30px;
left:-15px;
}
.menu-food-image{
order:1;
}
.menu-food-table{
order:2;
}
}４ 架空 ないえみらい-えbiG CafeのCSS。
「外観」→「カスタマイズ」→「追加CSS」に書いたCSSを載せておきます。
CSSを載せておきます↓
/*コンセプト*/
.concept-img{
position:relative;
left:40px;
}
.concept-text{
background:#f7f6f5;
padding:50px;
position:relative;
top:100px;
left:-40px;
z-index:2;
margin-bottom:150px !important;
}
@media screen and (max-width:781px){
.concept-img{
left:-15px;
}
.concept-text{
padding:20px;
top:-70px;
left:15px;
margin-bottom:-40px !important;
}
}
/*ニュース*/
.uagb-post__title{
background:transparent;
font-size:1em;
font-weight:400;
}
article.uagb-post__inner-wrap{
background:#fff;/*一記事の背景色を白*/
}
/*メニューページの表の幅*/
.menu-table{
max-width:500px;
margin:0 auto;
}
/*フッターのpowered by wordpressを消す*/
.site-footer-copyright p:nth-child(2){
display:none;
}
５ 架空 Italiano-えbiGのCSS。
CSSを載せておきます↓
/*グローバルナビの電話番号の背景色*/
header .nav-tel{
background:#79112b;
border-radius:10px;
}
/*グローバルナビの電話番号の文字色*/
header .nav-tel a{
color:#fff !important;
}
/*見出しをsarif体（明朝体）に*/
h2{
font-family:serif;
}
/*コンテンツ部分の下の余白を消す*/
.site-body{
padding-bottom:0;
}
/*フッターのpowered by wordpressを消す*/
.site-footer-copyright p:nth-child(2){
display:none;
}６ 架空 Barber shop-えbiG美容室のCSS。
「外観」→「カスタマイズ」→「追加CSS」に書いている、主だったCSSを載せておきます。
ただしヘッダーを透過するCSS、固定ページのヘッダーを画像にするCSSについては、Lightning有料版にするとできるのでここでは載せるのは控えさせていただきます。
CSSを載せておきます↓
/*コンセプト上の余白を消す*/
.site-body{
padding-top:0;
}
/*個別ページでヘッダーが重ならいように*/
.page-header{
margin-top:93px;
}
/*フッターのPowered by...を消す*/
.site-footer-copyright p:nth-child(2) {
display: none;
}
/*メニューページの枠*/
.menu-frame{
padding:60px;
background-image:url(画像のURL);
background-size:100% 100%;
}
７ ブロックパターンで美容室の追加CSS。
「外観」→「カスタマイズ」→「追加CSS」の部分に書いたCSSを載せておきます。
グローバルナビの「RESERVE」の部分はCSSを書いて黒くしています。
CSSを載せておきます↓
/*グローバルナビのRESERVEの部分を黒く*/
@media screen and (min-width:992px){
.nav-reserve{
background:#000;
}
.nav-reserve a{
color:#fff !important;
}
.device-pc .global-nav-list>li>a{
padding-top:30px;
padding-bottom:30px;
}
}
/*見出しをセリフ体*/
h2{
font-family:serif;
}
/*フッターのpowered by wordpressを消す*/
.site-footer-copyright p:nth-child(2){
display:none;
}
８ 架空 奈井江みらい内科クリニックのCSS。
「外観」→「カスタマイズ」→「追加CSS」に書いたCSSを載せておきます↓
【2023/5/25追記】
コードを一部修正しました(グローバルナビの電話番号のところ)。
CSSを載せておきます↓
/*見出しを明朝体*/
h2{
font-family:serif;
}
/*グローバルナビの電話番号の背景色*/
header .nav-tel{
background:#63a4c1;
border-radius:10px;
}
/*グローバルナビの電話番号の文字色*/
header .nav-tel a{
color:#fff !important;
}
/*フッターのpowered by wordpressを消す*/
.site-footer-copyright p:nth-child(2){
display:none;
}1２ 架空 未来-保育園のCSS。
「外観」→「カスタマイズ」→「追加CSS」に書いたCSSを載せておきます↓
CSSを載せておきます↓
/*コンテンツ部分上下の余白消す*/
.site-body{
padding-top:0;
padding-bottom:0;
}
/*フッターのpowered by wordpress...を消す*/
.site-footer-copyright p:nth-child(2){
display:none;
}
/*-------スマホ・タブレット画面---------*/
@media screen and (min-width:782px){
/*トップページ「採用情報」レイアウト*/
.recruit-section{
padding-left:90px;
padding-top:0;
padding-bottom:0;
}
}
/*スマホ画面の時のカラムの縦並び順番*/
@media screen and (max-width: 781px){
.reverse-box {
display: flex;
flex-direction: column;
}
.order1 {
order: 1;
}
.order2 {
order: 2;
}
}
1３ フッターの「Powered by WordPress…」を消すCSS
フッターの「Powered by WordPress…」を消すには↓
下のCSSを「外観」→「カスタマイズ」「追加CSS」にコピペしてください。
CSSを載せておきます↓
/*フッターのPowered by WordPress...を消す*/
.site-footer-copyright p:nth-child(2){
display:none;
}