ローカル環境のWordPressサイトをBracketsでライブプレビューする方法(MEMO)

PCのローカル環境のWordPressサイトをBracketsでライブプレビューする方法を調べたのでメモします。

ローカル環境はbitnami、MAMPだった場合も手順は変わらないと思います。


bitnami側の準備
(1)bitnamiの「manager-osx」をクリックして起動させます。

image

(2)「Manage Servers」タブで「Start All」で全て起動させます。 

image

(3)「Go to Application」でWordPressサイトを開きます。

開いたWordPressサイトのhttp://localhost:8080/wordpress/のURLをコピーします。 

image

Brackets側の準備
(1)Bracketsで「ファイル→プロジェクト設定」をクリックします。

image

(2)bitnami側の準備の(3)でコピーしたURLを貼り付けて「完了」をクリックします。 

image


(3)Bracketsでライブプレビュー(Command+Ait+P)をするとWordPressサイトがブラウザで表示されます。 

image

BracketsでWordPressサイトをライブプレビューしながらSCSSでコーディングするとコーディングが捗りそうです。

前にWordPress案件をしてた時にBracketsがあれば倍以上は作業が早かったかもしれません。
その時使っていたDreamweaverはコーディングもライブプレビューも使いにくかったです。(2013年頃)

私のWordPressコーディング技術が初心者なせいもありますけど、ソフトの動作が重いと必然的にコーディング作業も遅くなるとは思います。

環境が構築できたら後はCSSコーディングでデザインカスタマイズかなと思います。
従来通りに「静的サイト制作→PHPコーディング」の手順で行く予定です。

GW期間にAMP対応のブログテーマを作成を目標にしています。

結構、BracketsはWebコーディングに関しては何でもできるエディタのような気はしました。
エクステンション(拡張機能)でかゆいところに手が届く的な感じです。

実際Dreamweaverを使っていた時よりコーディング力は上がっていると感じます。
SASSがスムーズに使えてリアルタイムにコンパイルできる分だけDreamweaverよりはコーディングに集中できるからだと思います。

表示されているサイトは下記のWordPress書籍のサンプルです。


▼参考になった記事

ローカル環境でWordPressのテーマ(SASS)をBracketsでライブプレビューしながら編集する

http://qiita.com/hiro_hosono/items/580352247ebaa450d1aa

ローカル環境のWordPressサイトをBracketsでライブプレビューする方法(MEMO) PCのローカル環境のWordPr…


新しくサイトを開設しようとしている方、またはすでにサイトを公開している方へ。 サイトを作るに当たって、キャッチコピーや、使用するテキスト、コンテンツ名など、文章を作る機会はたくさんありますよね。 どうやったらユーザーに興

キャッチコピーの作成で迷ってしまう方へ




不労所得を色々試してみた収入結果 (アドビストック、アドセンス広告ブログ)

Adobe Stockの収入結果


Adobe Stockは3月14日から始めました。 ドクロのイラストを1枚のみアップしました。

その後、4月7日に1枚売れました。

1枚売れたので、4月11日から6枚イラストを追加しました。

その結果、4月に3枚売れました。 合計126円の報酬になりました。

イラストのジャンルはバラバラでも売れるみたいです。

初めのうちは思いついたものを描いてアップするだけでも良さそうです。

私の場合は手探り状態なので色んなテイストでイラストを描いてアップしています。

Adobe Stockの収入結果

アドセンスブログの収入結果

下記は2016年1月〜2017年3月末の収入結果です。

Googleから支払われた報酬は過去に2回です。

  • 2016年7月‥8,508円
  • 2017年1月‥9,010円

合計金額:17,518円

本業の片手間に自分のブログや無料素材サイトをポツポツと更新していました。

このブログも150記事を越えたあたりから収益が発生し始めました。

現在は無料素材サイトの更新もやめて、ブログは月に3〜15記事程度しか更新していません。


