テレワークが推奨されるようになり、世間にはオンラインイベントやウェビナーといった、インターネットを使ったユーザーへのアプローチが積極的になっています。
その中で、YouTubeを利用した動画での告知やお知らせ、紹介などを行いたい方々も増えました。

ここでは、動画のサムネイルの変更の仕方と、簡単なSEOをご紹介します。

YouTube動画のサムネイルを差し替える

1.YouTube動画のホームから右上のアカウントiconをクリックし、「YouTube Studio」をクリック。

2.YouTube Studioの左メニューから「動画」をクリックすると、投稿した動画の一覧が表示されます。

3.編集したい動画をクリックすると、編集画面が開きます。

4.「サムネイル」の項目で作成したサムネイルをアップロードすることができます。

YouTubeの動画サムネイルは以下のように推奨されています。

• 解像度: 1280×720（最小幅が 640 ピクセル）
• アップロードする画像ファイル形式: JPG、GIF、PNG など
• 画像サイズ: 2 MB 以下
• アスペクト比: できるだけ 16:9 を使用する（YouTube プレーヤーやプレビューで最もよく使われるため）

動画のサムネイルを追加する

YouTube動画の基本的なSEO

大まかに分けて「タイトル」「説明」「タグ」の三項目があります。
また、基本的なSEOは、WEBサイトの投稿記事などと同じ法則になります。

YouTube動画のタイトル

• 約50文字以内にまとめること。
• ユーザーが検索するであろうキーワードを使うこと。
• 必要であればハッシュタグを利用する。

動画検索でのハッシュタグについて

YouTube動画の説明

• 200～350文字程度にまとめる。（文字数制限は5000文字）目安推しては3行前後。
• 動画のタイトルに含まれたキーワードを盛り込む。
• 「とりあえず書く」「キーワードだけ並べる」はスパム認定される可能性あり
• ユーザーにわかりやすいようなセンテンスにする。
• 必要であればハッシュタグを利用する。

動画検索でのハッシュタグについて

YouTube動画のタグ

• 効果は微小であるがあったほうがいい。
• つけすぎはスパム認定に。多くても15～20個程度を目安に。

動画にタグを追加する

YouTube動画の便利機能

動画に終了画面を追加する

YouTubeの動画終了、最後の 5～20秒に、終了画面を追加することができます。他の動画を宣伝したり、ユーザーにチャンネル登録を促したりする目的に利用できます。

動画に終了画面を追加する

YouTube動画のカード

YouTube動画の画面上に特定のカードを表示することができます。
動画、再生リスト、チャンネルの他、外部サイトへも誘導することが可能です。（他リンクへの誘導にはYouTubeパートナープログラムに参加する必要があります）
基本的にテキストで表示されます。カスタマイズメッセージ（30文字）で紹介文を別途掲載することもできます。

動画にカードを追加する

画像・ロゴの透かしを動画に追加

カスタムチャンネル登録ボタンと呼ばれることもあります。
ユーザーにチャンネル登録を促すことができます。画像を利用することが可能です。
150×150ピクセル以上の正方形で、サイズは1MB未満にする必要があります。

画像・ロゴの透かしを動画に追加

設定をしっかりと行い、情報をユーザーに届けていきましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

Youtubeが流行っていることもあり、ホームページのトップビューで動画を流すサイトが多くなりました。
ホームページ上で動画が流れるようなサイトは中身のコンテンツも凝っていることが多いので「すごく難しい事をやっているんだろうなぁ…」と思ってしまいますが、実はそんなことはなかったりします。
ということで、今回は表題の通り「動画を自動再生させて、動画の中央に画像を被せて表示する方法」を紹介します。

この記事を読んでできる事（サンプル）

下記のように、動画の上に画像を被せた表示ができるようになります。

準備は簡単！動画と画像を用意するだけ！

画像は弊社のロゴを使用します。
動画は著作権フリーで非常に良質な動画がダウンロードできる「pixabay」様のサイトから取得しました。
準備はたったこれだけですが、単純な技術だからこそ素材の質が非常に重要になるので、素材の選定にはこだわりましょう！

設置するHTMLコード

設置するコードは下記になります。

<div id="movei-contents">
  <video id="video" src="https://incloop.com/wp-content/uploads/2020/08/fishing.mp4" loop autoplay muted></video>
  <img src="https://incloop.com/wp-content/uploads/2020/08/logo.png">
</div>

