CSSアニメーションでHTML用をスクロール時に表示する

1

プラグインを使わずに多彩な動作を実現します.

アニメスタ

アニメスタはPluginではなく,Web上でcssを表示するWebページです.

cssで動作を実装するのではなく,

https://animista.net/play/basic/slide/slide-bottom

##

Avadaでアイコンが表示されないバグを直す

1

Avadaで,アイコンが上手く表示されないバグを直します.SSL化によるもの,CORSポリシーに関するもの,キャッシュに由来するものの3つの原因があります.

原因1:フォントが別のドメインにある

.htaacessでCORSを許可するコマンドを入れます.

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
 Header set Access-Control-Allow-Origin "*"
</FilesMatch>

原因2:キャッシュを読み込んでいる

キャッシュを削除します,

原因3:SSL化しているのにフォントだけ非SSL通信を行なっている

何らかの原因でフォントだけ非SSL通信で読み込んでいる場合,ブラウザ側でブロックすることがあります.この場合,「Better Search Replace」などのプラグインを使ってhttp://を https:// で置き換えてください.

原因3:XserverのWordPress簡単インストールを使っている

XserverのWordPress簡単インストールを使っているとフォントだけhttp://で読み込んでしまう問題が発生します.簡単インストールの場合,Better Search Replace」を使った対応では上手くいきません.WordPressを手動でインストールすると上手くいきました.

Avadaで利用できるデモサイトおすすめ10選

1

企業・組織のデモサイト

Avadaをはじめとする海外テーマでは,デモサイトをインポートできます.デモサイトはかなりの数用意されていますが,その中から自分が作りたいイメージに近いものをインポートした後,カスタマイズしてサイトを作成するという流れが一般的です.

デモサイトの実態は,そのテーマ(例えばAvadaやEnfoldなど)で作られた固定ページや投稿ページです.テーマそのもので手動で同じものを作れるのですが,手間を省くために用意されております.

ここでは,Avadaのおすすめのデモサイトを紹介します.

シンプルなもので良いならこれがおすすめ.

ダサくない程度に動きもあって,構成もシンプルなのでカスタマイズ示唆そうです.

ランディングページ

印象の強いランディングページならこちらがおすすめです.

動きがあって,読者は自然にスクロールしてしまうと思います.用意する写真の数も少なくて良ささそうです.製品,アプリなど幅広く使えます.

・イベント向けのサイトを作りたいなら動画を多用するこちらがいいです

Magazine系(文字主体)

・明るい印象のサイトです.少し古めのデザインですが,みやすくて親しみやすいです.

用意できる写真がたくさんある人限定になってしまうのが難点です.

・個人的には一番使いやすくておすすめです.

・ミニサイトでおすすめのデモデザインです.

・力強いサイトを作りたいならこれ.

個人的には好きです.

ヨガ教室

ヨガ教室を開くならこのサイトはかなりおすすめです.

Avadaで特定のコンテナがモバイルで表示されない

1

WordPressの有料テーマで一番人気のAvadaでWebサイトを構築する際,特定のコンテナがモバイルで表示されない問題に直面しました.

Avadaでは,コンテナごとにRendering Logicでデバイスや引数,ユーザーロールなどに応じて表示するかどうかを決めることができます.デフォルトのテーマでは,Rendering Logicでデバイスタイプがモバイルではない場合に表示,となっていたりします.PCでは表示されるのにモバイルでは表示されない,というトラブルに遭遇した時には下記の対応で解決します.

まず,該当の固定ページに行きます.

wordpress

表示されないコンテナを編集するために,鉛筆ボタンを押して編集画面を出します

ExtrasタブでRendering logicのところで,Device Typeが指定されているので,これを削除します.

Avadaでは,コンテナごとにRendering Logicでデバイスや引数,ユーザーロールなどに応じて表示するかどうかを決めることができます.デフォルトのテーマでは,Rendering Logicでデバイスタイプがモバイルではない場合に表示,となっていたりします.PCでは表示されるのにモバイルでは表示されない,というトラブルに遭遇した時にどうぞ.

capacitorでadmobでアプリ広告をAndroidで表示する

1

いろんなプラグインがあります.以前は

https://github.com/rahadur/capacitor-admob

を使っていましたが,メンテナンスされていないようなので現在使うのはおすすめじゃないです.

今は

https://github.com/capacitor-community/admob

を使うのが良さそうです.

admob on capacitor

Android Studioの設定は別途ドキュメントで行うとして,バナーを表示するソースコードはtsファイルで下記のようにするだけで表示されました.

import { Component } from '@angular/core';
import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition, BannerAdPluginEvents, AdMobBannerSize } from '@capacitor-community/admob';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})


export class Tab1Page {


  constructor() {
    AdMob.initialize({
      requestTrackingAuthorization: true,
      //testingDevices: ['2077ef9a63d2b398840261c8221a0c9b'],
      //initializeForTesting: true,
    });
  }

  ionViewDidEnter(){

    AdMob.addListener(BannerAdPluginEvents.Loaded, () => {
      // Subscribe Banner Event Listener
      console.log('loaded');
    });

    AdMob.addListener(BannerAdPluginEvents.SizeChanged, (size: AdMobBannerSize) => {
      // Subscribe Change Banner Size
      console.log('size changed');

    });

    const options: BannerAdOptions = {
      adId: 'ca-app-pub-3940256099942544/15453xxxxxx',//test
      adSize: BannerAdSize.BANNER,
      position: BannerAdPosition.BOTTOM_CENTER,
      margin: 100,
      isTesting: true
      // npa: true
    };
    AdMob.showBanner(options);

  }

}

moduleファイルには何の記載もなくてOK