harada のアーカイブ

MacをSierraにアップデート後にSassが利用できなくなった場合にすること

2017年4月25日

YosemiteとSierraの間にはEl Capitanがあるのですが、確かそれはまるまる飛ばしてYosemiteからSierraにアップデートしました。 するとその後しばらくたって何らかのタイミングからこれまで利用できていたSassが利用できなくなってしまいました。 ぐぐってみるとどうやらSassとCompassがなくなってしまったようです。 参考:[Mac OS X El Capitan にしたらSassとCompassがなくなっていた](http:/
続きを読む

CSS:rgba指定を使わずに背景画像を透過する

2017年4月20日

``というブロックに透過した背景画像を重ねたい場合は以下のようにCSSを記述します。 rgbaを重ねる方法だと、背景画像の上にさらに透過した背景画像を重ねるのが難しいため以下の方法を利用します。 ### CSS ``` .bgimage { display: block; position: relative; z-index: 1; } .bgimage:after { content: ""; background-i
続きを読む

CSSでテキスト選択中の背景色と文字色を変更する

2017年4月20日

``` ::-moz-selection { background-color: #f06292; color: #fff; } ::selection { background-color: #f06292; color: #fff; } ```
続きを読む

Material Design Liteの汎用クラス

2017年4月18日

Material Design Liteを利用することで簡単にマテリアルデザインを利用したサイトを構築することができます。 細かく汎用クラスが設定されており、よく使いそうなクラスをメモしておきます。 [Material Design Lite](https://getmdl.io/) ### テキスト色と背景色を変更する 以下の例のクラスのカラー名と数字をマテリアルデザインのパレットに当てはめることで色を指定できます。 色指定の詳細はこちらの記事
続きを読む

美しいグラデーションと幾何学模様のTrianglifyを背景に設定する方法

2017年4月13日

[Trianglify](http://qrohlf.com/trianglify/)を利用して、簡単に美しいグラデーションと幾何学模様のTrianglifyを背景に設定することができます。 ファイルをダウンロードして読み込むか以下のCDNを利用することもできます。 ## 設定例 ### 読み込む ``` ``` ### HTML例 ``` 背景に設定するボックス ``` ### JavaScript例 ``` func
続きを読む

D3.jsのグラフを角丸にする

2017年4月11日

角丸にしたい棒グラフなどの`.append("rect")`がかいてあるところに`.attr("rx", 4)`と`.attr("ry", 4)`を追加するだけで実現するようです。 ``` .attr("rx", 4) .attr("ry", 4) ``` ### 追加例: ``` var chart = d3.select("#chart") .append('svg') .append("g")
続きを読む

D3.jsを使ってラベル付きの円グラフを作成する

2017年4月5日

D3.jsを使うとさまざまなグラフがかけるようです。 さまざまなグラフ例:https://github.com/d3/d3/wiki/Gallery 試しに[Pie charts labels](http://bl.ocks.org/dbuezas/9306799)をもとに以下のサンプルグラフを作成してみました。 [サンプル](http://jsdo.it/haradaaa/e7eR) 変更点は以下です。 * グラフの背景色を透過色に
続きを読む

chart.jsで各項目の太さを変えたグラフを表示する

2017年4月4日

項目数だけグラフを重ねることで実現できるようです。 ### HTML ``` ``` ### CSS ``` .donutsChartCustom { position: relative; height: 400px; } .donutsChartCustom .circle01, .donutsChartCustom .circle02, .donu
続きを読む

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の
続きを読む