webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

title - split text

split textの段取り

コンポジションの再生画面に「タイトル及びアクションセーフ」の枠を表示させる。

f:id:ohta-felica:20180202152748p:plain

 

まず一つ目のコンポジションを作る。文字を入力する。

そのコンポジションを選択して複製する。「ctrl+D」duplicate

f:id:ohta-felica:20180202152935p:plain

 

 複製したコンポジションにもテキストを入力しておく。

一秒に再生ヘッドを置く(最終ポジション)

f:id:ohta-felica:20180202153518p:plain

 

両方のコンポジションを選択して、「p」position

ポジションのキーフレームを打つ→最終形をマーク。まず最終形のレイアウトを決めることが大切。

f:id:ohta-felica:20180202153616p:plain

 

 

ヘッドをスタート(0秒)に持ってくる

f:id:ohta-felica:20180202153723p:plain

 

 

上の行のYを移動する

f:id:ohta-felica:20180202153824p:plain

 

次に下側を上にあげる

f:id:ohta-felica:20180202154210p:plain

 

 

 

f:id:ohta-felica:20180202154240p:plain

 

 

これでテキストの動きは完成したので、不要な部分を隠す。

マスクを使う。

マスクを作るために平面レイヤーを使う。白い平面を作って、フレーム上の表示させたい箇所に移動する。

ルミナンスキー→白い部分は表示、黒い部分は非表示 

平面レイヤーを作る

 

f:id:ohta-felica:20180202154449p:plain

 

 

白い平面を作る

f:id:ohta-felica:20180202154604p:plain

 

 白い平面を上にあげる 

f:id:ohta-felica:20180202154757p:plain

 

f:id:ohta-felica:20180202154712p:plain

 

 

平面レイヤーを「その位置で見せたいテキスト」のすぐ上のレイヤーの位置に持ってくる。

f:id:ohta-felica:20180202155008p:plain

 

「その位置で見せたいテキスト」を選択して

f:id:ohta-felica:20180202155030p:plain

 

デフォルトでは「キー」が表示されていないので、表示させる。

右クリックして「列」を表示させる

 

f:id:ohta-felica:20180202155349p:plain

 「トラックマット」のなかから「ルミナンスキーマット」「平面を使う」を選ぶ。

 

f:id:ohta-felica:20180202155500p:plain

 もう一方のレイヤーにも同じ操作をして出来上がり。

 

使いまわせるように保存しておく。

カラープロファイルの作成からプリンタの設定まで

プロファイル作成時の備忘録。

pictorico proof用

 

f:id:ohta-felica:20180128164824p:plain

 

 

 

f:id:ohta-felica:20180128164435p:plain

 

 

f:id:ohta-felica:20180128164541p:plain

 プラテンギャップは「広め」

用紙厚は「4」

f:id:ohta-felica:20180128164626p:plain

 

f:id:ohta-felica:20180128164713p:plain

 

f:id:ohta-felica:20180128222218p:plain

 

f:id:ohta-felica:20180129001135p:plain

 

f:id:ohta-felica:20180128214114p:plain

 

spamというのはこういうことなのね

google search consoleから、管理しているサイトがspamに乗っ取られてとの報告がありまして、、、

URLの前に「cashe:」を追加すると、googleが保存している最新のキャッシュが確認できます。

するとこんな塩梅で↓

f:id:ohta-felica:20180128111344p:plain

 ヘッダーの前に山ほどアンカーがついています。

ここをクリックさせてクリック数を稼ぐような仕組みなのか?

サーバーの中を見て、見慣れないフォルダがあったのでとりあえず削除。

さてどうなることやら、、、いろいろ調べてみようと思います。

 

 

wordpress contactform7

contactform7を使って、お問い合わせフォームを作った。

けれどもうまく「送信」できなかった。

その時色々調べて解決した備忘録。

参考文献↓


コンタクトフォーム7で送信できないトラブルはいろいろあるようで、googleを検索するとたくさん出てきます。

Why Aren’t Emails Getting Delivered?

There are two main reasons that WordPress emails don’t deliver successfully: server configuration and spam filtering.

WordPress, and WordPress plugins, will by default send email using the PHPmail() function. This is a simple way of sending email, and many WordPress hosting servers are not configured to use this mail() function.

In addition, your email provider checks all incoming email to determine if it should be allowed to deliver, sent to spam, or blocked entirely. One way it will do this is by checking if the email is originating from the same location it claims to be sent from.

