mania-ku

何か作りたいプログラマ未満。

【iOS8/Safari】aタグ内のimgにCSSのzoomが効かない

これはiOS8.0〜1OS8.2までの不具合です。
必要な時はjsで対応するしかなさそうですね。
画像を一気に50%表示するときに便利なんですが・・・

【Chrome】スマホサイトの1ページまるごとキャプチャする

スマホサイトのチェックなんかのときにページまるごとキャプチャしたいときがありますが、そんなときに使えます。

Chromeの準備

  1. 1.Chromeを開きます
  2. 2. Awesome Screenshotをダウンロードして有効化します
  3. 3.ChromeでDeveloperツール(MacだとAlt + Command + I)を開いて、EmulationからiPhone5あたりを選びます

キャプチャを撮る

  1. 1.キャプチャを撮りたいページを開きます
  2. 2.表示領域の下にスペースが空いていたらぴったりの画像が撮れないので、Developerツールを移動させるかなんかして下を詰めます
  3. 3.Chromeでaマークをクリックします。一度目は説明ページに飛ばされるが、二度目を押すと詳細が表示されます
  4. 4.ページ全体を撮りたいときは「Capture entire page」をクリックします
  5. 5.撮れたら保存画面に移動するので、「完了」をクリックして保存します

【Photoshop】レイヤーを逆順&レイヤーごとに連番で画像を保存する方法

レイヤーごとに連番で画像を保存というのはよくやりますが、レイヤーを逆順して連番にすることもできます!

レイヤーを逆順にする

逆順にしたいレイヤーを選択し、レイヤー>重ね順>逆順

レイヤーごとに連番で画像を保存

  1. 1.アニメーションウインドウ>「レイヤーからフレームを作成」で1フレーム1レイヤーになります。
    ※このとき1フレームにあったレイヤーから連番になります。
  2. 2.ファイル>書き出し>ビデオをレンダリングで、画像シーケンスを選択して「レンダリング」を押します。
    ※連番が何桁か、保存形式は何か、連番の前に付けるファイル名は何かが指定できます。

いつも使うような名前でアクション作っておいて、あとからファイル名一斉置換で変更するのもいいかもしれません。

購入から使うまでの流れ&オススメのスタンプまで!LINEのクリエーターズスタンプ

LINEのクリエーターズスタンプが始まりましたね!
作ってみようかな〜♪と思っていたのですが、手をつけないまま始まりましたw
なので、購入から使うまでの流れ&オススメのスタンプ3つを勝手に紹介してみたいと思います。

購入から使うまでの流れ

  1. 1.ブラウザでLINE STOREにアクセスして、好みのスタンプを購入します。ただし、このままでは使えません。
  2. 2.Lineアプリに移動し、スタンプ>マイスタンプから購入したスタンプをダウンロードします。
    ものにもよりますが1.5MほどあるのでなるべくLTEやWifiでダウンロードしたほうがいいと思います。
  3. 3.スタンプが使えるようになりました。よくLineする人に試しに送ってみたりします。

オススメのスタンプ

呪って!すヒンクスさん!¥100

スクリーンショット 2014-05-10 0.18.17
何とも言えない顔がツボです。友だちとの会話に使えそうです。
試しに送ってみたところ、「うわぁ何コレ…」と言われました・・・

狐少女ここちゃん¥100

スクリーンショット 2014-05-10 0.32.10
狐耳好きなので!カワイイは正義!!

まぞくのじかん¥100

スクリーンショット 2014-05-10 0.33.58
絵がうまいし好み!ただこの字の大きさだと実際使うときに(私の目が悪いので)読めないかも・・・

スタンプを作る側に立つには?

旦那さんと昔話したことがあるのですが、スタンプって字があんまりない方がいいのかも。
Facebookなんかでは動くせいかもしれませんが、文字が少ない気がします。
(Facebookではpusheenというねこのスタンプがお気に入りです!)
文字がない方が、国際的に伝わりやすいのかもしれませんが。