自分でサイト運営している場合だと何をテーマにしても良いわけです。

私のようにWebデザイン、イラスト関係の技術系の勉強ブログ的なものでも良いし。 人によっては漫画サイト運営してアドセンス広告で収入得てる人もいます。


AdobeStockとアドセンスブログで結果が出るのが早かったのはAdobeStockだと思いました。わずか1ヶ月で報酬が発生したので。

アドセンスブログの場合は記事をある程度増やさないと収益発生しないし、支払い最低金額8,000円にもなかなかたどり着けません。


デザインやイラストが作れる人が向いている不労所得はAdobeStockのようなストックフォトサイトだと思います。

Adobe Stockの場合は下記サイトの説明にある通り、アカウントの収益が一度50ドルに達すると報酬を受け取ることができます。

50ドル=約5,564円でAdobeに報酬を請求できます。


▼Adobe Stockにコンテンツを投稿

https://helpx.adobe.com/jp/stock/how-to/upload-content-to-adobe-stock.html


個人的にはFotoliaみたいなクレジットで表記されているより何円売れたか表示されているAdobeStockの方がわかりやすいと思いました。

画像アップロードに関してもAdobeStockの方がアップしやすいです。

画像を認識するAI?でタグが出てくるのでタグ記入の手間を減らしてくれています。


▼源泉徴収申請フォーム の入力方法について下記サイトが詳しく説明されていて参考になります。

Adobe Stockに提出する「W-8BEN」を書いたので紹介します。

http://stock-photo.ldblog.jp/archives/13826363.html


ストックフォトの他にはイラストACのような無料素材サイトもありますが、クリエイターが作品の著作権譲渡しなければならないし、 著作権に関してトラブルあればクリエイター側が賠償請求をされるようです。

規約に納得いかない部分も多いし、投稿は審査制で5000円以上にならないと換金できないようになったので今年の1月にイラストACはやめました。

審査制で報酬5000円以上でないと換金できないのはAdobeStockと条件が変わりません。


素材販売はしばらくはAdobeStockで頑張ろうと思います。

まずは100個登録すれば数千円程度の収入を毎月得ることもできそうです。

不労所得を色々試してみた収入結果 (アドビストック、アドセンス広告ブログ) Adobe Stockの収入結果Adobe…





プロフィールに存在感を与えたい!Animate CC(Flash)で歩くアバターを作る方法

(1)ボーンツールを使用します。

シンボル化した手足胴体をなぞるようにつなぎます。

(2)タイムラインで何秒間のアニメを作るか決めてフレームを挿入します。

(3)ボーンツールで作った関節をマウスドラッグして左右に動かして歩いているようにポーズを作るとアニメーションの完成です。私は3箇所でポーズを作りました。

(4)Animate CCでPNGシーケンスを選択し書き出した後でPhotoshopで書き出したpng画像を開きます。 その後、Web用に保存をしてGIF画像として保存します。

こんな感じでプロフィール画像のアニメを作成しています。

▼過去の関連記事

Adobe Animateの基本操作・綺麗にGIFアニメを書き出す方法

▼参考サイト

Adobe Animate CC「アニメーションキャラクターでリアルな動きを表現する 」

プロフィールに存在感を与えたい!Animate…




bitnamiで簡単にMacのローカル環境へWordPressを設置する方法

AMP対応のWordPress構築に興味が湧いてきたのでWordPressブログテーマ構築を久しぶりに始めました。

普段はランディングページのデザインとコーディングの案件ばかり受けているためWordPressに関してはテーマ作成程度の知識しかありません。

私の場合はWordPressは趣味の範囲で楽しむ程度に使っています。

私はMacを使っているのでbitnamiというWordPressをインストールできるツールを使ってローカル環境へWordPressサイトを作りました。

PCにテーマやプラグインのデータがあるとバックアップにもなるので、必ず新しいWordPressサイトを作る時はローカル環境から作ります。