上記のように、videoタグとimgタグに用意した素材のURLを貼り付けるだけでOKです。
注意点としては、videoタグには「loop」「autoplay」「muted」という属性を付けています。
「loop」は映像のループ、「autoplay」は自動再生、「muted」は動画の消音設定になります。
GoogleChromeでは「muted」属性が付いていないと「autoplay」が動かないので、その点のみ注意が必要です。

詳細は下記記事が参考になりますので、詳しく調べたい方はリンク先をご確認ください。
video: 動画埋め込み要素 – HTML: HyperText Markup Language | MDN

CSS（スタイルシート）の設定

用意するコードはたった3つのセレクタになります。

<style>
#movei-contents {
  position: relative;
  display: inline-block;
}
#movei-contents video {
  width: 100%;
}
#movei-contents img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  padding: 50px 100px;
  background-color: rgba(255,255,255,0.6);
}
</style>

これだけのコードで、今風のホームページによくあるサンプルのような表示が実現できてしまいます。

少しでもホームページの見栄えをよくしたいと思ったら、今回のような動画と画像を組み合わせたコンテンツを表示しても良いかもしれませんね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

Adobe製品にはいずれのソフトウェアにもラーニングページが設けられていますが、Adobe XDにおいては専用のサイトが設置され、さらに多様なチュートリアル動画が用意されています。

Adobe XD Trail

AdobeXD検定でスキルを自己分析

Adobe XD Trailでは、無料で検定を受けることができます。

Adobe XD検定

初級、中級、上級の3つのレベルから検定を選ぶことができ、問題に答えるだけで、得意分野や強化ポイントをカテゴリ別に診断することができます。

検定は一問一答形式の4択で、制限時間はありません。

途中で「もう一息！」など応援するコメントが出ます。地味に勇気づけられます。

一通り返答すると、以下の画面に切り替わります。

「結果を見る」をクリックすると、以下の画面に切り替わります。

総合上級問題に促すボタンとともに、スクロールしていくと各問題の解説を見ることができます。

その際、「関連する解説動画を見る」をクリックすると、問題の解説を動画で閲覧することができます。

学習には「TUTORIAL」「LESSON」「WORKSHOP」と多様な選択肢

Adobe XDの多彩な機能を、個別に動画で学ぶ　TUTORIAL

UIデザイン、プロトタイピング、共有、デザインシステム、機能拡張とツール連携、というカテゴリがあります。

• UIデザイン
  ユーザーインターフェイスを構築するための操作に関するチュートリアルが掲載されています。
  レイヤーの操作や描画ツールの使い方、オブジェクトのサイズ変更や回転、テキストツールやリピートグリッド、構成要素を意味するコンポーネントの作り方などを学ぶことができます。
• プロトタイピング
  作成したユーザーインターフェイスに動作を追加し、模擬的にサイトを動してウェブサイトの試作をすることができるプロトタイプモードでの操作を学ぶことができます。
• 共有
  作成したデザイン及びプロトタイプを、クライアントやコーダーといった他の人と共有するための操作を学ぶことができます。
• デザインシステム
  AdobeXDに紐づくクラウドドキュメントの操作、各アセットの操作や、コンポーネントの具体的な操作方法などを学ぶことができます。
• 機能拡張とツール連携
  プラグインの利用、他Adobe製品との連携、クリエイティブクラウドとの連携などを学ぶことができます。

目的やつくりたいもの別に、実際に手を動かして学ぶ　LESSON

現在は2つしか動画がありませんが、目的に合わせてXDを使ってデザインを作成することができます。

一人では分からないことも、みんなで一緒に高め合う　WORKSHOP

ConnpassのAdobe XD Trailグループでワークショップを行なっています。

ConnpassとはエンジニアをつなぐIT勉強会支援プラットフォームです。

サイトはこちら。

Adobe XD Trailグループはこちら　

現在439人のメンバーがいるようです。

学習にワークショップキットも用意されているので、動画を見ながら自分で勉強することができます。

学習キットも充実「KIT/RESOURCE」

XD Trail ワークショップで実際に使われる、オリジナル学習キットを公開しています。

また、初級編、中級編とスターターキットが用意されており、レベルに応じて学習が可能です。

さらに、UI　Kitなどの便利なリソースもダウンロード可能です。

Adobe XDは初心者でも楽しくわかりやすく学べる環境がしっかり整っています。ぜひ勉強してみましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

ファッション系のECサイトと相性の良さそうな「着せ替え」機能を簡単に実装するプログラムを作ってみました。

