Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

[WordPress] Arkhe ブロックパターンライブラリ

Arkhe

Arkhe専用のブロックパターンライブラリが公開されました。コピペするだけなので、とっても便利です。CSSコードブロックが付いているので、カスタマイズが出来ます。素晴らしい!!

情報としては大した内容ではありませんが、軽~くカスタマイズしたのでシェアします。初心者さんの助になれば嬉しいです。随時更新してゆく予定です。

ちなみに、Arkheは、基礎となる部分しかないテーマなので、どちらかと言うとWebの知識がある方向けです。ブロックパターンライブラリを使用しても、多くの部分は自作しなければなりません。

Webの知識が無くとも、ポチポチクリックするだけで簡単に見栄え良くサイトを作りたいのであればSWELLをお勧めします。ブロックパターンももっと簡単設定で完成しますし、種類も豊富でオススメです。

INDEX

準備

WordPressのテーマ「Arkhe」と「Arkhe Block」プラグインが必要です。インストールして下さい。無料版でもいくつかは対応できます。必要に応じてPro版の購入が必要です。

サイトにアクセスし、好みのパターンを見つけます。コピーして、ブロックエディタにペーストするだけ!!

gnRichClmn03(汎用リッチカラム03・コンテンツ右)

画像の高さ(縦横比率)の変更

デフォルトでは3:2に設定されています。好みの比率にカスタマイズできます。2:1にした場合の例です。
※ビジュアルエディタ上では反映されません。

.arkp-gnRichClmn03 .arkp-gnRichClmn03__imgWrapper > img {
    aspect-ratio: 3/2 ;

.arkp-gnRichClmn03 .arkp-gnRichClmn03__imgWrapper > img {
    aspect-ratio: 2/1 !important;

テキストエリアの背景色の変更

.arkp-gnRichClmn03 {
    --arkp--cont--overlap--x: 8rem;
    --arkp--cont--bgc: #ココを好きな色にする;

アニメーションで動きをつける

テキストに動きを付けると、グッと変わります。アニメーションの付けたははいろいろありますが、CSSが手軽です。

@keyframesでいろいろ出来ます。とりあえず何かやってみた方が分かり易いと思います。

例えは、scMV03のテキストに動きを付ける場合

/* scMV03 */
@keyframes fade-in {
  from {
      opacity: 0;
      transform: translateY(100px);}
  to {
      opacity: 1;
      transform: translateY(0);}
}
.arkp-scMV03 .ark-block-section__body{
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}

scMV05(メインビジュアル05)に付ける場合

@keyframes fade-in {
  from {
      opacity: 0;
      transform: translateY(100px);}
  to {
      opacity: 1;
      transform: translateY(0);}
}
.arkp-scMV05 .ark-block-heading{
    animation-name: fade-in;
    animation-duration: 2s;
    animation-delay: 0.2s;
    animation-timing-function:ease;
    animation-fill-mode: both;
}

Swiperでスライドにする

中級者以上向け:カスタマイズが必要です。基礎部分はArcheで提供して頂いているので、Swiperに必要な部分を足すだけでお手軽です。

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX