harada のアーカイブ

Adobe XDのショートカット

2017年3月22日

PhotoshopやIllustratorと同じショートカットもあるのですが、オリジナルのものもあるので覚えたいです。 ## オブジェクト系 ### オブジェクトをグループ化 Command + G ### オブジェクトをロック Command + L ### オブジェクトを非表示 Command + ; ### オブジェクトからシンボルを作成 Command + K シンボルを作成すると、オブジェクトを一つ修正する
続きを読む

Illustratorの操作メモあれこれ

2017年3月17日

### Illustratorでのドロップシャドウ 効果>スタイライズ>ドロップシャドウ ### Illustratorでの透明や乗算 ウィンドウ>透明 ### 棒グラフの下に説明をつける データを入れる際に一行目に`"2017年"`など`"`でくくって記入する ### パーツを拡大 オブジェクト>パス>パスのオフセット ### パーツをweb用に保存 ウィンドウ>アセットの書き出し アセットの書き出しポップアップに
続きを読む

Illustrator CCでマテリアルデザインのカラーパレット(スウォッチ)を読み込むメモ

2017年3月14日

1. Googleの[公式サイト](https://material.io/guidelines/style/color.html#color-color-palette)から「Download color swatches」をダウンロードして、解凍します。 1. Illustratorの上部メニューの「ウィンドウ」から「スウォッチ」を表示させます。 1. 「スウォッチ」ウィンドウの右端の三本線のメニューを開きます。 1. 「スウォッチライブラリを開く」にマウス
続きを読む

ウェブページをPDFに保存した際にフォントが埋め込めれているかどうかの判断方法

2017年3月10日

Chromeで印刷画面を出して送信先を「PDFに保存」にしてウェブページをPDFに保存する際、そのウェブページで利用しているフォントが TrueTypeでない場合フォントが埋め込まれないため、一部のサービスではPDFファイルとして利用できないときがあります。 フォントを埋め込みできているかいないかは、Acrobat Readerの「ファイル」>「プロパティ」>「フォント」で確認できます。 ここにはPDF文書で利用されているフォントが羅列されるのですが、埋め込まれ
続きを読む

コマンドでMacのどのフォルダが重いのかを特定する

2017年2月28日

1. ターミナルを起動して以下のコマンドを打ちます。 ``` sudo du -sh /* ``` パスワードを要求されるので打ちこんでしばらくまちます。 ``` 容量 ディレクトリ名 ``` でリスト表示されるので、重いディレクトリ名を確認し再度以下のコマンドを打ちます。 ``` sudo du -sh /重いディレクトリ名/* ``` 重いディレクトリ名とは`/Users/名前/Library/*`のようなやつです。
続きを読む

UXデザインツールのAdobe XDがすばらしい

2017年2月21日

新しいアプリのプロトタイプをデザインするにあたってUXデザインツールの[AdobeXD](http://www.adobe.com/jp/products/experience-design.html)をはじめてインストールしてみました。 ### Adobe XDとは > Adobe Experience Design CC(ベータ版)(以下、Adobe XD)は、Webサイトやモバイルアプリのデザイン、プロトタイプの作成をこれ1本で実現する、まったく新しいク
続きを読む

Font Awesomeでサイトに載っているアイコンが出てこない時はファイルを更新する

2017年2月17日

Font Awesomeをパソコンにインストールして、Cheatsheetに載っているアイコンをコピーして利用しようとしたときに、化けて出てこない場合があります。 それは単純にファイルが古くなっている場合です。 以下の手順でフォントファイルを更新しましょう。 1. Macの場合はフォントブックを開き、Font Awesomeファイルを削除します。 1. http://fontawesome.io/で最新のFont Awesomeファイルをダウンロー
続きを読む

FirefoxとAdobe Acrobatを利用してPDF/X-1aでwebページを出力する

2017年2月14日

覚書です。 ### Firefoxでの操作 1. 印刷したいページで「Command + p」のショートカットで印刷プロパティを表示します。 1. サイズなどを調整します。 1. 左下の「PDF」とあるプルダウンから、「Save as Adobe PDF」を選択します。 1. しばらく待つと「Adobe PDFとして保存」というダイアログが表示されます。 1. Adobe PDFの設定 を「PDF/X-1a:2001(日本)」にし、「続ける」を押
続きを読む

スマホでjQueryUIのautocompleteを2回タップしなければならない現象を解消する

2017年2月8日

.autocompleteのところに以下のオプションを付与するとスマホ版でも1回のタップで選択できるようになります。 ``` $("#input").autocomplete({ open: function(event, ui) { $('.ui-autocomplete').off('menufocus hover mouseover mouseenter'); } }); ``` ただし、これをするとPC版でhov
続きを読む

WordPressで画像アップロードで自動生成される画像サイズの種類が増えていた

2017年2月3日

WordPressのメディアアップロードで画像をアップロードすると、オリジナルファイルの他に、「設定>メディア」で設定したサムネイル・ミディアム・ラージ各サイズの画像が自動で生成されます。 ……と、思っていたのですが、uploadsフォルダを見ていたらいつの間にかもう一種類(medium_large - 768x9999)というサイズのファイルが増えていました。 でも「設定>メディア」に設定する欄はありません。 ぐぐってみると、こちらの記事に詳しくかいてあり
続きを読む

スマホでのスクロールがスムーズではないときに設定するCSS

2017年2月2日

webページをスマートフォンで開いたときに、表示はおかしくないのにスクロールが遅いというか突っかかるような感じがするときは、以下のCSSをまずは設定してみるといいようです。 ``` html { -webkit-overflow-scrolling: touch; } ``` プログラムの動きがおかしいのかな?と思っていたのですが、こちらを設定したところ一発でスムーズにスクロールされるようになりました。 参考:[スマホでdivスクロールを滑らかに
続きを読む

WP_Queryのパフォーマンスを上げられるかもしれない指定

2017年2月1日

以下の動きが不要な場合はそれぞれ以下の指定をWP_Queryに加えるとパフォーマンスがあがるかもしれないようです。 `'no_found_rows' => true` ページャー機能が不要な場合 `'update_post_meta_cache' => false` カスタムフィールド系を利用しない場合 `'update_post_term_cache' => false` タクソノミー系を利用しない場合 `'fields' => 'ids'` IDの
続きを読む

SQLで条件分岐するCASEステートメント

2017年1月25日

p.meta_valueに値が入っていて、その値がNULLの場合は0にし、値が入っている場合はその値をそのまま利用する。 ``` CASE WHEN p.meta_value IS NULL THEN 0 ELSE p.meta_value END ``` 参考:[【SQL】CASEステートメント](http://blog.livedoor.jp/akf0/archives/50846472.html)
続きを読む

jQueryUIのautocompleteをフォームクリックで表示する

2017年1月24日

通常の記述だと下カーソルか、何か入力した際にしか表示されないのですが、フォームをクリックするだけで候補リストを出したいとおもい調べたところ以下の方法でできました。 ``` var stationsList = [ '東京駅', '上野駅', '品川駅', ]; jQuery('#IDを入力').autoc
続きを読む

プログラムでカスタムタクソノミーの項目を一気に追加する

2017年1月19日

プラグインを利用すること無く、カスタムタクソノミーに複数の項目を一度に追加したい場合などは以下を実行すると追加できます。 ex.WordPressでcourseというカスタムタクソノミーを追加している場合 ``` addCourse(); function addCourse(){ // wp_insert_term( '追加する項目の名前', 'タクソノミー名', array('slug' => '追加する項目のスラッグ')); wp_insert_te
続きを読む

number_format関数は小数点以下を四捨五入する

2017年1月16日

数字を3桁区切りにしてくれるnumber_format関数。 これに小数点込みの数字を含めると、四捨五入になるようです。。 知ってて利用しているのならいいのですが、無意識だと危ないですよね・・・! 四捨五入・切り捨て・切り上げにはそれぞれ以下の関数を利用します。 ``` $x = 123.5; //四捨五入 round( $x );//結果:124 //切り捨て floor( $x );//結果:123 //切り上げ ceil
続きを読む

サイトへのすべてのアクセスを特定の一つのURLにリダイレクトする

2017年1月13日

xxx.xxx.com といったURLのサイトを閉鎖して、アクセスを別のURLに飛ばすようにしたい際などは、以下のように.htaccessに記述します。 ``` RedirectMatch 301 .* http://zzz.zzz.com/ ``` 参考:[サイト引っ越し時のリダイレクト設定](http://www.weblog-life.net/entry/2016/03/04/060000) [リダイレクトチェックツール](http://tool.
続きを読む

AjaxでもURLを変更したい

2017年1月6日

pushStateという関数で、履歴やURLを操作することができるようです。 たとえばWordPressの検索画面をAjaxで動かしていたら、以下のようにすることで、 AjaxでもURLを変更することができます。 ``` jQuery(document).ready(function($) { var search_query = $("#s").val(); window.history.pushState(null, null, '/?s='+ s
続きを読む

Webページを印刷するときの余白をCSSで設定する

2017年1月5日

webページを印刷する際指定しないと結構大きな余白がとられてしまいますので、余白なしに設定したい場合などは以下のように設定します。 ``` @page { margin: 0; } ``` ただし、印刷時の動作はブラウザによって大きく異なるため十分に確認を行うようにしてください。 また横向きと縦向きも以下のように指定できますが、こちらは効かないブラウザも多いようです。 ``` @page { size: landscape; //横
続きを読む

PHP:指定した数値から数値までの範囲を作成する

2016年12月28日

1円〜10,000円、10,001円〜20,000円など、ECサイトでよくみる範囲をPHPで簡単に作成する方法です。 ### 1から100000まで10000毎の範囲を作成する場合 ``` foreach (range(10000, 100000, 10000) as $number) { $min_number = $number - 9999; echo $min_number . '〜' . $number . ''; }
続きを読む