使用する言語

• HTML
• CSS
• JavaScript
• jQuery

※JavaScriptやjQueryの基本的な使い方は割愛させてただきます。

着せ替え機能のサンプル

服の画像をクリックすると、服を組み合わせた画像を上部に表示します。

各種コードの説明

HTMLコード

<div id="kisekae-area">
  <img class="base-img" src="https://incloop.com/wp-content/uploads/2020/07/base.png">
</div>

<div id="select-img-area">
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item1-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item1.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item2-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item2.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item3-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item3.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item4-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item4.png">
  </p>
</div>

class「select-img」の二枚の画像は、一枚目がユーザーがクリックする選択用の画像、二枚目は着せ替え用の画像として使います。
二枚目の画像は着せ替えのみに使いますので、CSSの設定で非表示化しておきます。

着せ替え用の画像を作成する際には、基準となる画像と同じサイズで、レイヤーのように組み合わせた際に違和感が無いような位置に調整して作成します。

jQuery(JavaScript)コード

<script>
<!--
  jQuery(function($) {
    // 画像エリアクリックイベント
    $('.select-img').on('click', function(){
      $(this).toggleClass('selected');
      change_img();
    });

    // 画像変更処理
    function change_img(){
      var s_html = '';
      var i_z_index = 1;
      $('.select-img.selected').each(function(index, element){
          s_html += '<img src="' + $(element).find('img').eq(1).attr('src') + '" style="z-index:' + i_z_index + '">';
          i_z_index++;
      });
      // 要素削除
      $('#kisekae-area img').each(function(index, element){
        if(!$(this).hasClass('base-img')){
          $(this).remove();
        }
      });
      // 要素追加
      $('#kisekae-area').append(s_html);
    }
  });
-->
</script>

選択済みのimgタグを全て取得したら、class「base-img」以外の画像を一度消して、選択された画像のみで取得したimgタグを着せ替え画像のエリアに埋め込みます。

※z-indexは後半に取得した要素ほど上にくるような処理になっているため、画像の順番に気を付けてください。

CSS（スタイルシート）の設定

<style>
#kisekae-area {
    border: solid;
    margin-bottom: 10px;
    text-align: center;
    position: relative;
}
#select-img-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.select-img {
    border: solid 1px #000;
    text-align: center;
    padding: 10px;
    width: 20%;
    margin-right: 5px;
    cursor: pointer;
}
.select-img img {
    display: none;
}
.select-img img:first-child {
    display: inline-block;
}
.select-img:hover {
    background-color: #e6e6e6;
    opacity: 0.6;
}
.select-img.selected {
    background-color: #e6e6e6;
}
#kisekae-area img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#kisekae-area img.base-img {
    position: relative !important;
    top: auto;
    left: auto;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
}
</style>

今回は簡易的なコードで組みましたが、画像の命名規則などをしっかり決めることができれば、隠している画像も不要になるかもしれませんね。

コロナの影響でECサイトが盛り上がっていますので、今回の着せ替えプログラムはECサイトで役立つかもしれません！

弊社では本記事のようなシステムの実装に関するご相談も承っておりますので、もし興味がありましたらお問い合わせまでお気軽にご連絡ください。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

1. 補正をいれて画像をきれいにする
2. 「自動選択ツール」から「被写体を選択」を選択
3. 場合によっては「選択とマスク」で微調整

実はこれだけでできます。
この機能があるだけでもAdobeはクラウドにするべきでしょう。あとからお勉強してきている学生たちのほうが、機能を使いこなしている、なんてことになってしまいます。

補正を入れて画像をきれいにする

一般の方々が、デジタル一眼レフやスマートフォンで撮影した写真は、その先の加工を考えていないことが多く、得てして背景をくり抜きにくいものです。なので、背景を透過したいとおもったら、なるべく以下のことを注意して写真を撮影しましょう。

• 透過でくり抜く被写体は明確に、はっきりと大きく。
• 背景をなるべくごちゃごちゃさせない or ぼかして撮影する。
• 細かい部分はうまく切り取れないことがあるので、なるべく大まかな形で被写体を設定する。

また、撮影した写真をきれいにするのも大切なことです。
ポイントは以下三つ。

• 細かいごみや利用しない要素は潰しておく
• 背景と被写体が明確に別れるように、コントラストをあげておく
• アンシャープマスクをかけておく

こんなふうに背景と被写体が混ざってしまいそうなところをぽちぽちブラシなどで塗りつぶしていきます。
こうすることで透過処理がらくになります。

