MacのFirefoxでimgのhoverにtransitionとopacityを書くとバグる

表題の通りです。
Firefox(バージョン52で確認)で、画像にマウスを乗せた時にフェードでちょっとだけ透明度を上げるような動き、よくあるじゃないですか。

画像に直接transitionとopacityを指定したら、途中までは想定通りフェードで透明になるんですが、最後にopacity:1に戻ってしまうという事象が発生しました。

追記
どうやらwindowsのfirefoxだと想定通りに動くらしいので、macのfirefoxだけの事象のようです。
タイトルを変更させていただきました。
Firefoxでimgのhoverにtransitionとopacityを書くとバグる

MacのFirefoxでimgのhoverにtransitionとopacityを書くとバグる

想定の動き(Chromeでの表示)

Firefoxでの動き(Firefoxでの表示)

ソースコードは以下です。

<html>
<head>
<style>
.box {
  display: inline-block;
  }
a {
    display: block;
}
img {
    transition: opacity 0.3s ease;
}
a:hover img {
    opacity:0.8;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
  <picture>
    <img src="1.jpg"> // ←こいつにtransitionとopacityを付与しているとバグる
  </picture>
</a>
</div>
</body></html>

原因がつかめなくて四苦八苦してしまったのですが、img自体にtransitionとopacityを付与するのではなく、imgの親にtransitionとopacityを付与することで解決しました。

<html>
<head>
<style>
.box {
  display: inline-block;
  }
a {
    display: block;
}
picture {
    transition: opacity 0.3s ease;
}
a:hover picture {
    opacity:0.8;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
  <picture>// ←こいつにtransitionとopacityを付与して解決
    <img src="1.jpg"> 
  </picture>
</a>
</div>
</body></html>

[Concrete5] レイアウトの削除方法

そういえばレイアウトの追加はわかりやすいけど、削除はわかりにくい場所にあったなぁと思いまして。
Concrete5は自由度が高くて使いやすいのだけど、やはりまだまだwordpressに比べると人口的にも少ないし、ナレッジの蓄積が足りないなぁと思います。5.6から5.7に変わった時点で5.6までのノウハウやプラグインも使えなくなってしまって、かなり苦労しました。

下記に、くどくどとスクリーンショットを交えて書いてありますが、非常に分かりづらいので、サクッと解決方法を知りたい方は、動画キャプチャをご覧ください。

動画の流れを文章とスクリーンショットで記載しているだけですので動画を見て解決したら読む必要はないです。

レイアウトの追加は簡単

レイアウト機能の追加はエリアからすぐに選択できるので簡単に追加できます。
追加

レイアウト

こんな感じですぐに2カラムや3カラムの追加が可能です。

そして、削除をしたい時に削除のメニュー項目が見つからないことに気づきます。

エリアのメニューを開いても、「ブロックを追加」「エリアのデザインを編集」「レイアウトを追加」の三つしかありません。
エリア

レイアウトのメニューを開くと、エリアのメニューに加えて、「コンテナーのレイアウトを編集」「レイアウトデザインを編集」「レイアウトをプリセットとして保存」「プリセットを管理」の4項目が表示されます。
レイアウトメニュー

直感的に操作が可能なConcrete5なら、「レイアウトデザインを編集」だろうと、思って選択すると何やらエディタが出てきて、「どうやらここでは削除ができないなぁ、つまりConcrete5でレイアウトを一旦追加してしまうとレイアウト自体を削除することはできないのだろう…」と思ってしまいがちです。
レイアウトデザインを編集

レイアウト自体の削除は、「コンテナーのレイアウトを編集」

コンテナー

直感的にわかりにくい名称の「コンテナーのレイアウトを編集」、これはレイアウトがカラムになっているものを包括するブロックという意味として捉えられるので、このメニューを選ぶと、ゴミ箱のアイコンがあるので、ここからレイアウト自体の削除が可能です。
コンテナ編集

[CSS]ブロックを上下左右中央に配置したい

ECサイトなんかだと、よくあるパターンなんですが、商品画像のトリミングが縦長だったり、横長だったりして、余白が気になるってお客さんに言われます。
トリミングが正方形だったらなんの問題もないんですが、ウェブに関わる全ての人が画像を正方形にトリミングできるはずもないので、それがどんなトリミングであっても美しく表示させるのがウェブデザイナーの仕事だと思います。

左右のセンタリングは簡単

text-align: centerを使って、左右中央は簡単にできます

<style>
div.LRbox {
  text-align: center;
  border: 1px solid #cacaca;
  width: 200px;
  height: 200px;
}
</style>

<div class="LRbox">
<img src="http://wordpress.go-designing.com/wp-content/uploads/2015/02/LR1.gif" alt="縦長の画像" width="150" height="200" />
</div>

縦長の画像

上下のセンタリングがめんどい

ダメな例

<style>
div.TBbox {
  vertical-align: middle;
  border: 1px solid #cacaca;
  width: 200px;
  height: 200px;
}
</style>
<div class="TBbox">
<img src="http://wordpress.go-designing.com/wp-content/uploads/2015/02/TB.gif" alt="横長の画像" width="200" height="150" />
</div>

横長の画像

上下の場合、vertical-align:middleを使っても中央によってはくれませんね。
要素名のせいで勘違いしやすいのですがvertical-alignは、ボックス内のインライン要素の高さ位置を揃えるのであって、ボックスの内部の位置を中央にするわけではないのです。

解決策

<style>
div.TBboxTrue {
  border: 1px solid #cacaca;
  width: 200px;
  height: 200px;
  position: relative; /* 親のボックスのpositionをrelativeに */
}
div.TBboxTrue img {
  position: absolute;  /* 上下中央にしたい要素のpositionをabsoluteに */
  top: 0; /* top位置を0 */
  bottom: 0; /* bottom位置も0 */
  margin: auto; /* marginをautoに */
}
</style>
<div class="TBboxTrue">
<img src="http://wordpress.go-designing.com/wp-content/uploads/2015/02/TB.gif" alt="横長の画像" width="200" height="150" />
</div>

横長の画像

応用

これを応用して、上下左右中央に指定しておくことができます。
たとえば、ボックスより大きい画像の場合は、max-widthやmax-heightを100%にしておくことで、ボックスから画像がはみ出てしまうことを回避できますが、そもそもボックスより画像が小さい場合は、上下左右中央に寄せることで対応するといいでしょう。

<style>
div.TBLRbox {
  border: 1px solid #cacaca;
  width: 200px;
  height: 200px;
  position: relative;
margin-bottom: 20px;
}
div.TBLRbox img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
</style>
<div class="TBLRbox">
<img src="http://wordpress.go-designing.com/wp-content/uploads/2015/02/TBLR.gif" alt="ボックスより小さい画像" width="150" height="150" />
</div>

ボックスより小さい画像

[WordPress]カテゴリー名にリンクをつけたくない[メモ]

<?php the_category(); ?>
wordpressで、カテゴリ名を表示するには、上記のコードを書きますが、カテゴリ名と一緒にリンクも吐き出されてしまうので、時と場合によってはリンクが邪魔になってしまうことがあります。

そういった場合には、該当する記事のカテゴリ名のみを取得することで解決できます。

<?php
$cat = get_the_category();
$cat = $cat[0];

echo get_cat_name($cat->term_id);
?>

上部の画像のような投稿日と記事タイトルの一覧のような形で使うなら、こんな感じかな

<dl class="news">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php
$cat = get_the_category();
$cat = $cat[0];
?>
<dt><?php the_time('Y/m/j') ?><span class="<?php echo <?php echo $cat->slug;?>"><?php echo get_cat_name($cat->term_id); ?></span></dt> 
<dd><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></dd>

<?php endwhile; ?>
</dl>
<?php else : ?>
<p>記事がありません</p>
<?php endif; ?>

このphpででてくるhtmlが以下になる

<dl class="news">
<dt>2014/12/05<span class="news">おしらせ</span></dt>
<dd><a href="#">年末年始の営業日についてのご案内</a></dd>

<dt>2014/12/04<span class="news">おしらせ</span></dt>
<dd><a href="#">新商品のご案内</a></dd>

<dt>2014/12/04<span class="event">イベント</span></dt>
<dd><a href="#">イベント開催情報を更新しました</a></dd>
</dl>

で、cssで見た目を変えればおk

dl.news dt {
	margin-bottom: 8px;
}

dl.news dt span {
	border-radius: 3px;
	padding: 2px 2px 0 2px;
	margin-left: 8px;
	color: #fff;
}
dl.news dt span.news {
	background: #9cd227;
}
dl.news dt span.event {
	background: #297ddc;
}

dl.news dd {
	margin: 0 0 10px 0;
	padding: 0 0 6px 0;
	border-bottom: 1px dotted #c1c1c1;
}
dl.news dd:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border: none;
}

参考
関数リファレンス/get cat name

[メモ]Fireworks形式でデータをもらってしまった

昨日、お客さんからもらったデータがFireworks形式だった。

Fireworks…懐かしいですね。そういえば4,5年くらい起動してないことに気づきました。
記憶が正しければ、数年前にAdobe CCになったときにFireworksは廃止されたんだっけ。

アプリケーションフォルダ見てもFireworks自体がない、Photoshopで開いてもレイヤー統合されて編集できない、という事態に陥った。

さて、どうやって開こうかと思ったけど、未だにCreative CloudからCS6はダウンロードできるみたいですよ。
https://creative.adobe.com/ja/products/fireworks

解決。

Flashもスマホ普及のおかげでもうほとんど使う事無くなってきたし、元Macromedia系のアプリケーションはどんどん無くなっていくのかなぁ。
Fireworksは別に無くても全く問題ないけど、Dreamweaverだけは無くされるととても困る

[Photoshop]何の役に立つか全くわからない、たった2秒で集中線を描くアクション

昨日の記事の集中線の作り方ですが、実際説明するのも自分で作るのもめんどくさいのでアクションファイルを作りました。

Photoshop CCのアクションパレットのオプションで「アクションの読み込み」で使えます。
カンバスを何も開いていない状態でもOKです。

バージョンについてはおそらくですが、CS5とかでも大丈夫じゃないでしょうか。自己責任でどうぞ。

下記からダウンロードできます。

atnファイルをダウンロード

[Photoshop]いつ使えるかわからないけれど集中線を描こう

なんか無性に、漫画でよく使われる集中線をデザインに盛り込みたくなってしまう病気にかかっているので、集中線の書き方を簡単にまとめてみました。
ブログ記事はとても長くなってしまいましたが、実作業は理解してれば3分弱でできちゃったりします。

1.ファイル作成

新規

とりあえず、新規でカンバスを作ります。
サイズについてもあんまり制約無いですが、今回は1000×1000で作りますね。

2.レイヤー追加

ファイルを作ったら新しいレイヤーを追加します。

3.雲模様フィルタ

描画色と背景色が白と黒になってるのを確認して、「フィルタ」→「描画」→「雲模様1」を選択します。

雲模様が描かれます。

4.ノイズを加える

雲模様を描画したら、今度は同じレイヤーに「フィルタ」→「ノイズ」→「ノイズを加える」を選択します。

ダイアログが開いたら、「量:400%」「均等に分布」「グレースケールノイズにチェック」をします。

雲模様がノイズになりました。

5.ぼかし(移動)

ノイズを加えた後に、「フィルタ」→「ぼかし」→「ぼかし(移動)」を選択します。

ダイアログで、「角度:90」「距離:2000px」に指定します。
角度については、横(角度:0)でも問題ないですが、今回は縦にしています。また、距離についても1500pxくらいでも問題ないです。

ぼかし(移動)が適用されて、縦の縞模様になりました。

6.2階調化

縦の縞模様になっても、このままだとグレーの部分が多く、集中線とは言いがたいものになってしまいます。
そこで、このレイヤーを「レイヤーパレット」の「調整レイヤー」アイコンから「2階調化」を選択し2階調化します。

属性パレットのスライダーを左右に動かして、線がいい感じになるところで調整してください。
こればっかりは、雲模様やノイズなどのフィルタがランダムにかかる関係で、数値をいくつにしてって説明ができないのです。

縦線は右記のようになります。
上辺の数十px分を縦に引き延ばしてまっすぐきれいな線を作るので、真ん中辺りにできるもにょもにょした部分はあんまり気にしなくていいです。

7.切って延ばす

上辺の数十pxを適当に選択して、残りの部分を削除し、自由変形で縦に下まで引き延ばします。

すると、なんということでしょう!!
まるでバーコードのようなきれいな縦線ができあがります!!

7.極座標

もしここまでで作業完了するなら、「え、これただのバーコードじゃん」でいいんですが、今回は集中線ですので、集中しないといけませんね。
「フィルタ」→「変形」→「極座標」を選択します。

極座標ダイアログで、「直交座標を極座標に」を選択します。

いい感じになってきました。

8.白い背景色を除去

で、このままだとちょっと使い勝手がよろしくないです。
たとえば背景色は青にしたいとか、写真の上に追加したいとかってなったときに使えないわけです。
せっかくphotoshopなのだから、黒い線だけのレイヤーとして使いたいですよね。
「自動選択ツール」でレイヤーの白い部分をクリックして選択し、

「選択範囲」→「近似値を選択」を使います。

すると、レイヤー上の白い部分が全て選択された状態になるので、Deleteします。
色を付けたレイヤーを下に配置してみるとわかりやすいかと思います。

9.最後の仕上げはレイヤーマスク

集中線は演出的に何かに集中させる為のものですので、中央に線があるのは邪魔ですよね。
レイヤーマスクで中央部分を消してしまいましょう。
まず、レイヤーにレイヤーマスクをつけます。

次に、グラデーションツールを選択し、円形グラデーションを選択します。

カンバス中央から外に向かってドラッグしてグラデーションを描画します。
ここの行程も、何度か繰り返したり、やり直したりグラデーションの割合を調整するなどして、いい感じの所を探してください。

10.完成!

おめでとうございます!これで集中線マスターですね!!
とりあえずいつ使うかわからないので、自分の写真に使ってみました。

追記

これらの作業をなんと2秒で完了させる、アクションファイルを作成しました!
是非ご活用ください!!!!!!!!!

MacbookProのHDDをSSHDにしました。

メインで使ってるMacbookPro17インチ(early 2011)のHDDの空きが30GB以下になってしまって、sleepimageとかメモリの関係上どうにも動作がおかしい。
フォトショの起動に10分くらい掛かったり、ブラウザがタブ開くたびにフリーズする等、仕事できる環境ではなくなってしまったので、SSDを買うお金のない私は、SSHDに変えました。
SEAGATE シーゲート ST1000LM014 [バルクハードディスク 2.5インチ SSHD HDD+SSD ハイブリッド]

なんか最初MBPが全然認識してくれなくて、PRAMクリアだの、OS10.6のDVD起動だのいろいろ試したけど、どうにもならなかった。この間2時間くらい試行錯誤した。

んで、6年くらい前に買ったMacBookにSSHDつっこんでからDVDでOSインストールして、MBPに入れたら何事もなかったかのように普通に起動した。今までの苦労はなんだったの?

で、5時間くらいかけてTimeMachineバックアップから元のデータ復旧。
アプリケーションや構成など気にせず今までと全く同じ環境引き継げるのがいいよね。
本当はそろそろクリーンインストールした方がいいと思うんだけど、1週間くらい休みがあればできるんだよなぁ…(チラッチラッ

使用感としては、一言。快適です。
仕組み自体はよくわからないけど、なんで早いんでしょうねこれ。

本日2013年8月2日 23:22:45前後の時間帯はTwitterの公開負荷テストです

友人に手伝ってもらってバルスカウントダウンタイマーを作りましたっていうか、カウントダウンのjsに手を加えただけですが。
バルスカウントダウンタイマー http://gotanabe.info/barusu/count.html

なお、23:22:45になるとバルスします。

[追記]
背景のムスカのイラスト、時間になったら目がーメガーのイラストに差し替えようとも考えたのですが、変な構造でhtml作っちゃったからもう時間的に無理だわ(めんどくさい)。

※ツイッターとfacebookとgoogle+でさんざん告知したけどあまりにも誰も見てくれないので、もったいないからここでも宣伝しときます

[Photoshop CC]Mac LCDってなんだ!?[メモ]

仕事のやる気が全然出ないので、Photoshop含め、CS6を全部CCにしました。
そしたら、なんということでしょう。アンチエイリアス部分に見慣れない項目が二つ。
「Mac」と「Mac LCD」。

これ何の違いがあるんすかねぇ〜。って思ってググってみたけど、あんまり日本語記事なかった。

MacにはRetina Displayがある

そう、冷静に考えてみりゃ今のMBPはRetinaだったわーって事でした。
Retina用に最適化されたアンチエイリアス、それが「Mac LCD」。

で、理屈はわかったんですが、僕のMBPは2年前のモデルなんで確認が出来ないんですよ。表示としてどう違うのか。
てか「Mac LCD」使ったらCS6以前で表示おかしくなったりしますよね。
データ納品時とかにいろいろ不都合がありそうなので、当分使用しないでいた方が良さげ。

そしてやる気は未だ出ず。