For example, if your email server is gmail.com but your email claims to be sent from your website’s domain, your form notification may be blocked before it even reaches the spam folder.

 

その多くの記事で解決方法として書かれているのが、「wp mail SMPT」というプラグインを導入することでした。

How to Fix Email Delivery Issues

SMTP (Simple Mail Transfer Protocol) will fix email delivery issues by changing the way your emails are sent and properly authenticating them. SMTP is the industry standard for ensuring email deliverability, and WP Mail SMTP is the most flexible way to connect to many different SMTP services.

Below is a list of all of the ways you can use WP Mail SMTP to set up SMTP on your site, along with links to tutorials on each:

  • Gmail or G Suite: Works only with Google emails, more secure, no subscription
  • Mailgun: Works with any email, more secure, requires subscription
  • SendGrid: Works with any email, more secure, requires subscription
  • Other SMTP: Works with any email, less secure, no subscription

 

ということでそのプラグインを導入してみます。

SMTP Settings Overview

SMTP must be able to connect to your email provider, which is why it requires additional setup through a plugin like WP Mail SMTP.

Unlike our other options which use APIs to allow this setup information to be stored with Google, SendGrid, or Mailgun, the Other SMTP option in WP Mail SMTP requires this setup information to be stored directly on your site.

Below, we’ll go into more detail on each of the fields required to set up an “Other SMTP” option in WP Mail SMTP.

 

f:id:ohta-felica:20180127212857p:plain

 

「送信元アドレス」→返信メールの送信元という考え方

「送信者名」→返信メールの送信者名

メーラー」→

php」を使ってメールを送ろうとしたためうまくいかなかったわけだからこれを選択してもいいことはない。

gmail」のアドレスに転送して、そこから問い合わせ元に返信メールを送る場合はこちらを設定するのだろう。

smtp」→今回はレンタルサーバーから賦与されたメールアカウントを使用するのでこれを選択。

「返信先」→内容は書いてある通り。メールの返信先として送信元アドレスを指定するか否か。

 

 

ここからはSMTPの設定

f:id:ohta-felica:20180127182718p:plain

 

SMTP Host
This is the the address to the host’s SMTP server.

送信元メールアカウントのサーバー情報。

f:id:ohta-felica:20180127214939p:plain

 

f:id:ohta-felica:20180127215120p:plain

 SMPTポート番号。暗号化処理の方法によってポート番号が異なる。

プラグインではSSLではなく、TLSを推奨とあったので暗号化は「TLS」を選択。

この場合ポート番号は「587」となる。

SSL」を選択した場合のポート番号は「465」となる。

SMTP Port
The most common ports are 587 and 465, however hosts can and do change these. It’s not uncommon for web hosts to block these ports, so before you begin it’s always good to verify with your web host that the required port is open. If closed, most of the time your hosting provider can open it for you.

Encryption
SSL and TLS are the most widely used encryptions. If your email provider offers both, we recommend TLS. It is worth noting that usually TLS encryption is used with port 587, while SSL is used with port 465.

 

認証は必要なので「ON」

SMTP username」および「SMTP password」はメールアカウントのユーザー名とパスワードを記入すればよい。

Authentication
Modern email providers require authentication. Disabling it may be needed for local development or other edge case scenarios, however most providers need this turned on.

SMTP Username
Your username is typically your email address for the email provider; e.g. john@gmail.com or john@hotmail.com. Some providers such as AOL require the non-email format; e.g. if your email is john_doe@aol.com your username would be john_doe.

SMTP Password
This is your email account password. Please note although the password is not viewable in the settings, it is still stored in the database as plain text. This is required since establishing the SMTP connection requires sending the password in plaintext.

With this in mind, we highly recommend you set up your password in your WordPress configuration file, wp-config.php for improved security. For extra instructions, check out WPBeginner’s tutorial on how to edit the config file.

 以上のセッティングにより、無事コンタクトフォームからメールが送信できるようになりました。

 

mochaのトラッキングデータを使って、AEでスタビをかける方法

手順1

プレミア、タイムライン上のスタビが必要なクリップを選択して右クリック。

下図の箇所を選択する。こうすることでこのクリップをAEで扱えるようになる。

AEで作業すると、自動的にプレミアにその結果が反映される。(リンクしている)

 

f:id:ohta-felica:20180123171724p:plain

 手順2

 トラッキングしたいコンポジションを選択して、「mocha AEのトラック」を選択する。

