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

webかたつむり

WEB制作会社のフォトグラファー

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

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

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

PS 直下のレイヤーにだけ調整レイヤーの効果をかける方法

調整レイヤーを直下のレイヤーにだけ効かせるには、

調整レイヤーとその下のレイヤーを選択して、

クリッピングマスクを作成」すればよい。

以下の記事を参照。

法則(2)特定のレイヤーにだけ効果をかけたい場合は「クリッピングマスクを作成」機能を使う

例えば先ほどのレモンの写真において、真ん中の「レモン2」だけに調整レイヤーの効果を及ぼしたい場合についてお話ししたいと思います。

レイヤーウィンドウの、下図の部分をクリックして、「レモン2」というレイヤーが選択された状態(レイヤーのパネルが青い表示になります)にしてください。その状態のままで、「レイヤー」→「新規調整レイヤー」→「色相・彩度」と、たどります。

img_soft_color16_50.jpg

ここで、 最初のウィンドウをデフォルトのままOK…は「せ・ず・に!」、「下のレイヤーを利用してクリッピングマスクを作成」のチェックを「ON」にします!(びっくりさせてすいません。今まで「デフォルトでOK」ばかりでしたが、初めてここを使う時が来ました!)

img_soft_color16_51.jpg

レイヤーウィンドウの「色相・彩度1」の左端に、図のような矢印がついたら、成功です。この調整レイヤーの効果は「レモン2」というレイヤーにしか、かからなくなっています。

img_soft_color16_52.jpg

ちなみに、この「矢印を解除」するためには、「調整レイヤーを選択した状態」で「レイヤー」→「クリッピングマスクを解除」。

img_soft_color16_53.jpg

もう一度「矢印を付けたい」場合は、「調整レイヤーを選択した状態」で「レイヤー」→「クリッピングマスクを作成」で行なうことができます。

img_soft_color16_54.jpg

これが

法則(2)特定のレイヤーにだけ効果をかけたい場合は「クリッピングマスクを作成」機能を使う 

です!

 

フォントの足りないPDFファイルをアウトラインデータ化する方法

AIで開けるPDFデータを支給されたものの、自分の環境に必要なフォントがない、しかもこれとは別にアウトラインデータがない時は、、、

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

まずPDFファイルをAIで開いて、すべてのオブジェクトを削除してアートボードだけの状態にする。それから「別名で保存」する。つまり、白紙の状態にする。

この時、保存ファイル形式は「PDF」ではなく「AI」にしておくこと。

オリジナルのファイルサイズと同じサイズのアートボード(白紙状態)を作る。

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

 ↓AI形式で保存する

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

 ③

②で保存した白紙状態の「AIファイル」に、オリジナルのPDFファイルをドラッグ&ドロップする。

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

④ 

「オブジェクト」「透明部分を分割統合」

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

 ⑤

「すべてのテキストをアウトラインに変換」を選択する。→「OK」

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

 ⑥

この時すべてのオブジェクトが「グループ」化され、「クリッピングマスク」されているので、グループとクリッピングマスクを解除する。

 

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

 

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

 ⑦

そうするとすべてのオブジェクトがアウトライン化され、フォントが不足している問題が解消する。この状態で「AI」で保存すれば、アウトライン化されたAIファイルが作成できる。

トンボの付いたAIデータをトンボで切り出す方法

タブの下にある「ドキュメント設定」を開く。

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

 「アートボードを編集」を開く

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

 アートボードのサイズをトンボのサイズに合わせる。

結局のところ、アートボードのサイズを編集していることになります。

この時、ドキュメントの中心からサイズを切り出すのか、それとも左上から切り出すのか、そのファイルの状態によります。

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

 

クラス名を変える

ini.php

/ local
$site_url = $_SERVER['DOCUMENT_ROOT'] . '/';
$webroot = '/';
$current = '';

 

header.php