そうしてきれいにした画像がこちら。

「自動選択ツール」から「被写体を選択」を選択

ツールを自動選択ツールに切り替えると、上部の画面に「被写体を選択」のボタンが現れるのでこれをクリックします。

すると選択範囲が現れます。網点々がそれにあたります。

レイヤーをダブルクリックして背景からレイヤーに変換します。

さらに「選択範囲」から「選択範囲を反転」（あるいはControl＋SHIFT＋I）を選択からの「Delete」で以下のようになります。

前足が消えてしまいましたので、もう少しこれらをコントロールしていきましょう。

場合によっては「選択とマスク」で微調整

被写体を選択した状態のまま、今度は「選択とマスク」をクリックします。
画面が切り替わって以下のようになります。

「透明部分」のパーセンテージを減らしていくと、「選択されていない範囲」つまり、Deleteする際、残される部分がうっすらと表示されていきます。
左側のツールで、一番上のペンツールを選択すると、上にプラスとマイナスのマークが出てきます。

プラスは選択範囲を増やし、マイナスは選択範囲を減らします。今回消えてしまった前足は、「選択されていない範囲」にしたいので、マイナスを選び、そのまま前足を塗ると、そこが非選択範囲になります。

このまま首輪の紐の黒の部分もとっていきましょう。

より細かく選択したい場合は、ツールの上から二番目の物を選択します。

ゴリゴリなぞります。

before

after

選択し終わったら「OK」を押します。
戻った画面でDeleteすると、この通り。

試しに背景を置いてみるとこんな感じ。

きれいに取れましたね。

この機能はAdobe PhotoshopCCからの機能です。新しいものをどんどん活用して、手間を掛けずに作りたいものを作りましょう！

こちらのかわいらしいわんちゃん、弊社社長の愛犬「カイ」くんです。
ときどきInstagramにも登場しているのでチェックしてみてくださいね！

インクループInstagramはこちら

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

AdobeXDではオンマウスホバーアクションを、アセットにコンポーネント登録することで作れるようになっています。

動きはこんな感じ。

1.ボタンを作成します。

リピートグリッドを利用してボタンを作成します。

よく利用しているプラグインはこちら。

＞RepeatGrid Fitter

数を指定することでリピートグリッドがピッタリおさまり、整列ツールを利用しやすくなります。

リピートグリッドを解除し、それぞれのレイヤーに名前をつけておきましょう。

2.ボタンをアセットに登録します。

アセットパネルを開いてコンポーネントにオブジェクトをドラッグアンドドロップして登録していきます。

またはControl＋K、⌘Kで登録することもできます。右クリックから「コンポーネントにする」を選ぶことで登録することもできます。

オブジェクトが緑色の枠になったら登録完了です。

3.ボタンにホバーアクションを設定します。

ホバーアクションを加えるオブジェクトを選択し、右のパネルで「コンポーネント（マスター）」の「初期設定のステート」横にあるプラスボタンを押します。自動的に「ホバーステート」が設定されます。

ホバーステートが選択された状態で、ホバー後の変化を設定します。

ボタンがグループ化されている場合、ダブルクリックでテキストやボタン本体を選択することができます。

4.動きのあるホバーアクションの設定

図のように、アニメーションをさせたい要素を中に仕込んでおきます。

レイヤーはこんな感じ。

ホバーアクションで図のようになるようコントロールします。

アクションは以下の通り。

一つ一つの要素を丁寧に作り込めるシステムが整っていて便利ですね。

ステート機能は「プロトタイプ」で、ホバーの他にタップやドラッグといったトリガーを選択し、様々な機能を付け加えることができます。活用してより良いものを作っていきましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

WordPressのバージョンアップに伴って、対スピードテストもいろいろと変化しつつあります。

前までは高得点だったのに、今では見る影もない……という方も多いかと思います。インクループでも様々にテーマを試しながら、いったいどのようなテーマがスピードテストで高得点を取れるのか、ということを検証しています。

スピードテストはこちら。

以下もご参照ください。

Page Speed Insightsについて

PageSpeed Insights API（PSI）は、モバイル端末向けとパソコン向けの両方のページにおけるパフォーマンスに関するレポートと、そのページを改善する最適化案を提供するGoogleのデベロッパーツールです。
ページのパフォーマンスがよい＝速さと表示上が高得点となり、近年ではこの速さがGoogleの評価に繋がっていると言われています。SEOを行う上で、Page Speed Insightsで高得点を出すことは大変重要です。