Macでアイコンフォント作成の手順まとめ

今日試しにMacでアイコンフォントを作ってみたので、忘れないためにメモ。

アイコンを用意する

イラレでパスを用意して、1アイコンずつSVGに保存します。

フォントにする

OTEDIT for Macで、1文字に1ファイルずつインポート(読んで)サイズなど調整。
新規作成でフォントの太さやフォント名などが聞かれます。
なぜかフォント名は効かなかったけど・・・
保存してTTFにします。

フォントを必要な形式分用意する

実験したときは、eot、woff、ttf、svgを使いました。
下記のツールで変換しました。

CSSで使う

こんな感じで書いて使いました。

@font-face {
	font-family: 'フォント名';
	src: url('フォントURL.eot?#iefix') format('embedded-opentype'), 
	     url('フォントURL.woff') format('woff'), 
	     url('フォントURL.ttf')  format('truetype'),
	     url('フォントURL.svg#svgFontName') format('svg');
}

使いたい要素 {
	font-family: フォント名;	
}

キアヌ・リーヴスが出る47 roninが見たくて、しょうがないです。
ポスターみたら、見たくなりまして。

【Photoshop】ガイドを引くGuideGuideが便利だけど、謎の現象が

同僚さんに教えてもらって、GuideGuide入れてみた。
んー・・・なぜか同じバージョンを入れてるのに私だけおかしい・・・なぜ?

入れ直ししたり、フォトショ再起動したりしたものの、
タブが表示されなくて、真ん中にガイド引くボタンを押しても何も起こらない・・・
謎が謎を呼んだものの、最新(2.1.3)ではなく一個前のものを入れてみたら普通に動いた。
なんでだ。なぜなんだ・・・ 同僚さんは2.1.2だとおかしいといってるのに・・・

それにしても真ん中にガイド引くボタン便利すぎる。
これを使ってみたくて入れたのに、動かなかったときの悲しさったらなかった。

【WordPress】ブログテンプレートを2.2へバージョンアップしました

上部にあったブログ情報をフッターに移動し、お問い合わせとタグ、カテゴリを含む検索を追加しました。
また、付け忘れてたページネーション、OGP、TwitterCardの設定を追加しました。
OGPの設定の参考
TwitterCardの設定の参考

以下特に読む必要のないこのサイトの歴史

1.0以前

2005年くらいからやっていたFC2のブログに飽きたので、どうしようか考えていました。
2008年くらい(日本のWordPress界的には、プライム・ストラテジーさんがWordPressを扱い始めた頃でしょうか・・・)には、知り合いのサイトのカスタマイズのためWordPressを少し触ったことがある程度でした。確か日本語の解説があまりなくて、でもコーディングスキルもそんななくて、泣きながらやっていたような気がします。

1.0

本当に初めてのWordPressのテンプレート作りで、何をやってよいのやらわからず、WPerに1つずつ手取り足取り教えてもらいました。
とりあえず完成させることを目標に2カラム構成にしました。デザインは自分でしたので、試しにウェブフォントを使ってみました。

2.0

記事が徐々に増えて来たので、前からやりたかった1カラムのサイトにすることに。
あんまり自分っぽくないデザインにしたかったので、デザインはWordPressを教えてくれたWPerにお願いしました。

2.1

こまごまと修正。特筆するところは特になし。

1人WordBench1日目 ご当地わぷー リンゴ編

ご当地わぷーが流行っているようなので、リンゴ編作ってみました。

ご当地わぷー リンゴ編

ややリンゴをリアルにしすぎたか・・・?
リンゴの作り方はこちらを参考にしました。

[デザイン]Facebookでフランスの店のロゴを作ったら。

フランスの店のロゴをFacebookで募集していたので、「フランスと言えばkawaii!でしょ!」と思ってそんな感じのロゴを作ったら、ドイツのAkiba@de 秋葉原 Akihabaraというイベントに出店したとか。

フランスに行く際はぜひ寄ってみてください。 まだ開店してないそうですが・・・
お好み娘ブログ