曲線の飾り枠

グローバルナビをスライドの下に配置したカスタマイズ例④

スライドショーの下にナビゲーションメニューを配置してみました。

VK Blocks Pro のスライダーを CSS を使ったスライドショーに置き換えて、スライド画像と飾り枠も差し替えてみました。

以下、自分用の備忘録です。

ブロック構成

ブロック構成

カスタム CSS

.sotowaku, .slides {
  height: calc( 100vw * ( 1400 / 2400 ) * 0.85);
  max-height: 850px;
}

.sotowaku {
  position: relative;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
}

.logo {
  position: absolute;
  left: 10%;
  top: 5vw;
  z-index: 2;
  width: 20vw;
  min-width: 130px;
}

.wp-block-image {
  margin-bottom: 0;
}

@keyframes slide1 {
  0% {opacity: 0; transform: scale(1);}
  10% {opacity: 1;}
  40% {transform: scale(1.1);}
  50% {opacity: 1;}
  60% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide2 {
  0% {opacity: 0;}
  25% {opacity: 0; transform: scale(1);}
  35% {opacity: 1;}
  65% {transform: scale(1.1);}
  75% {opacity: 1;}
  85% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide3 {
  0% {opacity: 0;}
  50% {opacity: 0; transform: scale(1);}
  60% {opacity: 1;}
  80% {opacity: 1;}
  90% {opacity: 0; transform: scale(1.1);}
  100% {opacity: 0;}
}

.slides {
  clear: both;
  position: absolute;
  top: 0px;
  width: 100%;
  background-color: #669933;
  background-image: url(https://lightning-g3.hp1.work/wp-content/uploads/2021/05/start_now_green.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

.slide1, .slide2, .slide3 {
  animation-duration: 20s;
  animation-iteration-count:infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-delay: 1.5s;
  position: absolute;
  left:0px;
  top:0px;
  width: 100%;
  height: auto;
}

.slide1 {
  animation-name: slide1;
}

.slide2 {
  animation-name: slide2;
}

.slide3 {
  animation-name: slide3;
}

.kazari {
  display: block;
  z-index: 2;
  position: absolute;
  bottom: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

.kazari .wp-block-image {
  margin-bottom: 0;
}

.kazari img {
  width: 100vw;
}

#menu_after_slider {
  display: none;
}

@media (min-width: 992px) {

#menu_after_slider {
  display: flex;
  justify-content: center;
  z-index: 10;
  border-bottom: 1px solid var(--vk-color-primary-vivid);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding-bottom: 15px;
}

#menu_after_slider .menu-header-navigation-container ul {
  list-style: none;
  margin: 0;
  display: flex;
}

#menu_after_slider .menu-header-navigation-container ul li {
  margin: 0 5px 0 5px;
  padding: 10px;
}

#menu_after_slider .menu-header-navigation-container ul li:not(:first-child) a:before {
  content: "/";
  position: relative;
  left: -30px;
  top: 0px;
}

#menu_after_slider .menu-header-navigation-container ul li a span {
  padding-bottom: 3px;
}

#menu_after_slider .menu-header-navigation-container ul li.current-menu-item a span {
  border-bottom: 3px solid var(--vk-color-primary-vivid);
}

#menu_after_slider .menu-header-navigation-container ul li:hover a span {
  border-bottom: 3px solid var(--vk-color-primary-dark);
}

#menu_after_slider .menu-header-navigation-container ul li:hover a i {
  transform: rotateX(360deg);
  transition: all 1.5s ease-out;
  color: #d60d19;
}

#menu_after_slider .menu-header-navigation-container ul>li a {
  padding: 0 0.8em 10px;
  color: var(--vk-color-primary-dark);
  text-decoration: none;
  display: block;
  height: 40px;
  font-size: 18px;
}

}

関連記事

グローバルナビをスライドの下に配置したカスタマイズ例①

スライダーの下にナビゲーションメニューを配置してみました。それだけだとちょっとさびしかったので、スライダーには飾り枠をつけてあります。

グローバルナビをスライドの下に配置したカスタマイズ例②

スライダーの下にナビゲーションメニューを配置してみました。ナビメニューの項目を目立つようにした第2弾です。

グローバルナビをスライドの下に配置したカスタマイズ例③

スライダーの下にナビゲーションメニューを配置してみました。ナビメニューの項目を帯状で白抜き文字にして目立つようにした第3弾です。

サイト運営者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

WordPress を使用したサイト制作・カスタマイズは全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