スコアが 90 以上であれば速い、50～90 であれば平均的と見なされます。50 未満は遅いと見なされます。

近年のWordPressを利用したPage Speed Insightsスピードアップの定石は？

WordPressを利用したWEBサイトでPage Speed Insightsをスピードアップするには以下のような事が必要でした。
伴ってよく利用されるプラグインをご紹介します。

• 画像の最適化
  EWWW Image Optimizer
  Smush
• コードを圧縮
  Autoptimize
• キャッシュを利用した高速化
  W3 Total Cache
  WP Fastest Cache

上記の対策を行うと、プラグインがどんどん増えていきます。利用している他のプラグインと衝突し、表示がおかしくなることも多々。
WordPressでプラグインを多用したサイトは、Page Speed Insightsで高得点を出すことは難しいです。ですが、高得点のためにはプラグインをいれなければならない、という矛盾があります。

目的は「Page Speed Insightsで高得点を出すこと」ですか？　それとも「ユーザーエクスペリエンス（UX）を高めること」ですか？

以下の6項目を改善できれば、Page Speed Insightsで高得点を獲得することができます。

WEBを表示する際、もっとも時間を消費するのは「JavaScript」。JavaScriptが多い、あるいは内容の記述が多いサイトほど低得点となります。

ですが、JavaScriptはサイトを良くする上で利用していることがほとんど。削減するにも限度があります。また、WordPressのプラグインはだいたいJavaScriptが利用されているケースが多いです。プラグインを多用すると、Wordpressを使ったサイトのスピードは遅くなっていきいます。

このため、ユーザーエクスペリエンス（UX）のためにプラグインを採用しているなら、Page Speed Insightsで高得点を出すことに躍起になる必要はないでしょう。

Page Speed Insightsで高得点を出すなら

JavaScriptを徹底的に削除する。

挿入するJavaScriptは最低限に。また、WordPressの定義済み関数を効率よく使いましょう。
JavaScriptやjQueryは<?php wp_head(); ?>ではなく<?php wp_footer(); ?>で読み込みましょう。

function my_load_widget_scripts() {
    wp_enqueue_script('widgets_js', 'ここにパス.js', array());
    wp_enqueue_script('hatebu', 'ここにパス.js', array());
}

add_action('wp_footer', 'my_load_widget_scripts');

また、「Scripts-To-Footer」を利用してJavaScriptを一括でサイトフッターで読み込ませることができます。
ただ、全てのJavaScriptをフッターで読み込ませてしまうと、サイトの表示でエラーが出る可能性があります。特にjQueryは<?php wp_head(); ?>で読み込まないと、動かないプラグインも……。様子を見ながら利用しましょう。

Google fontsを利用しない。

Google fontsを利用するとPage Speed Insightsは遅くなります。「display=swap」の記載があっても、CSSの読み込みは遅く、Page Speed Insightsで指摘を受けます。いまのところ解決方法は判明していません。
読みやすさというUXよりもスピードを取る場合は、Google Fonts以外のフォントを利用しましょう。

ゴシック

font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;

明朝

font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;

画像の圧縮はプラグインを利用しない

以下のオンラインサイトなどを利用しましょう。

• https://www.iloveimg.com/ja/compress-image
• https://compressjpeg.com/ja/
• https://imagecompressor.com/ja/

サーバーは高性能なレンタルサーバーを。

特に下記がおすすめです。

• エックスサーバー
• ロリポップ！
• さくらのレンタルサーバ

テーマ選びは慎重に。

WordPress5.3からデフォルトテーマになっているTwenty TwentyはGutenbergに対応しており、非常に高速なテーマです。何も手を加えていない状態だと、PageSpeed Insightsで必ず高得点を叩き出します。

その他にも以下のようなテーマがあります。

• Luxeritas
• STINGER8
• Cocoon

PHPのバージョンは可能な限り最新版に！

サーバーによって異なりますが、細かく確認していきましょう。

過度にPage Speed Insightsで点数を上げることにこだわらない！

あまり点数を上げることにこだわってしまうと、UXが良いとは言えないサイトになってしまいます。モバイルファースト対応や画像の遅延表示などできることはするべきですが、必ず90点以上を出さなければならないというわけではありません。

程よく折り合いをつけていきたいですね。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

Add RichText Toolbar ButtonはGutenbergエディタのツールバーに文章修飾用のボタンを追加するプラグインです。

