WebデザインをiPhoneで作った話。

もくもくデザイン部@札幌 #1

昨日、もくもくデザイン部@札幌 #1 に参加してきました 。
もくもく会なので、各々好きにデザイン作業をされてた中、自分は表題の通り、iPhoneでWebデザインをしてみました。

その時やったことの覚書。

続きを読む WebデザインをiPhoneで作った話。

スライド(Slick.js) を モーダル(Bootstrap)に設置する時にハマった話。

Carousel(Slick.js) in Modal Window(Bootstrap)

仕事でモーダルウインドウ使う場面があったので

「せや!Bootstrapで実装したろ!」

そんな感じで実装して、後で気づいた

「これ、モーダルウインドウの中にスライドショーあるやん…」

デザインちゃんと見てなかったのが悪いんだけど、そもそもモーダルの中に(以下略

なんとなくBootstrap内にあるcarousel.jsで実装できそうな気はしてたのですが、後から色々機能追加する際厄介そうだったので、

「ModalにSlick.js入れたろ!」

そんな感じに入れてみました。

続きを読む スライド(Slick.js) を モーダル(Bootstrap)に設置する時にハマった話。

Twitter 新UIで画像をドラッグ&ドロップできるようにした

タイトルの通り。

2019年4月24日からの新UIになったそうですが、最近まで自分の環境は旧UIのままだった。

が、いつの間にか新UIに変わってた。

ダークモードかっこいい

めっちゃいい。ダークモード欲しかった。

ただ細かい部分として、投稿された画像をドラッグ&ドロップでデスクトップに保存みたいな事ができなくなってた。

たぶん著作権保護理由なのかと思ってたが、スマホアプリなら保存普通に出来ちゃうんだよなぁ…。何故PCだけ…。

なんか、きっとchromeプラグインが頑張ってくれそうと思ったが、chromeのデベロッパーツールでどうにか拾えないかなぁと考えて、試してみた。

続きを読む Twitter 新UIで画像をドラッグ&ドロップできるようにした

【WordPressプラグイン】Hello_Dollyを理想の上司に変えてみた話

WordPressを使っている皆様、Hello Dollyってプラグイン使ってますか?

プラグインを有効にするとHello Dollyって曲の歌詞がランダムに管理画面内の通知欄に表示されるってものなのですが、最近、自分好みの歌詞に書き換え出来る事に気づいてしまいました。

色々な歌詞にできるのはいいけれど、他になんかいいの無いかなーと思って、特に思いつかなかったので「理想の上司」がいいそうな言葉にしてみようと思い変更してみました。

続きを読む 【WordPressプラグイン】Hello_Dollyを理想の上司に変えてみた話

【IEバグ】游ゴシック・游明朝による謎の余白対策を考えてみた。

游明朝・游ゴシックのIEバグ

InternetExplore(IE)で游フォントを使う際、謎の余白が生まれてしまいます。
どうにかその修正作業が少しでも楽になるように、いろいろ検証してまとめてみました。

(Qiitaに書いてもよかったかもしれない)

続きを読む 【IEバグ】游ゴシック・游明朝による謎の余白対策を考えてみた。

photoshopの解像度が小さくなっていた時のメモ

Photoshopデータをデザイナーから頂いた際に、解像度を普通72でつくっていただくが、今回貰ったデータが23ぐらいになっていた。

(画像切り出した時にめっちゃサイズ大きくて、そこで気づきました)

予め、現状の縦横のサイズをメモしておき、

Photoshopの画像解像度の設定画面で、解像度72に変更してOK。

処理が終わってから再度、画像解像度の設定画面で縦横のサイズが大きくなっているので前のサイズを入れてあげて完了。

jQueryのモーダルウインドウを閉じた後動作しなくなった件

メモ書き。

下記サイトのjQueryモーダルウインドウを試したところ

モーダルオープンし、クローズ動作をした後、

Uncaught Error: Syntax error, unrecognized expression: <div class=”modal-wrap”></div>

というエラーが出て、サイト全部がクリックできない事がありました。

[ プログラミング ] jQueryでスクロールバーの出るモーダルウィンドウを作る方法

 

modal-wrapクラスの要素が原因のようで、JS確認してみると

$(modal).unwrap(“<div class=’modal-wrap’></div>”);

という記述がありましたので、これを

$(modal).unwrap();

にしたところ、無事動作しました。

もしかしたらjQueryバージョンで挙動が違うのかもしれませんね。(未確認)