f:id:ohta-felica:20180123172053p:plain

 手順3

ラッキングしたい面の中で動きのある不要な部分のマスクを作ってトラッキングする。

f:id:ohta-felica:20180123172237p:plain

 手順4

再びレンダリングしないように、「歯車」のアイコンをクリックして消しておく。

こうしておくと、一度計算したトレッキングデータを再び計算しないようになる。(計算が早くなる、というよりもこうしておかないとフリーズしてしまいます)

忘れてしまうと、1フレームのレンダリングに異常な時間がかかるので、おかしいときはここを再確認するとよい。

f:id:ohta-felica:20180123172935p:plain

 

 

手順5

ラッキングしたい対象を選択して、マスクする。

f:id:ohta-felica:20180123173047p:plain

 

手順6

新規でできたレイヤーを「不要な部分」のトラッキングデータを含む(この場合レイヤー2)レイヤーの下に、これからトラッキングする「必要な部分」のレイヤーを移動しておく。こうすると不要な部分は、必要な部分をトラッキングする際に省かれるので割とまともにトラッキングしてくれる。手順5,6を省くと動きのあるものに引きずられてうまくトラッキングできない。

f:id:ohta-felica:20180123173112p:plain

 

f:id:ohta-felica:20180123173146p:plain

 

 

手順7

ラッキングが終わったら、必要な部分のトラッキングデータが含まれる(この場合はレイヤー3)レイヤーを選択した状態で、「file」「export tracking data」。

画面のトラッキングデータ(画面の揺れ方のデータ)をAEにエクスポートする。

f:id:ohta-felica:20180123174641p:plain

 

 この時大切なのは「invert」にチェックをしておくこと。

揺れを止めるためには、揺れのデータと逆のベクトルに移動するデータが必要だからです。ここでエクスポートするデータの内容は、ポジション(X軸、Y軸、拡大率、回転)の移動量を「相殺する移動量」のデータ。

 

f:id:ohta-felica:20180123174718p:plain

 

 手順8

 スタビをかけたいコンポジションを選択して、「ctrl」+「v」(ペースト)

 

f:id:ohta-felica:20180123174834p:plain

 位置(position)拡大率(scale)回転(rotation)のデータが、全フレーム分(全フレームがキーフレーム!)ペーストされた。 

f:id:ohta-felica:20180123175426p:plain

 このうち、スケールのキーフレームは必要がないので(足りない箇所は後でトリミングすればよい)「スケール」を選択して「リセット」する。

 

f:id:ohta-felica:20180123175447p:plain 

 

これでmochaを使ってスタビをかける方法はおしまい!

いや、これすごいですよ、、、

 

 

参考動画↓

vimeo.com

 

 

AE の使い方メモ-3Dレイヤー

3Dの動きをつけるためにはこのボタン(下図赤丸部分)を押して、「3Dレイヤー」に変換しておかなければならない。

「ヌルオブジェクト」を使って、もろもろの操作を設定するときには、ベースになるレイヤーだけでなく、「ヌルオブジェクト」も3Dレイヤーにしておかなければならない。

f:id:ohta-felica:20180122125312p:plain

 ベースになるレイヤーを直接触るのではなく。その上の階層に「ヌルオブジェクト」を作成して、そのレイヤーで作業する。PSの調整レイヤーのような考え方。

「ヌルオブジェクト」と元のレイヤーは紐づけておく。下図参照。

f:id:ohta-felica:20180122125553p:plain

 

 別素材を使って、同じモーションを作るときは、

もともとの素材を選択した状態で、下図参照、、、

f:id:ohta-felica:20180122130023p:plain

 

 プロジェクトパネルから、同じ動きを作りたい素材を「alt」を押しながら、元の素材の上にドラッグして置き換える。

 

AE コンポジションの値を編集したい

コンポジションパネルで右クリックするとメニューが現れる。

「スイッチ」をチェック。

 

f:id:ohta-felica:20180122093650p:plain

 

リトルリーグのHPをボランティア製作

というわけで、できるだけ楽をしようとプラグインを探しています。

こんなのを見つけたので、試してみます。

f:id:ohta-felica:20180114200015p:plain

 

 

HOME | 東京中野リトルリーグ

wordpressをサーバーにアップロードする手順

知人に頼まれて小さなHPを製作する。こういうのは久しぶりで色々忘れていることが分かったので頭を整理するつもりで、、、

 