(1)bitnamiのサイトへ行きMac用のインストーラをダウンロードします。
https://bitnami.com/stack/wordpress

image

(2)インストーラをクリックして開きます。

image

(3)言語は日本語がないので「English」を選びます。

image

(4)セットアップ画面が開きます。「Next」をクリックします。

image

(5)インストールするフォルダはデフォルトのままで「Next」をクリックします。

image

(6)WordPressを設置するフォルダを選びます。 初期のままでも問題ないので「Next」をクリックします。

image

(7)アカウント設定をします。 名前、ログイン、パスワードを任意のものに変えて設定します。

image


ログイン名を初期設定の「User」のままにして、次へ進むとエラーみたいになりました。 そのため「admin」に変更しました。

本番サーバーではセキュリティの安全のために変更しようと思います。

(予測されやすい「admin」はWordPressでは絶対ダメです)

(8)ブログ名を決めて入力します。 後で変更可能なので私はデフォルトのままにして「Next」へ進みました。

image

SMTPの設定です。 ローカルでテーマ制作する場合には必要ないと思ったので私は省いて「Next」へ進みました。 必要な場合はSMTPの設定します。


(9)途中、クラウドの設定もありますがここでは省きました。 インストールするかどうか聞かれるので「Next」へ進みます。 

image

インストールが始まるのでしばらく待ちます。

image

(10)最後は「Finish」でインストールが完了します。

image

(11)下記のページがブラウザで表示されます。 下記のURLでWordPressサイトへアクセスできます。

image


初期のWordPressアドレスhttp://127.0.0.1:8080/wordpress/
管理画面アドレスhttp://127.0.0.1:8080/wordpress/wp-admin


bitnamiのWordPressを日本語化する方法

(1)「Settings」→「General」を選択します。

image

(2)「Site Language」を「日本語」に選択し「Save Changes」をクリックするとWordPressが日本語化されます。

image

bitnamiはデフォルトで以下のプラグインが入っています。 「All In One SEO Pack」と「JetPack」はよく入れるので助かるかなと個人的には思いました。


「VersionPress」って知らないから何かな?と思ったらWordPressをGitのバージョン管理してくれるプラグインのようです。

「WP-Mail-SMTP」はSMTPサーバを使ってメールを送信できるようにするプラグインでContact Form 7の補助的なプラグインのようです。

image

▼参考になったサイト

PCにWordPressローカル環境を「Bitnami」で作成する方法
https://nelog.jp/how-to-install-bitnami


Contact Form 7プラグインでGmailのSMTPサーバを使ってメール送信
https://www.adminweb.jp/wordpress-plugin/list/index12.html

▼WordPressテーマ構築の参考になりそうな書籍

bitnamiで簡単にMacのローカル環境へWordPressを設置する方法 AMP対応のWordPress構築に興味が湧いてき…




いちご(苺)柄イラストの壁紙(ブルー) (ホワイト・白)[Adobe Stock素材販売]

いちご(苺)柄イラストの壁紙背景の水色(ブルー)と背景白の2種類をAdobe StockとFotoliaで販売しました。

いちご(苺)柄イラストの壁紙(ブルー)

→Adobe Stockで見てみる

→Fotoliaで見てみる


いちご(苺)柄イラストの壁紙(ホワイト・白)

→Adobe Stockで見てみる

→Fotoliaで見てみる

Illustratorの素材作りにオススメな書籍

井上 のきあ MdN 2010-04-09

