2017/06/26

特殊ヘッダーのアニメーションのやり方の説明

 

まずはプラグインのShortcodes Ultimateをインストールしましょう。

インストールの仕方については別のページに記載してます。

ここからは特殊ヘッダーのやり方について説明していきます。

まずはウィジェットをひらきます。そうしますと右のほうに特殊ヘッダー画像(PC)というのがでてきます。

ウィジェットを押して特殊ヘッダーの場所を確認する。

特殊ヘッダー画像(PC)の場所を確認したらそこにビジュアルエディターをドラッグ&ドロップします。

ビジュアルエディタを特殊ヘッダー画像(PC)にドラッグ&ドロップしてます

このビジュアルエディターにコードを書いていきます。完成見本はこちらになります。

完成の見本

では、まずはタイトルの下にある「ショードコードを挿入」をクリックします。

ショートコード挿入をクリック

このように表示されるので右下にあるアニメーションをクリックします。

右下のアニメーションをクリック

クリックすると↓のように表示されるのでそこのアニメーションと書かれているところからお好みのアニメーションを選びましょう。

好みのアニメーションを選ぶ

下の方にいくとライブプレビューボタンがありますので、押すとどんなアニメーションなのか確認できます。

ライブプレビューで見る

好みのアニメーションが決まりましたら「ショートコードを挿入」をクリックして決定しましょう。

完成見本の一番下にショートコードを挿入することができました。

アニメーションコンテンツと書かれているところをお好きな文字や画像に変えて使用しましょう。

特殊ヘッダー画像(PC)の場合は特殊ヘッダー画像の所の説明にあるように一番上と一番下に特殊ヘッダー用のコードを入れて

のようになります。

あとはビジュアルエディターの右下にある保存ボタンをクリックすれば完了です。

文字や画像の場所を左や右に変えたい場合はcenterとなっているところをleftやrightに変更しましょう。

その時に”を間違えて消さないように気を付けましょう。

もし公開したらコードがそのまま表示されてしまう場合はビジュアルモードでコードを張りつけているか、コードのどこかを間違えているので確認しましょう。

ビジュアルモードではりつけていた場合はビジュアルエディタのところにあるテキストとしてペーストを選んで貼り付けなおしてみるかテキストモードにして貼り直しましょう。

下記のように普通の記事ページでもアニメーションは使用できるので表現したいことがあったら使用すると面白いと思います。

 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Copyright© 🐩プードル鍼灸整骨院🐩 , 2017 All Rights Reserved.