wordpressを使うためにはMYSQLが使えるプランを選択しなくてはならない。

f:id:ohta-felica:20180114150030p:plain

 

FTPアカウントの設定

 

まずはFTP(file transfer procotol)アカウントの設定。

ファイルをサーバーに転送するための 設定ですね。

f:id:ohta-felica:20180114160255p:plain

 

f:id:ohta-felica:20180114160413p:plain

 

「ホスト名」は自分で設定。好きな名前を付ける。この接続に対して自分が管理しやすいように名前を設定するだけ。

 「ユーザーID」は「FTPアカウント名」 

「パスワード」はこのケースの場合、初期設定されていないので「メニュー」をクリックしてから自分で設定する。通常は管理者アカウントの接続情報がレンタルサーバー会社から送られてくる。 

「ホスト名」は「サーバー情報」の「ホスト名」。「FTPサーバー名」など記載があるもの。FTPサーバーの名前を入力すればよい。

 

ネットオウルのサーバ設定画面↓

f:id:ohta-felica:20180114161015p:plain

 

お名前ドットコムの設定画面↓

f:id:ohta-felica:20180121070218p:plain

 

ブラウザに「ドメイン名」を入力すれば閲覧できる。

f:id:ohta-felica:20180114161530p:plain

  

wordpressのサイトに行って、、、最新版をダウンロード。

 

サーバー上にファイルがあればそれらをすべて削除してから、「wordpress」フォルダの中身をアップロードする。

↓画面左側(ローカル)を、右側(サーバー)にアップロード。

f:id:ohta-felica:20180114162937p:plain

 アップロードが完了したら、「ドメイン名」をブラウザに入力する。

すると以下の画面になる。 

 

②データベース設定

f:id:ohta-felica:20180114163437p:plain

 

 「さあ、はじめましょう」をクリックすると以下の画面に入ります。

wordpressが使うデータベースの設定をこれからしていく。

f:id:ohta-felica:20180114163556p:plain

 

 以下のような管理画面からデータベース設定画面に入り、「データベース名」「ユーザー名」「パスワード」「ホスト名」をwordpressの初期画面の該当箇所に入力していけばよい。

f:id:ohta-felica:20180121070609p:plain

 

ネットオウルのフリープランの場合、サーバーのデータベース管理ツールより、データベースの設定をしなくてはならない。

下の画面、黄色い箇所に、「データベース名」を入力する

f:id:ohta-felica:20180114164243p:plain

 

f:id:ohta-felica:20180114164512p:plain

 

次に、「データベース名」の下の項目「ユーザー名」を設定する。

以下の画面より↓

f:id:ohta-felica:20180114164724p:plain

 

 以上の設定がすんだら、「権限追加可能ユーザー」からユーザーを選んでおく。

f:id:ohta-felica:20180114165856p:plain

 

 それから以下の画面を入力していく。 

「データベース名」「MySQLユーザー名」設定した「パスワード」「MySQLホスト名」を以下の画面、該当箇所に入力していく。

f:id:ohta-felica:20180114163556p:plain

 

 するとこのような画面に移動する。

 

wordpressのアカウント情報を設定する

f:id:ohta-felica:20180114170241p:plain

 

wordpressの「ダッシュボード」から、いつでも変えられるのでとりあえず進む。

f:id:ohta-felica:20180114170425p:plain

 

f:id:ohta-felica:20180114170511p:plain

 

f:id:ohta-felica:20180114170530p:plain

 

 そして、、、、

f:id:ohta-felica:20180114170647p:plain

 ダッシュボードにたどり着きました。

 

④ダッシュボードを使って初期の設定を済ませる

 

好きなテーマを入れて、初期設定を済ませる。

ダッシュボードで設定したことはサーバー上で完結しているので、設定が終わったら一度ローカルに全ファイルをダウンロードしておく。

AE コンポジションの背景は何色?

ベクトルオブジェクトをイラストレーターで作成してから、AEに読み込んだ。

背景色が白になってしまい、非常に困ったので備忘録。

AEはめったに使わないので、、、

これはAEのコンポジションの設定で背景色が決まってしまったためで、イラストレーターで作成したデータの問題ではなかった。

 

では、コンポジションの背景色の設定方法。

f:id:ohta-felica:20180108092649p:plain

 

f:id:ohta-felica:20180108092743p:plain

 

f:id:ohta-felica:20180108092818p:plain

 透明(透過)背景は設定できません。

知らないといろいろ苦労します、、、、