CSS編集備忘録(Amebaownd)
ホームページの改装をしてる時に「CSSカスタマイズ」を利用しましたので、その備忘録です
※ワンコとまったく関係ない記事ですが、たぶんAmebaOwndのホームページの編集をしたいなという方にとってはかなり興味深い内容ではないかと思います
「デザインテーマ」：CDG
トップページのスライドショー と、ブログ記事のサムネイル表示時の日付を消す というのをCSSカスタマイズにて実現しています
全体：
/**
* @media all
* 全体に適用したいCSSを記述してください。
*/
.btn__item {
border-radius: 10px;
}
@media (min-width: 800px){
.keyvisual__image:before,
.keyvisual__image:after {
content: "";
position: absolute;
opacity: 1;
z-index: 0;
display: block;
width: 100%;
padding-top: 90%;
background-size: 100% auto;}
.keyvisual__image:before {
background-image: url("https://cdn.amebaowndme.com/madrid-prd/madrid-web/images/sites/403280/7b0053490ba6623513116dc3b45c3867_e557480d8ea18442271916d1b717f107.png?width=600");}
.keyvisual__image:after {
background-image: url("https://cdn.amebaowndme.com/madrid-prd/madrid-web/images/sites/403280/abf78cfdd39c12b7ef1eed86f10362f0_99f3023ae780d11372af5fcd9023a05b.png?width=600");}
@keyframes slider-before {
0% {opacity: 0;}
60% {opacity: 0;}
66% {opacity: 1;}
97% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes slider-after {
0% {opacity: 0;}
30.1% {opacity: 0;}
33.3% {opacity: 1;}
63.4% {opacity: 1;}
66.6% {opacity: 0;}
100% {opacity: 0;}
}
.keyvisual__image:before,
.keyvisual__image:after {
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.keyvisual__image:before {
animation-name:
slider-before;
}
.keyvisual__image:after {
animation-name:
slider-after;
}
}
/* 日付を消す*/
.blog-list--grid
.blog-item__date{
display: none;
}
/*
タイトルを消す
.blog-list--grid
.blog-item__title{
display: none;
}
*/
/*
本文を消す
.blog-list--grid
.blog-item__text-outer{
display: none;
}
*/
スマートフォン
/**
* @media (max-width: 800px)
* 画面幅が800px以下のスマートフォン、タブレット用のCSSを記述してください。
*/
.btn__item {
border-radius: 10px;
}
@media (max-width: 800px){
.keyvisual__image{
background-size:50% auto;
}
.keyvisual__image:before,
.keyvisual__image:after {
content: "";
position: absolute;
opacity: 1;
z-index: 0;
display: block;
width: 100%;
padding-top: 60%;
background: 50% 0% no-repeat;
-webkit-background-size: cover;
background-size: 50% auto;
}
.keyvisual__image:before {
background-image: url("https://cdn.amebaowndme.com/madrid-prd/madrid-web/images/sites/403280/7b0053490ba6623513116dc3b45c3867_e557480d8ea18442271916d1b717f107.png?width=600");}
.keyvisual__image:after {
background-image: url("https://cdn.amebaowndme.com/madrid-prd/madrid-web/images/sites/403280/abf78cfdd39c12b7ef1eed86f10362f0_99f3023ae780d11372af5fcd9023a05b.png?width=600");}
@keyframes slider-before {
0% {opacity: 0;}
60% {opacity: 0;}
66% {opacity: 1;}
97% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes slider-after {
0% {opacity: 0;}
30.1% {opacity: 0;}
33.3% {opacity: 1;}
63.4% {opacity: 1;}
66.6% {opacity: 0;}
100% {opacity: 0;}
}
.keyvisual__image:before,
.keyvisual__image:after {
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.keyvisual__image:before {
animation-name:
slider-before;
}
.keyvisual__image:after {
animation-name:
slider-after;
}
}
@media (max-width: 420px){
.keyvisual__image{
background-size:100% auto;
}
.keyvisual__image:before,
.keyvisual__image:after {
content: "";
position: absolute;
opacity: 1;
z-index: 0;
display: block;
width: 100%;
padding-top: 100%;
background: 50% 0% no-repeat;
-webkit-background-size: cover;
background-size: 100% auto;
}
.keyvisual__image:before {
background-image: url("https://cdn.amebaowndme.com/madrid-prd/madrid-web/images/sites/403280/7b0053490ba6623513116dc3b45c3867_e557480d8ea18442271916d1b717f107.png?width=600");}
.keyvisual__image:after {
background-image: url("https://cdn.amebaowndme.com/madrid-prd/madrid-web/images/sites/403280/abf78cfdd39c12b7ef1eed86f10362f0_99f3023ae780d11372af5fcd9023a05b.png?width=600");}
@keyframes slider-before {
0% {opacity: 0;}
60% {opacity: 0;}
66% {opacity: 1;}
97% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes slider-after {
0% {opacity: 0;}
30.1% {opacity: 0;}
33.3% {opacity: 1;}
63.4% {opacity: 1;}
66.6% {opacity: 0;}
100% {opacity: 0;}
}
.keyvisual__image:before,
.keyvisual__image:after {
animation-duration: 12s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.keyvisual__image:before {
animation-name:
slider-before;
}
.keyvisual__image:after {
animation-name:
slider-after;
}
}
/* 日付を消す*/
.blog-list--grid
.blog-item__date{
display: none;
}
/*
タイトルを消す
.blog-list--grid
.blog-item__title{
display: none;
}
*/
/*
本文を消す
.blog-list--grid
.blog-item__text-outer{
display: none;
}
*/
少し暇が出来たら、加筆して説明を加えたいと思いますが、コメントアウトととかがわかる方でしたら、画像アドレスの部分の変更も容易にできると思います
※画像アドレスの取得にあたっては、CSSカスタマイズ内の「画像をアップロード」させてCSS表記部分にアドレスを表示させてから、上記のCSSの画像アドレス部分を置き換えるといいです
なお、使用した画像の大きさは1200x1200です
※CDG以外のデザインテーマだと表示がちょっと変になったり、うまく機能しないです
ちなみに私はCSSの知識をほぼ持ち合わせておりませんので、質問をいただいても答えれるかどうかは未知です（笑）