カテゴリー: web

app storeのダウンロードバッジ(.svg)を貼るのに手こずった話

appstoreのアプリにリンク貼ろうと
appstoreダウンロードバッジ素材

App Store マーケティングガイドライン – Apple Developer
からダウンロードバッジをダウンロードしてみたところ中身は.svgでした。

お恥ずかしながら.svgて使った事なかったのですが、現在は普通にimgタグに指定すれば表示される様子。

確かにローカルではこれで大丈夫でした。
で、目的のサーバーにアップロードしてモバイル端末で確認してみると、svgが正方形の枠だけで中身が表示されていない…

.svgの中身を貼り付けたら表示されるけど、cssでのサイズ指定が無視されるようで使いづらい。

どうやらサーバーの設定が原因みたいで、.htaccessに
[text]
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
[/text]
を追加したら無事表示されました。

めでたしめでたし。

ちなみにgoogleplayのダウンロードアイコンはここから作れます。
Google Play Badge Generator | Android Developers

googleplayダウンロードアイコン


gulp-csscomb(CSSのプロパティを並び替えてくれるプラグイン)の整形フォーマットを自分好みに変更する。

どうもども、今日からgulpを使い始めました。
タスクランナーてのは、より早く作業を進める為にブラインドタッチを覚える、の延長線的な感じですね。
新しい技術ってのは身につくまで作業が停滞してしまうのが痛いです、巻き返せるかしら…。

というわけで、手始めにgulp-csscombの整形フォーマットを自分好みに変更する方法の覚書。

続きを読む


WordPress Importerのインストールが失敗する。

ローカル環境のWordPressに
WordPressテーマユニットテストデータ日本語版を更新したよ! ‹ nuunoのデータをインポートしようとしたら
WordPress Importerがインストール失敗して読み込めないでいました

どうやら管理画面からひっぱってくるヤツにはバグがあるそうな

wordpress環境移行 – WordPress Importer 最新版をつかってるのにエラーが消えない場合 – Qiitaを参考に
http://downloads.wordpress.org/plugin/wordpress-importer.zipを使ってインポート成功しました。

というメモ。


display: table-cell;内にtext-overflow: ellipsis;で「…」付けようとしたらwidthが消えちゃった話。

失敗

display: table-cell;で縦中央させてる要素内のテキストに
text-overflow: ellipsis;で「…」付けようとしたらwidthが消えちゃった。

text-overflow: ellipsis;で「…」付ける為の条件

text-overflow – CSS | MDN

使用html

使用css

こうすると.leftのwidthが消滅するという現象が起きた

IE6で必要って書いてあるwidthを逆に消せばいいのか?と
.right pのwidthを消しても駄目だった。

次にpxで指定してみたら「…」が表示され.leftのwidthも復活した

成功

まとめ

text-overflow: ellipsis;側のwidthはpxで指定する。


httpsでレイアウトが崩れた

昔つくったサイトでレイアウトが崩れると連絡がありました。

話を聞くと、httpsで見るとレイアウトが崩れるとか。
そんな事あるのかな?と確認するとfloat部分がカラム落ちしてました。

httpだとこうなってる
2015-02-16_r1

httpsだとこうなる
2015-02-16_r2

現象としては、横並びさせてる3要素の最後のmarginをjsで0にしてたんだけど、それが効いてない感じ。
jqeury本体は▼のを使ってた

もしかして、httpだから?
で調べてみるとプロトコル表記は省略出来るとの事で、次のように変更。

参考

全般的なスタイルルール プロトコル 埋め込みリソースからプロトコル表記(http:,https:)を省略する。

httpsだとjQuery/Ajaxは使えないのでしょうか?


emmetで、テキストをWrap with Abbreviationしつつ、valueやhrefなどに同じテキストを挿入する方法

Wrap with Abbreviation時に
option[value=$#]*>{$#}を使うと

こんなhtmlがあった時

Wrap with Abbreviation
こう出来る!

素敵っ!

参考

Controlling output position