＞＞Gutenberg用の文章修飾プラグインを開発しました

WordPress Gutenbergには文章装飾のための機能が少ない

WordPress Gutenbergには、昔のWordPressのように、指定した範囲にアンダーラインを引いたり、背景色を置いたり、フォントカラーを変えたりする機能がありません。それらはすべてブロック要素に紐付けられて行われるため、文章中の特定箇所を装飾することができません。

クラシック機能のように、選択した範囲を装飾できるようになるのが、Add RichText Toolbar Buttonです。

Add RichText Toolbar Button動作環境

• PHP 5.6 以上
• WordPress 5.0.3 以上

※2019年5月22日にリリースされたWordPress5.2.1は、PHP5.3.xからでは、アップグレードすることができません。セキュリティ的も問題があるため、PHPは常にアップグレードできる環境を用意しておきましょう。

Add RichText Toolbar Buttonは基本的にWordPressの記事ページ、固定ページのみに適応され、その他のページ（アーカイブページなど）には適応されません。

Add RichText Toolbar Button導入方法

Add RichText Toolbar ButtonはWordPress内の「プラグイン＞新規追加＞検索機能」から追加することができません。GitHubより最新版をダウンロードし、「プラグイン＞新規追加＞プラグインのアップロード」から追加します。

追加後、プラグインを有効可します。

Add RichText Toolbar Buttonの基本的な使い方

導入した時点で以下の機能がすでに使えるようになっています。

文字色を変える

文字に背景色をつける

フォントサイズを変える

蛍光ペンで色をつける

なお、装飾したい箇所を選択すると、右サイドバーに「インラインテキスト設定」が出るようになっています。インラインテキスト設定では、上記3つの装飾が一括でできるようになっています。

Add RichText Toolbar Buttonのカスタマイズ

ダッシュボードからAdd RichText Toolbar Buttonをカスタマイズすることができます。

できることは以下のとおりです。

• 各装飾の有効、無効
• 各装飾のボタンのアイコン変更（デフォルトではダッシュアイコンから選択。メディアからアップロードしたアイコンを選択することも可能です）
• 設定管理（装飾コンテンツの追加、削除）
• 詳細設定（基本的に操作する必要はありません）

Add RichText Toolbar Buttonの設定追加

ダッシュボードからAdd RichText Toolbar Button＞設定管理をクリックすると、以下のような画面が現れます。このページの「新規追加」をクリックすると、テキスト装飾コンテンツを増やすことができます。

新規追加をすると以下のようなページに遷移します。

タグ名

基本はspanですが、code（コンピューターコードの短い断片の文字列であると示す）、sup（下付き文字）、sub（上付き文字）などを指定することができます。いわゆる「記述コンテンツ」と言われる要素を挿入します。

記述コンテンツについてはこちら。「MDN web docs」

クラス名

装飾のクラス名です。数値を利用する時は他装飾コンテンツとかぶらないようにしましょう。

グループ名

「ペン」がデフォルトで入っていますが、以下がそのグループになります。

仮に他、「ストライプペン」を作ると、以下のようになります。

アイコン

グループにアイコンをつけてわかりやすくすることができます。

スタイル

プリセットがありますので、活用しながら装飾するCSSスタイルを入力します。手打ちも可能ですので、ここで自由に装飾を施すことができます。

適応するスタイルはプレビューで確認することができます。

ツールバーボタンが有効かどうか

有効にチェックを入れていると、実際の編集画面で利用することができます。使わなくなった機能や、今の所利用予定がない機能はチェックを外して、保存していおくことができます。

優先度

他、装飾コンテンツと重複した場合、該当するコンテンツがどの程度の優先度にあるのかを設定できます。数字が大きいと優先度が低くなります。

***

効率的に装飾できなくなってしまったWordPress Gutenbergですが、このように大変便利なプラグインが開発されています。ぜひ有効活用して、よりよいコンテンツづくりをしていきましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

…という経験をしたので記事にしてみました。

原因が分かってしまえば一瞬で治るのですが、原因が分からないと結構引っかかる問題だったりします。
ちなみに私は今回の問題で1時間程悩みました！ …泣けます。

あまりにも悔しかったので、クイズっぽい感じの記事にして過去の自分に届けます（？）

あれ？XAMPP環境で動作確認したシステムがXserverにアップロードしたら動かない…？

とあるページをXAMPP環境で編集して動作確認をしていました。
実装のイメージとしては、下記のようにphpファイルとcssファイルを用意して同じディレクトリに格納しました。