<nav id="global-nav"><nav id="global-nav">     <ul id="navi_list">        <li class="<?php echo $current == 'top' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>">ホーム</a></li>        <li class="<?php echo $current == 'service' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>service/index.php">事業内容</a></li>        <li class="<?php echo $current == 'product' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>product/index.php">商品情報</a></li>        <li class="<?php echo $current == 'kit' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>">キット</a></li>        <li class="<?php echo $current == 'faq' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>faq/index.php">よくある質問</a></li>        <li class="<?php echo $current == 'news' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>news/index.php">お知らせ</a></li>        <li class="<?php echo $current == 'info' ? 'select':'' ?>" class="red"><a href="<?php echo $webroot; ?>">お問い合わせ</a></li>      </ul>    </nav>   

 

 

script

<script><script> $( function () { $( '#navi_list li a' ).on( 'click', function () { $( this ).parent('li').addClass( 'select' ).siblings( 'li.select' ).removeClass( 'select' ); } ); } ); </script>

 

 

inex.php他第2階層のページ

カレントページがどこかを教えてあげる、、、

<!-------------------------------------------------------------<!-------------------------------------------------------------header--------------------------------------------------------------> <?php  $current = 'top'; include($site_url.'./header.php');  ?>

xampp localhost

qiita.com

やりたいこと

デフォルトでは,XAMPPのバーチャルホスト(localhost)のパスは,Cドライブ直下にインストールした場合C:\xampp\htdocsとなっているが,
C:\Users\Documents\testなどの任意のパスもバーチャルホストにしたい.

 環境

Windows 8
XAMPP 5.6.14

 手順

 手順1. フォルダパスとドメイン名の設定

まず,C:\xampp\apache\conf\extra\httpd-vhosts.confの20行目あたりにある

##NameVirtualHost *:80

