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)に設置する時にハマった話。

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

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

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

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

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

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

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

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

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

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

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

【Photoshop】ペンタブでブラシが手のひらツールになる不具合

最近Photoshopでペンタブを使用していたらWindows10のアップデートのせいか、ブラシツールで描いているのに手のひらツールになってしまい、まともに使えなくなっていました。

続きを読む 【Photoshop】ペンタブでブラシが手のひらツールになる不具合

今年も撮りフェス in 室蘭 いってきます!

先ほど撮りフェス in 室蘭 2018が発表されました!

tori-fes.com

去年参加してみたのですが、結構楽しい。

実は、去年からWebサイトの構築に貢献させていただいております。

 

街の人とも仲良くなれるし、参加者同士の交流も結構あって面白い。

坂にある家が映えるんですよねー

工場地帯とか

海とか

船とか

白鳥大橋とか

雑貨屋で買ったたたら製鉄とか。

 

24時間で撮影も観光もいっぱいできてすごい楽しいです!

水族館も無料で入れたり

道の駅は景色すごいよかったり

クルージングで普段見れない景色も見れたり

夜の撮影も楽しい。

岩肌が見える海辺があったり

普段は入れない場所へ行けたり

普段は見れない光景が見れたり

街並みを楽しめたり

 

とても充実した2日間です!

今年も室蘭で会いましょう!

 

撮りフェス in 室蘭 2018

flexboxの使い方メモ

ulリスト、olリストの行列並び替え

リスト表示の際に、2列表示且つ縦に読ませる感じのパターン結構ありますよね。

  • 1
  • 5
  • 2
  • 6
  • 3
  • 7
  • 4
  • 8

こんな感じのを縦並びにすると

  • 1
  • 5
  • 2
  • 6
  • 3
  • 7
  • 4
  • 8

こうなる。
PCからスマホ表示の場合1列にするってなると、順番めちゃくちゃになる。
これをflex使える環境ならこれで並び替えしちゃおうぜって話です。

ul{
display:flex;
/*flexにしてから*/
}
ul li:nth-child(2n+1){
order:-1;
/*奇数番目を先頭に*/
}

奇数番目に来たものを順番に先頭にしていく仕組み。

  • 1
  • 5
  • 2
  • 6
  • 3
  • 7
  • 4
  • 8

するとこんな感じに行列が入れ替わります。

  • 1
  • 5
  • 2
  • 6
  • 3
  • 7
  • 4
  • 8

1列表示でスッキリ。

まとめ

逆のことできるのか試してみたが、キレイにいかない。
多分、html書き直したほうがいいレベル。
今回のパターンも本来htmlを別途スマホ用に準備すればいいだけの話なのだが、そのスマホ用のコード量があまりにも多かった場合はorderで並び替えしてしまった方がはるかに効率的ですよねってお話。

ロリポップの初期費用が無料に

ロリポップ全プラン初期費用無料キャンペーン

【春のお得なキャンペーン】が今日から始まっているようです。

今回のは2018年3月20日までやっているそうですので、新規にサーバー取得したい人はこの機会に契約してみてはいかがでしょう?



ロリポップでは、初期費用0円キャンペーンは年に何回か行われますが、毎回突然始まり、時期も不明です。

ライトプランで例えると、約1年分の価格が無料になるレベルなのでお得ですよね。

自分も、かれこれ5年以上はお世話になってるサーバーで、安価なのでライトプランをよく契約してます。