■phpファイル

■cssファイル

■ディレクトリ構成

上記の構成でローカルのULRにアクセスすると下記のような表示になります。

スタイルシートも反映されていて想定通りの表示になりました。

作成が完了したので、早速Xserverにアップロードしてページにアクセスしてみます。
すると…

変化が少ないので分かりづらいですが、CSSファイルが反映されていません。

「おかしいな？」と思ってファイルのエラー内容を見てみると…。

「i-sp-style.css」が読み込まれていないらしい…。

アップロードの失敗を疑いましたが、しっかりとサーバーにアップロードできていました。（※10回ほど上書きしてアップロードしました。）

ではCSSの読み込みの記述が間違っているのか？　再度確認してみましたが…。

パスも間違っていない…。
そもそもXAMPPで確認ができているので、アップロードの失敗以外で読み込みエラーになるのはおかしい…。

どういうことなの…？

…というバグに遭遇して、1時間も悩みました…(´;ω;｀)

どうでしょうか、皆さんはこのバグの修正方法がわかりましたか？

早速、答えを見てみましょう！

バグの原因は「ファイルの大文字と小文字の違い」にありました

先程のディレクトリ構成をよく見てみるとcssのファイル名の頭文字が大文字になっています。

これがスタイルシートが読み込めない原因となっていました。

ですが少し待ってください。XAMPP環境では問題なくスタイルシートは読めていました。
何故ローカル環境とXserverの環境で表示が変わってしまったのでしょうか？

これはサーバーを構成するOS（※WindowsやLinuxの違い）によって、ファイル名の大文字/小文字を区別するかしないかの違いにありました。

参考記事：大文字／小文字の問題とマルチ・プラットフォームの開発 | 東陽テクニカ | “はかる”技術で未来を創る | ソフトウェア 開発支援

私のXAMPP環境はWindowsサーバーなので、ファイルの大文字と小文字を区別しません。一方で、XserverはLinuxサーバーなので、大文字と小文字を区別しています。
このように、今回のバグはサーバーのOSの違いによって発生していたため、原因を突き止めるのに時間がかかってしまいました。

サーバーを構築したことのある方なら「こんなもの当然でしょ？」となるのですが、知識が浅いとこんな些細な問題に気づくのも一苦労でした…。

「もっとサーバーの勉強をしなさい！」というサーバーからのメッセージを受け取った気がします( ;∀;)

日々精進です！ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

前回の記事はこちら

実際にオブジェクトを動かしてアニメーションを作っていきます。

描画オブジェクト、シェイプなど、動かす素材をシーン上に配置する

まずはIllustratorやAnimate上で動かす素材を作成します。今回は以下のような素材を作成しました。

初期設定は以下のとおりです。

これをAnimateのカンバスに配置します。

ファイル＞読み込み＞ステージに読み込み　でIllustratorファイルを選択すると、以下のようにどのレイヤー、どのオブジェクトを読み込むかを選択できます。

動かすオブジェクトと、動かさないオブジェクトは、別々に読み込むといいでしょう。

Animateのレイヤーは、Photoshopとは異なり、新たなオブジェクトに対して自動で新規につくられることはありません。なので、オブジェクトを別レイヤーにしたい場合は、予めレイヤーを作っておく必要があります。新たに作成したレイヤーを選択した状態で、読み込みをおこないます。

動かすオブジェクトは、レイヤーを「単一Animateレイヤー」に変換しておきます。

読み込みを押すと、以下のようにレイアウトされます。（レイヤー名はわかりやすく変えましょう）

今回動かすのはちょうちょです。ちょうちょをシンボル化する必要がありますので、レイヤー「ちょうちょ」を選択し、修正＞シンボルに変換　をクリックします。この時、種類は「ムービークリップ」に設定します。

Illustratorなどで編集する際に、オブジェクトをグループ化していると、それが継続して適応されている場合があります。グループ化は動作するオブジェクトごとにしておきましょう。以下のようにオブジェクト全体にもグループ化が適応している場合、後の動作で「レイヤーに配分」ができない場合があります。

つぎに、ちょうちょをダブルクリックし、各パーツをそれぞれシンボル化します。

「右羽」「左羽」「胴体」と名前をつけます。ちょうちょのシンボルを選択した状態で、修正＞タイムライン＞レイヤーに配分　を選択します。
「レイヤーに配分」はシンボル内のムービークリップシンボルがレイヤーに配分できるコマンドです。グループ化には気をつけましょう。

ちょうちょのシンボルがそれぞれレイヤーになったら、空になった「レイヤー_1」は削除しましょう。タイムライン上の黒丸が消えているのが「レイヤーが空になった」という意味です。

レイヤーの配置は、他のAdobe製品のように、上にあるものが手前になります。

ここまでの流れ

1. オブジェクトを、「動かすオブジェクト」「動かさないオブジェクト」あるいは「動作するオブジェクトごと」に読み込む。
   ※「レイヤーを新規につくる」→「オブジェクトを読み込む」の順番で読み込んでいく。
   ※グループ化はある程度解除しておく。
2. 各オブジェクト内で、動かすオブジェクトを　修正＞シンボルに変換　でシンボル化（種類：ムービークリップ）にする。
3. タイムライン＞レイヤーに配分　で動かすシンボルごとにレイヤーにする。

フレームを挿入する

タイムラインにはまだフレームが1つしか挿入されていません。

アニメーションを作成するために、タイムライン上でフレーム12まで選択します。青色になると、選択されたということになります。（カラーはそれぞれの設定に依存します。環境設定＞環境設定を編集＞一般＞カスタムカラーを選択）

挿入＞タイムライン＞フレーム　を選択すると、フレームがタイムラインに挿入されます。グレーに色が変わり、再生ヘッドを動かすことができます。

このフレームに、モーショントゥイーンを挿入します。モーショントゥイーンは、タイムラインのフレームに影響する機能のことでしたね。
動きのあるちょうちょの「レイヤー」全てを選択し、挿入＞モーショントゥイーンを選択します。タイムラインの色が変わります。

ちょうちょの動きはループさせるので、フレーム1とフレーム12を一致させる必要があります。

フレーム12に再生ヘッドを移動させ、挿入＞タイムライン＞キーフレーム　を選択します。

次にアニメーション動作として、フレーム6に再生ヘッドを移動させ、ちょうちょの羽の形を変えます。ツールを自由変形ツールにしてから変更しましょう。羽の形を変更するには、白い丸が中心点となるので、これを移動させながら行うといいでしょう。

ちょうちょをカンバス上で飛ばします。

シーン1に戻りましょう。選択ツールにして、カンバス外の黒い部分をダブルクリックすると、タイムラインに「ちょうちょ」「背景」となっている状態にもどります。

タイムラインを80まで伸ばします。80のフレームを選択した状態で　挿入＞タイムライン＞フレームを選択します。また、モーショントゥイーンも適応しましょう。

ここにもキーフレームを打ち、元の場所へちょうちょが戻るように設定します。フレーム20、40、60で動きをつけていきます。

選択ツールをつかうと、動く軌道をコントロールすることができます。

メインカンバスとシンボルの動きは同期していません。制御＞プレビューで確認できます。

以下のようなアニメーションができました。

https://incloop.com/cho/cho.html

ここまでの流れ

1. 挿入＞フレーム　でフレームを挿入する。
2. 挿入＞モーショントゥイーン　でモーショントゥイーンを挿入する。
3. 挿入＞キーフレーム　でキーフレームを挿入する。
4. 動きをつける

まとめ

1. ファイル＞読み込み＞ステージに読み込む　でオブジェクトを、「動かすオブジェクト」「動かさないオブジェクト」あるいは「動作するオブジェクトごと」に読み込む。
   ※「タイムライン上にレイヤーを新規につくる」→「オブジェクトを読み込む」の順番で読み込んでいく。
   ※グループ化はある程度解除しておく。
2. 修正＞シンボルに変換　で「動かすオブジェクト」「動かさないオブジェクト」あるいは「動作するオブジェクトごと」でシンボルをつくる。
3. 修正＞シンボルに変換　で上記で作成した各シンボル内の動かすオブジェクトをさらにシンボル化する。（種類：ムービークリップ）
   ※グループ化に注意。
4. タイムライン＞レイヤーに配分　で動かすシンボルごとにレイヤーにする。
5. 挿入＞フレーム　でフレームを挿入する。
6. 挿入＞モーショントゥイーン　でモーショントゥイーンを挿入する。
7. 挿入＞キーフレーム　でキーフレームを挿入する。
8. 動きをつける

シンボルの概念になれないと難しい部分はありますが、根気強くやっていきましょう。
次回はシェイプトゥイーンを使ったアニメーションを行っていきたいと思います。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。