いちご(苺)柄イラストの壁紙(ブルー) (ホワイト・白)[Adobe…





Illustrator CC 2017.1.0の新機能「画像の切り抜き」の使い方

Illustrator CC 2017.1.0に「画像の切り抜き」機能が追加されました。

詳細はAdobe公式サイトで確認できます。

▼画像の切り抜き

https://helpx.adobe.com/jp/illustrator/using/crop.html

▼その他、Adobe Color テーマパネルの編集も可能になりました。

https://helpx.adobe.com/jp/illustrator/using/adobe-color-themes.html

画像切り抜きの方法


(1)写真を選択した状態で「画像の切り抜き」をクリックします。

(2)以下のようなメッセージが出てくるので「OK」をクリックします。

(3)ウィジェットコーナーとエッジハンドルをドラッグして切り抜きたい箇所を指定して切り抜きます。


Illustratorでリンク画像や埋め込み画像の切り抜きができると
Webデザインカンプ作成時にクリッピングマスク後の写真の切り抜きができるから便利です。

去年「アセットの書き出し」が使えるようになってIllustratorのWeb画像の書き出しがより便利になりました。

今回追加された「画像の切り抜き」と「アセットの書き出し」の機能を合わせるとWebのデザインカンプ作成が捗りそうです。

クリッピングマスクした写真を「画像の切り抜き」をして「アセットの書き出し」をすると余分な余白がなくなります。

ただし、「画像の切り抜き」をした後の画像は切り抜き前の画像の大きさには元に戻せないようなので、その点注意が必要です。

前回のバージョンではクリッピングマスクした写真で「アセットの書き出し」を行うと白い余白ができてしまうので写真はアートボードで個別に切り抜いていました。

これからはその必要もなくなりますね。

「画像の切り抜き」は今後よく使う機能になると思うのでIllustratorでキーボードショートカットとして登録するのがオススメです。

私はalt+command+でキーボードショートカットを作りました。

command+@でドロップシャドウの効果が使えるようにもしています。

(Webデザインではドロップシャドウもよく使うので)

Illustratorもショートカットを自分好みに割り当てると作業の時短化になります。

Illustrator CC 2017.1.0の新機能「画像の切り抜き」の使い方 Illustrator CC…






Web制作をしていく際に必ず必要になるのがドメインとサーバーです。 「Web制作」という点では、デザインやコーディング、SEO等に目が行きがちですが、ドメインとサーバーもWeb制作を行う中で非常に大切な部分になります。

AuthCodeとは?ドメイン移管の基礎知識




Illustratorでクォータービュー(俯瞰イラスト)イラストを描いてみた

スマホアプリのゲームでよく見かける「クォータービュー」(俯瞰イラスト)のイラストに挑戦しました。

(1)ベースラインを作成する

マス目の角度が120度という指示だった場合は以下のようなマス目を直線ツールで作成します。

  1. 直線を引く
  2. 直線に角度をつける(回転30度)
  3. 水平コピーする
  4. 反転コピーする
  5. 分割してオブジェクト化する(パスファインダー→分割)
image

(2)ベースラインを参考に下絵を描く


私はベースラインを描く前にiPadで下絵をかいてしまったので見事に線がガタガタです‥。

他のイラストレーターの人はIllustratorで作成したベースラインをPSDで書き出してPhotoshopで下絵を描くようです。

image

(3)ベースラインに合わせてIllustratorで清書する


ベースラインの線を合わせてペンツールと長方形ツール、楕円形ツールを駆使して組み合わせると 下記のような郵便ポストが作成できました。

やっぱりラインに沿って書くと綺麗に描けます。

この方法ならゲームによくある箱庭風の背景イラストが描けそうですね。

(相当な時間はかかるだろうけど挑戦してみたい‥)

image

☆イラストの中の文字の角度について

POSTの文字も120度の角度に合わせないと不自然なので「シアー→垂直→角度30°」にしました。

image

完成イラストはAdobe Stockで販売してみました。

郵便ポストとハガキ(葉書き)
→Adobe Stockで見てみる

→Fotoliaで見てみる


▼こちらの書籍が参考になりました。


▼イラスト制作に使ったソフト、ペンタブレット

Illustratorでクォータービュー(俯瞰イラスト)イラストを描いてみた スマホアプリのゲームでよく見かける「クォータービュ…