コメントアウト(##)を消す.

次に,以下のように追記して参照したいフォルダを指定.

<VirtualHost *:80>
    DocumentRoot "C:\Users\Documents\test"
    ServerName localhost2
</VirtualHost>

DocumentRootにはフォルダパスを,ServerNameには任意のドメイン名を設定する.
ここではドメイン名はlocalhost2とする.

 手順2. アクセス権付与

注意点として,C:\xampp\htdocs以外をバーチャルホストとするとき,別途アクセス権を与えなければならない.そうしないと403エラーになる.
引き続きC:\xampp\apache\conf\extra\httpd-vhosts.confに,以下のように追記すればOK.

<Directory "C:\Users\Documents\test">
    Options Indexes
    AllowOverride All
    Require all granted
</Directory>

Options Indexesとは,以下のようにブラウザ上でフォルダのインデックスGUIを見れるようにするオプション.書かなくてもOK.

image

 手順3. hostsファイル編集

C:\Windows\System32\Drivers\etcにある,hostsを開き,以下のように先ほど設定したドメイン名を追記.

127.0.0.1       localhost2

これでOK.
XAMPPからApacheを起動し,http://localhost2 を叩けば上記の画像のように任意のフォルダをバーチャルホストにできる.

 

xampp localhost

qiita.com

やりたいこと

デフォルトでは,XAMPPのバーチャルホスト(localhost)のパスは,Cドライブ直下にインストールした場合C:\xampp\htdocsとなっているが,
C:\Users\Documents\testなどの任意のパスもバーチャルホストにしたい.

 環境

Windows 8
XAMPP 5.6.14

 手順

 手順1. フォルダパスとドメイン名の設定

まず,C:\xampp\apache\conf\extra\httpd-vhosts.confの20行目あたりにある

##NameVirtualHost *:80

コメントアウト(##)を消す.

次に,以下のように追記して参照したいフォルダを指定.

<VirtualHost *:80>
    DocumentRoot "C:\Users\Documents\test"
    ServerName localhost2
</VirtualHost>

DocumentRootにはフォルダパスを,ServerNameには任意のドメイン名を設定する.
ここではドメイン名はlocalhost2とする.

 手順2. アクセス権付与

注意点として,C:\xampp\htdocs以外をバーチャルホストとするとき,別途アクセス権を与えなければならない.そうしないと403エラーになる.
引き続きC:\xampp\apache\conf\extra\httpd-vhosts.confに,以下のように追記すればOK.

<Directory "C:\Users\Documents\test">
    Options Indexes
    AllowOverride All
    Require all granted
</Directory>

Options Indexesとは,以下のようにブラウザ上でフォルダのインデックスGUIを見れるようにするオプション.書かなくてもOK.

image

 手順3. hostsファイル編集

C:\Windows\System32\Drivers\etcにある,hostsを開き,以下のように先ほど設定したドメイン名を追記.

127.0.0.1       localhost2

これでOK.
XAMPPからApacheを起動し,http://localhost2 を叩けば上記の画像のように任意のフォルダをバーチャルホストにできる.

 

git hub からクローンを作成する

gitをインストールしてから、「gitGUI」を開く。

「clone existing repository」をクリックして、gitHUBにあるリポジトリのクローンをローカルに作成する。

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

 

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

 「source location」にgitHUBリポジトリURLを入力する。

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

 「target directory」にはローカル上の保存先を入力する。

既存のフォルダは指定しない。ここに入力した内容で新規にフォルダが作成される。作成中、、、、

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

 ローカルにリポジトリが作成されました。

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

 dreamweaverを立ち上げます。

「サイトの管理」

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

 「新規サイト」

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

 サイト名を入力する(自分で決める)

ファイルの場所を「ローカルサイトフォルダ」に入力する。

「保存」「完了」

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

 すると勝手に「gitビューを表示」など、gitとの紐づけがなされています。

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

 「ウィンドウ」「git」でgitウィンドウを開いておくと、「コミット」「プッシュ」「プル」などをドリームウィーバーからできそうです。

git hub install

サインアップ画面。個人のアカウントを登録する。 

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

 publicかprivateかを選択。privateは有料。 

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

プランはいつでも変更が可能みたいです。その下のチェックボックスをクリックして、先に進みます。

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

 

自分のチームを作成する。

チームの名称と、請求書の送り先となるメールアドレスを入力する。(有料プラン利用の際に、、、)

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

 仕事用のアカウントと個人用のアカウントの関係は今の段階ではわかりません。

とにかく作ってみます。

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

これでアカウントは作ることができました。 

アカウントのページに入って、どんな具合か探検してみます。 

 

「setting」タブを開いてみます。

「organization」アカウントなので、メンバーのアクセス権限などを設定できるようです。メンバーに、「リポジトリの作成」「リポジトリの削除」「リポジトリの見た目(?)」などを変更する権限を与えるのかを設定できます。とりあえずすべてチェックボックスを外しておきました。

 

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

 一番下にあるデフォルトの権限を以下のように変更しました。

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

「people」タブを開いてみます。

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

 どうやら「organization」アカウントのオーナーになっているようです。

右上の緑色のボタンをクリックして、メンバーを招待できるようです。

 

「repositories」タブを開いてみます。 

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

 ここから新規のリポジトリを作成できそうです。リポジトリのオーナーを選択できます。「organization」アカウントにするのか「personal」アカウントにするのか選択できるのです。なるほど!これは便利ですね。

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

 

プルダウンメニューにある「git ignore」とは以下のようなものらしい。

基本.gitignoreを使うと無視する(Gitのトラッキングの対象外とする)ファイル or ディレクトリを指定できる。 .gitignoreは複数のディレクトリに置くことができる。 

「create repository」ボタンをクリックして、リポジトリを作成します。

「readme」ファイルを作成するにチェックしていたので、自動的にファーストコミットされて、readmeファイルが作成されています。 

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

 中段にある、「upload files」をクリックして、リポジトリにファイルをアップロードしようと思います。 

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

 

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

 一度にアップロードできなかったので、複数回に分けてアップしました。

クローンを作るには、右上の緑ボタンをクリックするみたいです。

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

 クローンを作るのに必要なURLが表示されています。