アフィンガー6のヘッダーコンテンツに動画を入れたい場合
コメント
アフィンガー6のヘッダーコンテンツに動画を入れたい場合の覚え書き。
どうやらEX版では簡単に実装できるようですが、EX版は持ってないのでPHPとCSSをいじることで実装します。
PCとスマホ対応のみしてます。
<div id="headbox-bg"> <!-- ここの直下に記載します --> <video autoplay="" loop="" muted="" playsinline="" class="myVideo" style="width: 100%; height: auto;"><source src="https://mitumine.stars.ne.jp/kopipesityainayo/wp-content/uploads/2024/12/top.mp4" type="video/mp4"> <img src="/wp-content/uploads/2024/12/top.png" alt="雲の画像" width="1920" height="1003" class="aligncenter size-full wp-image-203" /> </video>
div#header-full {
position: relative;
}
#header-l #st-text-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.myVideo {
outline: none;
}
.sitenametop {
font-size: 3.0rem !important;
line-height: 3.5rem !important;
}
.sitename {
font-size: 3.0rem !important;
line-height: 3.5rem !important;
}
div#st-menubox {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
#st-menuwide {
background-color: #00000073;
}
header .smanone ul.menu li a {
color: #ebebeb;
}
/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {
.s-navi-has-search #s-navi dt.trigger {
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
width: 100vw;
}
#s-navi dt.trigger {
overflow: initial;
}
#st-mobile-logo.st-mobile-title #st-text-logo {
margin-top: 50%;
}
.sitenametop {
font-size: 0.8rem !important;
line-height: 1.5rem !important;
}
.sitename {
font-size: 1.5rem !important;
line-height: 2.0rem !important;
}
/*-- ここまで --*/
}
コメント