昨日(2015/11/05)Google Chromeで、あるURLを直打ちしてアクセスしたところ、
「Chromeユーザーの皆様 本日のラッキーな訪問者はあなたです。」
って言われました！(下記画像)
「わーい、俺ってばラッキー!!」と思うこともなく。
だって怪しすぎるでしょう。
「本日の」「ラッキーな」「感謝の印として」などなど、怪しげな言葉が並びます。
表示されているURLも、こちらが入力したURLとは違うところに行かされてますし、GoogleのURLでもないですね。
さすがに嫌なので、ここから先には進みませんでしたが、調べてみると結構話題になっていたんですね。IEやFirefox、Youtubeなんかのバージョンもあるようですね。
君子危うきに近寄らず。不用意にメールアドレスやパスワード、カード番号なんか入力しないようにしましょう。自分が君子だったかどうかはさておき。
詐欺？？「2015年年次訪問者調査の参加者に特別に選ばれました！」の画面が急に出てくる現象
調べると結構出てきます。。。
こんにちは。秋バージョンのバナーを作っているうちに冬みたいな寒さになってやられているyasaiです。
※無駄に前振り長いので、メニューつけます。
寒くなってくると、温かい飲物が恋しくなりますね♪
万年コーヒー中毒みたいな僕はコーンポタージュも大好きです。
できることなら、コーンポタージュの海に飛び込んでみたい。押し寄せるコーンの荒波をくぐり抜け、より大きな海の男になって帰ってきたい！
・・・言ってることがよくわかりませんが。
そんなこんなで自販機でかった缶のコーンポタージュを見つめながら、思ったのです。
「大きな缶のコーンポタージュがあったらいいのに！」
そしたら世の中きっと幸せになるに違いない!!
わかっています。コーンポタージュはあのサイズだからおいしいんですよね・・・
名残惜しい感じが、奥ゆかしいんですよね・・・でも・・・
そんな中、チームの中から天の声が聞こえたのです。
「Twitterの投票で聞いてみたらいいじゃん」
というわけで、Twitterの新機能「投票機能」をつかってみたお話です。
これから数日の間に、Twitterの上で簡単な投票ができる機能が追加されます。ツイート作成画面でこの機能のアイコンが見えたら、お試しください。 https://t.co/BpnsRHTeI7 pic.twitter.com/QQiTX6xCzU
— TwitterJP (@TwitterJP) 2015, 10月 21
こちらがTwitterのツイッターでのツイートです。公式のブログ記事はこちら。 2択のアンケートを入れたツイートを発信でき、それを見た人は、そのアンケートに答えることができて、その結果がパーセンテージでリアルタイムに評価される機能みたいです。
ツイートを作る画面に「投票」のボタン（■1）が追加されていますね。こちらをクリックすると、いつものツイートエリアの下に2択の選択肢を入力するところが表示されます(※現在は任意で4択まで増やせるようです。(2015.11.27追記))。 いつものツイートエリア（■2）にアンケートや質問を入力し、選択肢部分（■3 ）に選択肢を入力し、「ツイート」ボタンをクリック！ さぁいってこい!!
実際に流れるツイートはこんな感じです。 この画面を見ると、「投票数」と「〆切り時間」がわかるみたいです。 流れて来たツイートに投票するには、自分の思った方にチェック(緑のチェックマークがつきます)して、「投票」ボタンをクリック。 タイムライン上でできるので、身構えずに気軽にポチッとしてしまいそうですね。
世紀の結果発表です！みんな大きな缶でコーンポタージュ飲みたくないのか!?
大きな缶のコーンポタージュがあったらいいと思いませんか?? ※通常自販機サイズ：190g 大きい缶→350ml缶、500ml缶、1L缶みたいな #大きな缶のコーンポタージュ — AGN Webチーム (@agn_web) 2015, 10月 30
80％対20％で、「みんな大きな缶でコーンポタージュ」が飲みたい!!
やったね、それはそうでしょう！
最終投票数5票ですけどね。ほとんど身内ですけどね。
これなら、チャットワークでもメールでも聞けましたけどね・・・
今回はちょっぴりしょんぼりな結果になってしまいましたが、今回のまとめです。
検索してみると、他にもいろいろな使い方されているみたいですね。
今後どのような使い方されていくか要チェックです！
AGN WebチームではTwitterやってます。良かったらフォローしてくださいね♪
ついでにこっそりFacebookページもあります。こちらもよかったらどうぞ。
大きい缶のコーンポタージュあったら、嬉しいと思うんだけどなぁ・・・
こんにちは、yasaiです。
今年の新潟は例年以上に秋を通り過ぎて冬が来ちゃいそうです。。。
寒いのは苦手なのです。(暑いのもダメだけども)
【DEMO】
今月は当ブログのネタはなんにしようかしら、今日の夕飯はなんにしようかしらと悩んでまして、夕飯を大根ときのこの味噌汁にすることは決めたすぐ決まったのですが、何を書くかはさっぱり。
アウトプットって難しい。。。
そんな中coliss様の記事で触ってみたいものを発見したので、今日はそちらを。
そちらの記事はこちら。
「IE9+もサポート、CSS3 Flexboxを始める人にぴったりな極めてシンプルな使いやすいフレームワーク -FOX CSS」
「FOX CSS」に触れてみましたよ、というお話です。
普段制作するときははだいたい「RESPONSIVE GRID SYSTEM」とプラスアルファ自分で使いやすくカスタマイズを追加したものを使っています。
もちろん「Bootstrap」系のものにも興味はおおありなのですが、グリッドシステムを使ったレイアウトさえあればOKということが多く、「RESPONSIVE GRID SYSTEM」の24カラムバージョンを多用しています。こちらはデザイナーさんとも話したうえで使っています。
はじめて触ったときはbox-sizing: border-box;の威力に感動してた頃です。
flexboxを使ったレイアウトが今後主流になるのかなぁという感じですが、実案件ではIEへの対応(IE10ではベンダープレフィックス付き、IE9以下は非対応)や仕様変更が多くちょっと使うのが怖かったこともあって、使うのを少し敬遠してたところがあったのです。←ただの勉強不足のいいわけ
そんなときにcoliss様の記事を見て、IE9+なら良さそうだぞ！、ということでやる気になったのでした。
【DEMO】
ドキュメントを見ながら写真おいて、テキスト入れて。
基本的な使い方は自分の使いたい奴のクラスをどんどんつけていくパターンです。
float+絶対配置やdisplay：table-cell;を使ったレイアウトの良いとこどりな感じで、
flexboxを使ったレイアウトで、特徴的なのが「コンテンツを天地のセンター合わせ」と「コンテンツの並びをリバースできる」ってところですよね。
特に可変する高さの「コンテンツの天地のセンター合わせ」に関してはCSS挫折の一つの要素だったんじゃないかと思っているので、flexboxが敷居を下げる一つのきっかけになったらいいな、と思っているのです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="fx-row"> <div class="fx-col-100-xs fx-col-25-s fx-col-top-s"> <img src="images/01.jpg" alt=""> </div> <div class="fx-col-100-xs fx-col-25-s fx-col-center-s"> <h2>近所の漁港</h2> <p>ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。</p> </div> <div class="fx-col-100-xs fx-col-25-s fx-top-top-s"> <img src="images/02.jpg" alt=""> </div> <div class="fx-col-100-xs fx-col-25-s fx-col-center-s"> <h2>日本海の夕日</h2> <p>無理矢理ボックスを天地のセンターにしたので変ですが。。。</p> </div> </div> |
.fx-rowで行を指定し、その中に.fx-col-00-xでボックスを作ります。00の部分は比率になってます。（デフォルトでは10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100）
また。xの部分はメディアクエリの切り替えのポイントです。(デフォルトではxs、s: 768、m: 940、l: 1200)
画像のボックスは.fx-top-center-xで上付きに、テキストは行に対して.fx-col-center-xを指定して「コンテンツの天地のセンター」にしています。
flexbox使って「コンテンツの天地のセンター合わせ」をやりたいがためにこんなコードですが、ここに関してはこうじゃなくてもできましたね(苦笑)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<section> <h1>Item Center</h1> <div class="fx-row fx-row-center-s"> <div class="fx-col fx-col-100-xs fx-col-40-s"> <h2>晴れた雪の日</h2> <p>このボックスでは「文章」40％、「画像」30％を、センターにして配置しています。</p> </div> <div class="fx-col fx-col-100-xs fx-col-30-s"><img src="images/07.jpg" alt=""></div> </div> </section> <section> <h1>Item Revers and Center</h1> <div class="fx-row fx-row-center-s fx-row-reverse-s"> <div class="fx-col fx-col-100-xs fx-col-40-s"> <h2>雪の日の空</h2> <p>このボックスはHTML的には上のコンテンツ同様、「文章」+「画像」になっていますが「.fx-row-reverse-」を指定し、逆順にしています。<br>HTMLの可読性が大きくあがりますね。 </p> </div> <div class="fx-col fx-col-100-xs fx-col-30-s"><img src="images/08.jpg" alt=""></div> </div> </section> |
上のセクションが普通の順番「テキスト+画像」、下のセクションが逆順に「画像+テキスト」になります。
違いは下のセクションでは.fx-rowに対して.fx-row-reverse-xを指定しているところですね。同じ内容で見た目だけ違うだけなので、html的には同じ並びになっていてコードの可読性が高くなりますね。
あと、このセクションでは.fx-rowに対して.fx-row-center-xを指定しています。これは中のボックスのトータルの水平の配置の仕方です。
.fx-row-start-x ：左寄せ
.fx-row-center-x ：中央寄せ
.fx-row-end-x ：右寄せ
.fx-row-between-x ：均等割り(端から端まで)
.fx-row-around-x ：均等割り
.fx-row-between-xと.fx-row-around-xの違いを言葉で説明できないので、こちらはドキュメントで確認してください。
使い方は簡単に覚えていけそうです。
基本的にはクラスを付与していくだけなので、どのクラスがどのようになっているのかさえ覚えてしまえば、どんどん組んでいけます。
FOX CSSにはリセット関係があらかじめ入っています。この辺りは、sassフォルダの中に分けて入っていたので、自分の制作環境に合わせて使えそうです。
また、メディアクエリの切り替えのポイントなども「variables.scss」の中で定義しているので、こちらを編集したらOKそうです。
scssファイルが同梱されているっていうのは、個人的に高感度ポイント高いです！
気をつけなくてはならない点は、このフレームワークを使ってもflexboxの使い方(書き方)は覚えないですね、当たり前なんですけど。flexboxを使ったレイアウトの感触をつかむのにはとてもいいんだと思います。
後は社内的な問題ですが、gridの割り方がこれまで使っていた「RESPONSIVE GRID SYSTEM」とはちょっと違うので、FOX CSSを使う際にはまたデザイナーさん(ディレクターにも)と打ち合わせてお互いに何となくわかった状態で進めたほうがスピードアップにつながりそうですね。
もう少し自分で試してみて、習得できそうなら「RESPONSIVE GRID SYSTEM」と「FOX CSS」を案件に応じて使い分けていってもいいなぁと思っています。
ちょっと初めのさわりだけで、全然突っ込んだところがないんですが、今回は触ってみた感想ということで。
参考にさせていただいたcoliss様、ありがとうございました!!
こんにちは。yasaiです。
シルバーウィーク突入ですね！
みなさんはたくさん休めそうですか？
Ri-mode Rainbow様のブログで「画像にマウスを乗せると下からスライドして出てくるのをCSSだけで設置」というのがあったので、勉強がてら僕もやってみました。
Ri-mode Rainbowさんでは、マウスオーバーするエリアを設けてやっておられましたが、僕のは画像の親ボックスにマウスオーバーしたら画像がスライドしてくる仕掛けです。
|
1 2 3 4 5 6 7 8 9 |
<div class="photo"> <img src="your-image.jpg" alt=""> <div class="caption"> <div> <p>ここにキャプション</p> <p><a href="">ボタンとか</a></p> </div> </div> </div> |
親要素を.photo、その中に画像と、キャプション用、キャプションというよりいろいろコンテンツを使えるように.captionでマークアップします。
※sassで書いてます。こちらの方が見通しが良い気がするので。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.photo{ position: relative; overflow: hidden; text-align: center; img{ max-width: 100%; height: auto; } .caption{ position: absolute; top: 100%; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); transition: top 0.5s ease; } &:hover .caption{ top: 0; } } .caption{ &>div{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; color: #fff; } } |
大まかにレイアウトの部分を抜粋しました。
要点は、
です。
動作部分としては、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.caption{ position: absolute; top: 100%; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); <span style="color: #ff6600;">transition: top 0.5s ease;</span> } &:hover .caption{ <span style="color: #ff6600;">top: 0;</span> } |
親要素はマウスオーバーされたときに、transitionを使ってtopの値を0までアニメーションさせています。
.captionのheightとhover時のtopの値を変更すれば、画像全体を覆わない高さのキャプション(帯っぽいやつ)など、応用はできそうです。
今回はちょっと軽めだけどこの辺で。こういうのやってるとCSSでいろいろ表現できるようになっていった覚えたてのころの気持ちが蘇りますね。CSS楽しいなぁ。
sassで書いてしまったので、CSSのリンクも載せておきますね。
今回参考にさせていただいたRi-mode Rainbow様、ありがとうございました!!
こんにちは。
野球とかインターハイとかインカレとか見てたらスポーツをしたくなったyasaiです。
もうすぐスポーツの秋ですが、今年もきっと食欲と読書と仕事の秋なんだろうなぁ。
さて今回は最近ハンバーガーメニューを使ったグローバルメニューの案件が多かったので、
何となく自分向けの備忘録です。
実装はHTMLとCSSだけ。Javascriptは使いません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<nav class="hamburger_menu"> <input type="checkbox" id="hamburger__btn"> <label for="hamburger__btn" class="hamburger__btn"><span></span></label> <div class="menu_content"> <ul> <li><a href="">menu01</a></li> <li><a href="">menu02</a></li> <li><a href="">menu03</a></li> <li><a href="">menu04</a></li> <li><a href="">menu05</a></li> <li><a href="">menu06</a></li> </ul> </div> </nav> |
Javascriptを使わないので、メニューのオンオフの切り替えはcheckboxで行います。
Label要素の中に空のspan要素を配置したのは、span要素の疑似要素を使って3本線を表現するためです。
sassの記述はこうなりました。以下sassで記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
.hamburger_menu #hamburger__btn{ display: none; & ~ .menu_content { visibility: hidden; } &:checked ~ .menu_content { visibility: visible; } } .hamburger__btn{ display: block; width: 40px; height: 40px; border-radius: 0 0 5px 5px; background-color: #ccc; position: fixed; top: 0; right: 10%; z-index: 100; &:after { content: ''; display: block; width: 60%; height: 2px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } span { width: 100%; height: 100%; display: block; position: relative; &:before, &:after { content: ''; display: block; width: 60%; height: 2px; background-color: #fff; position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); } &:before { top: 25%; } &:after { bottom: 25%; } } } .menu_content{ position: fixed; top: 50%; left: 50%; z-index: 10; transform: translateX(-50%) translateY(-50%); &:after { content: ''; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: -1; width: 0; height: 0; background-color: rgba(0, 0, 0, 0.7); border-radius: 50%; transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s; } a { color: #fff; text-decoration: none; } } #hamburger__btn:checked{ & ~ .menu_content:after { width: 200vw; height: 200vh; } & ~ .hamburger__btn{ &:after { content: none; } span{ &:before, &:after{ left: 44%; transform: translateX(-50%); } &:before{ top: 25%; transform: rotate(-45deg) translateX(-50%); transform-origin:center center; } &:after{ bottom: 25%; transform: rotate(45deg) translateX(-50%); transform-origin:center center; } } } } } |
ちょっと長くなりましたが、やってることは順序は前後しますが①メニューの切り替え、②メニューがオンになったときのスタイル、③メニューのページに対する絶対配置です。
|
1 2 3 4 5 6 7 8 9 |
#hamburger__btn{ display: none; & ~ .menu_content { visibility: hidden; } &:checked ~ .menu_content { visibility: visible; } } |
checkbox自体は非表示にして、label要素のクリックでオンオフを切り替えます。
関節セレクタ~と:checked擬似クラス セレクタを使ってcheckbox以降の兄弟要素のスタイルを変えていきます。
メニューがオンになったときには、
です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.menu_content{ position: fixed; top: 50%; left: 50%; z-index: 10; transform: translateX(-50%) translateY(-50%); &:after { content: ''; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: -1; width: 0; height: 0; background-color: rgba(0, 0, 0, 0.7); border-radius: 50%; transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s; } a { color: #fff; text-decoration: none; } } #hamburger__btn:checked{ & ~ .menu_content:after { width: 200vw; height: 200vh; } } |
メニューの中身(ul要素)を画面中央にfixedし、そのafter疑似要素でオーバーレイ部分を作ります。オンになったら拡大するアニメーションにしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.hamburger__btn{ display: block; width: 40px; height: 40px; border-radius: 0 0 5px 5px; background-color: #ccc; position: fixed; top: 0; right: 10%; z-index: 100; &:after { content: ''; display: block; width: 60%; height: 2px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } span { width: 100%; height: 100%; display: block; position: relative; &:before, &:after { content: ''; display: block; width: 60%; height: 2px; background-color: #fff; position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); } &:before { top: 25%; } &:after { bottom: 25%; } } } #hamburger__btn:checked{ & ~ .hamburger__btn{ &:after { content: none; } span{ &:before, &:after{ left: 44%; transform: translateX(-50%); } &:before{ top: 25%; transform: rotate(-45deg) translateX(-50%); transform-origin:center center; } &:after{ bottom: 25%; transform: rotate(45deg) translateX(-50%); transform-origin:center center; } } } } |
3本線はlabel要素(.hamburger__btn)の疑似要素で中央に1本。その子要素spanの疑似要素で上下に引いています。
メニューがオンになったときは中央の線を非表示にして子要素spanの線を45度回転させました。
③メニューのページに対する絶対配置に関しては、そのままなので割愛します。
ただ、チェックボックスがオーバーレイの上に来ないと切替が出来なくなってしまうのでご注意を。
今回制作した案件はPCサイズでもハンバーガーメニューを使うデザインだったのですが、ハンバーガーメニューからしかページ遷移ができないページの場合に、ちょっと使い勝手が悪く感じました。
メニューの内容が見えているグローバルメニューと違って、1クリックしないとメニューの内容がわからない、移動できないっていうのは、使う側からするといささか不便なんだなぁと。
視線がページのコンテンツを読むために上から下に流れっていって、そこからページ遷移のためにハンバーガーメニューを探すっていうのがいかんのかも。
スマホの場合はコンテンツの終わりとハンバーガーメニューを同時に視界にとらえられるので、そこまで違和感ないんですけどね。
ハンバーガーメニュー使うときは、コンテンツの中からページ遷移させるためのテキストリンクやボタンが見てくれる人のために必要なんだなと感じたのでした。
最後にsassだけじゃなくてメニュー部分のCSSへ切り出したファイルもリンクしておきますね。
Pure CSS Fullscreen Navigation Menu
夏、ですね。みなさん夏バテしていませんか？
インターハイ始まりましたね。もうすぐ甲子園も始まります！
今では見るからに不健康そうですが、昔はこれでもスポーツしてました。
インターハイとか夢の向こうのへっぽこ選手でしたが(笑)
スポーツを通して、違う学校や年齢性別の別、いろいろ違う人たちと会って話して。
今でも仲良く遊ぶ人たちもいます。僕はスポーツを通してでしたけど、こんな感じでこうやってみんないろいろ繋がっていくのですね。
というちょっとまじめな前振りから強引にいきますが。今日はいろんなサービスを連携できる「IFTTT」のお話です。
IFTTT(イフト)とは「レシピ」と呼ばれる個人作成もしくは公に共有しているプロフィールを使って数あるWebサービス（Facebook、Evernote、Weather、Dropboxなど）同士で連携することができるWebサービスである。開発したのはリンデン・チベッツで2010年にスタートした。
― Wikipediaより
https://ja.wikipedia.org/wiki/IFTTT
そのまま引用しましたが、あるサービスで「何かをすると」違う他のサービスに「何かできる」というものです。
IF this Then That
これはIFTTTでレシピ(何かから何かを連携するのをIFTTTではレシピといいます)を作るときの魔法の呪文ですが、そのまま「もしこれをしたら」「そのときあれはこうなる」ということですね。
連携できるサービスはいろいろ。右の画像が現在(2015年7月30日)使えるサービスのアイコンです。かなりいろいろありますね。
例えば今回はTwitterにアップした写真をFacebookのアルバムに追加してみます。出かけた先でおもしろい写真をとってTwitterにアップしたものをFacebookにアルバムとしてまとめておいたら、後から見直したりまとめて使ったりするのに便利、かもしれませんよね。
IFTTTにログインして(アカウントのない方はアカウントを作ります。メールアドレスとパスワードでOKです)、チャンネルの登録をします。
右上のメニュー「Channels 」から利用するサービスのアカウントを登録します。
今回はTwitterとFacebookのアカウントを登録しました。
レシピを作成します。「My Recipes」から入って、「Create a Recipe」をクリックします。
IFTTTは海外のサイトで、まだ日本語対応していませんが、直感的にクリックしていくだけでレシピが作れます。
「Create a Recipe」をクリックすると「if this then that」と表示されます。これが魔法の呪文でしたね。反転している「this」をクリックします。
トリガーとなる(利用するサービスでどんなことをしたら)サービスがアイコンで一覧表示されるので、利用するアイコンをクリックします。今回はTwitterです。
次に「どんなことしたら」を選びます。今回は特定のハッシュタグで分類できるように「New tweet by you with hashtag」を選択して、「#photo」というハッシュタグをつけたときに発動することにしました。
進んで行くとぬるぬるスクロールして行くのが、さりげなく使い易いですね。
次はどのサービスに使うかを選択します。先ほどは「this」だったところがTwitterのアイコンになっていますね。これも直感的にわかりやすくなっています。
反転している「that」をクリックすると利用できるサービスの一覧で表示されるので、今回利用するFacebookをクリックします。
次に何をさせるかを選択します。今回はアルバムを作るので、「Upload a photo from URL」を選択します。
URLを登録する欄、Facebookに登校するメッセージ、登録するアルバムの名前を登録します。今回は新しく「Twitterphoto」というアルバムをFacebookに作ることにしました。
ここでアルバム名を登録するとFacebookに新規でアルバムが作られます。空欄にした場合は「IFTTT Photos」というアルバムが作られます。
この三つをきめたら「Create Action」をクリックします。
最後にこれでOKかどうかの確認画面です。IFTTT用にレシピのタイトルを決めることもできます。今回はそのまますることにしました。
ちゃんと動くか確認します。ハッシュタグ#photoをつけた写真入りのツィートを作成します。
ifttt使って投稿！アルバムができてたらOK♪ #photo pic.twitter.com/4CAueKuual
— 空狐 (@arbeitfuchs) 2015, 7月 31
ほんとにちゃんとFacebookに投稿されるていることを確認します。(反映されるまでに若干タイムラグがある場合があります)
無事投稿されてますね。ちなみ新規で「Twitterphoto」というアルバムもちゃんと作成されていました。成功ですね。これで出先からTwitterに投稿した写真をアルバムにまとめることができるようになりました。
今回はTwitterに投稿した写真をFacebookのアルバムにまとめるレシピを紹介しましたが、他にもいろいろな事ができますよ。
個人的に使っているのは、iPhoneで撮った写真をFlickrに登録したり(iCloudの要領確保のため)、Tumblrで書いた記事をFacebookページ流したり、好きなブログが更新されたらRSSを利用してFacebookにリンクを流す、などです。
他にもgmailとevernoteを連携したり、いろいろなことができるので自分好みのレシピを作ってみてくださいね。素敵なレシピができたらぜひ教えてください！
みなさんのお住まいのところは梅雨入りしましたか？
私は今年の春に2階から1階に引っ越したのですが、2階の時に比べてちょっぴり湿っぽい気がします。とにかく洗濯物が乾きにくくて嫌な季節ですね。
さて、今回はローカル(今回はMac×Mampです)から本番環境へWordpressを移行した時のお話です。
カスタムフィールドやら初期登録分の記事やら、固定ページやら、量が多くなければ本番環境でもう一度作っても良いのですが(その程度ならWP使ってないかもしれませんね)、ローカル環境でお腹いっぱいになっているWPを本番環境に引っ越します。
WP標準のインポートツールだけだと、うまく移行できないデータがあったり、データベース上のURLの書き換えがうまいこといかずにリンクが切れたりすることがあるみたいです。(※参考サイト：テストから本番へ！WordPressでURLが変わる場合のデータベース修正マニュアル)
今回は参考サイトを見ながらsearchreplacedb2.phpというスクリプトを使います。
作業手順
準備段階としてsearchreplacedb2.phpを先にダウンロードしておきます。
(準備を全部してからの方が慌てなくていいですからね)
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
上記リンク先のページ中程にダウンロードのリンクが有ります。V3.0.0 BETA版も有るようですが、今回は2.1.0の方を使って問題なく引越しできました！
MampからphpMyAdminにアクセスしてデータベースをエクスポートします。
ポイントは、
のようです。実行して.sqlで保存します。
データ量が大きい場合は圧縮した方がいいのかもしれません。
こちらは移行先のサーバによるかも知れませんが、サーバのコントロールパネルからphpMyAdminにアクセスして「インポート」してあげます。
コレだけなんですが、コレだけでできてしまいました。
FTPツールなどで、サイトデータ(テーマファイルなど必要なもの)をアップロードします。参考サイトなどをいろいろ見ているとwp-config.phpをアップロードして書き換えると説明されているものが多かったですが、今回はその作業無くいけました。
あらかじめ本番環境にWPを設置してあったので、その辺りをいじる必要がなかったみたいです。
最初にダウンロードしておいたsearchreplacedb2.phpをWPのフォルダにアップロードしてアクセスします。
URLはhttp://ドメイン/wordpress/searchreplacedb2.phpみたいなかんじです。
「Submit」をクリックして次に進みます。
書き換えを行うデータベースの情報が表示されます。
内容を確認して間違いなければ「Submit DB Details」をクリック。
書き換えを行うテーブルを選択します。
※初期状態で全選択されていたので、そのままで良かったです。
確認したら「Continue」をクリック。
上のテキストボックスに「どの文字列を書き換えるか(旧URL)」を入力。
下のテキストボックスには「書き換え後のURL(新URL)」を入力します。
※末尾に / を入れないのがポイントみたいです！
内容を確認したら「Submit Seach string」をクリック。
コレでURLの書き換えが行われます。
本番サイトを確認してみましょう。
書き換えが行われたのを確認して、searchreplacedb2.phpをサーバから削除します。
何度も表示されてますが「消すの忘れないでね！」出そうです。
このスクリプトにアクセスできると、誰でも書き換えができてしまいますからね。
絶対に削除しましょう。
今回はテストから本番環境への移行で利用しましたが、サーバが移行したときなどにも使えそうです。(カスタムフィールドを作りすぎて移行がすこぶる大変になってしまった。カスタムフィールドのメンテが今後思いやられます・・・)
データベースをいじくるので、ご利用は自己責任かつ、細心の注意が必要ですね。
今回参考にさせていただいたサイト様
ありがとうございました！
こんにちは、yasaiです！
5月も終わりますね。GWとGW明けの業務が目白押しだった5月が終わって、祝日のない6月がやってきますね(泣)
今日はCSSのお話です。「おしゃれシャドーつけてみよう」です。
擬似要素のz-indexでうまいこと表示に失敗した話です。
今回コーディングに当たってこんな感じのデザインいただいたのです。
メインタイトルがサイト幅いっぱいで、そこから2カラムパターンですね。ふむふむ。
それでもってメインタイトルはドロップシャドウがついてて、2カラム部分にかかってるわけですね。スマホのときも同じ感じで。はい、了解です。
んー、このシャドウってタイトル全体より短くてセンターな感じです？あ、はい、了解です。(単純にドロップシャドウじゃないのね、おしゃれしゃどー)
こういうことですねー。
やり方は色々ありそうだけど。今回はメインタイトルの後ろに幅のちょっと短い%の擬似要素を置いてそいつにドロップシャドウしましょう。これでいくことにしました。ざっくりいきます。
|
1 2 3 4 5 6 7 8 |
<div id="wrapper"> <h1 class="title">TITLE</h1> <div class="left-column"> <h2>SUB TITLE</h2> <div class="contents">contents</div> </div> <div class="right-column">SIDE</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.title{ width: 100%; max-width: 960px; padding: 16px 0; margin: 0 auto; text-align: center; line-height: 1; background-color: #fff; <span style="color: #ff6600;">position: relative;</span> } .title:after{ <span style="color: #ff6600;">content: ''; width: 94%; height: 1px; -webkit-box-shadow: 0px 1px 7px #000000; -moz-box-shadow: 0px 1px 7px #000000; box-shadow: 0px 1px 7px #000000; position: absolute; bottom: 0; left: 3%; z-index: -1; border-radius: 2px;</span> } |
こんな感じですかね？影つきました！ちゃんとブラウザ幅に合わせて縮小もできてるし、良かったよかった！
やったことは、TITLEの94％の幅でbox-shadowを設定したafter擬似要素をTITLEの後ろに置いたということですね。影の部分がうまく出るようにbottomで調節して、シャドウの上の部分が出ないように、TITLEに背景色を設定したということです。
と、まぁできたと思って、他のとこのコーディングしてたんですけど･･･
ざっと組んで見直して、まぁ気がつくわけですよね。(2カラム部分に背景とかを後からつけたので、発見が遅れた･･･)擬似要素が他のコンテンツの後ろにいますねーこれじゃダメです？だめ？ですよねー修正します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.title{ background-color: #fff; line-height: 1; margin: 0 auto; max-width: 940px; padding: 16px 0; <span style="color: #ff0000;">position: relative;</span> <span style="color: #ff0000;"> z-index: 2;</span> text-align: center; } .title:before { background-color: #fff; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .title:after { border-radius: 2px; bottom: 0; box-shadow: 0 1px 7px #000000; content: ""; height: 1px; left: 3%; position: absolute; width: 94%; z-index: -2; } |
修正したのは親となるTITLEのz-indexを設定したこと。
これでHTML全体のルートに対しての.titleのz軸の位置関係を明示して、それに対する擬似要素の位置関係を設定したということですかね。考えてみたらそりゃそうか、という気もしますね。
z-indexが2でbefore擬似要素が追加になっているのは他の要素との兼ね合いか、after擬似要素を他のコンテンツの上にのせる関係で、after擬似要素がTITLEの上にのってしまったためその上にTITLEと同じ大きさで背景色がTITLEと同じbefore擬似要素を間に差し込んだため。
ここまでくると、もっと簡単な方法があったかな、という気もしますね。何かもっといい方法あるよという方は、コメントお願いします。CSSだけで色々な表現ができるようになって楽しいですね。もっと勉強しなくちゃなと痛感です。
今回参考にさせていただいたサイト様です。ありがとうございました。
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか）
弊社で制作させていただいたしゅんあぐり様LINEスタンプ「ビーンくんとフラちゃんと。」が販売開始されました！
購入はこちら！
[スタンプの一部をご紹介]
※画像はサンプルです。
みなさんバンバン使ってくださいね。
さてさて、いよいよ販売が開始されました。何だと思います？しゅん・あぐりのLINEスタンプです！ぜひ使ってみてください。http://line.me/S/sticker/1119924よりお入りください。
Posted by 株式会社しゅん・あぐり on 2015年5月12日
みなさんお花見はしましたか？どこかおすすめはありますか？
出店で食べるお好み焼きが好きです。
新潟もたくさんお花見スポットがあるので、来年ぜひ行ってみてくださいね。
さて今回はTwitterのお話です。
サイトのサイドとかフッターにTwitterのタイムラインを埋め込むのは良く有ると思います。今回はその基本的なカスタマイズについてです。
Twitterにログインしたら、「設定」→「ウィジット」と進めます。新規作成ボタンからTwiterウィジットを作ります。
基本的な設定はこの画面で行います。
設定する項目は
です。
設定が終わったら「ウィジットを作成」ボタンでコードが表示されるので、表示されたコードをコピーして自分のサイトへ貼付けます。これで基本的にTwitterのタイムラインを埋め込むことができました。
埋め込んだウィジットのdata-chrome属性でカスタマイズができますよ。
data-chrome属性で変更できる設定は
今回はスクローバー以外は全部設定してみました。data-chrome属性を複数設定する場合は半角スペースで繋ぎます。transparentで背景が透明になっていることに背景を設定したボックスの中に入れてあります。
|
1 2 3 4 5 6 |
<a class="twitter-timeline" href="https://twitter.com/agn_web" data-chrome="noheader nofooter noborders transparent" data-widget-id="000000000000000000">@agn_webさんのツイート</a> <script>// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); // ]]></script> |
data-chrome属性以外にも、幅・高さ・ボーダー色・表示するツイート数なども設定できるようです。
詳しくは「カスタマイズに関するドキュメント」をご覧ください。
これでサイトデザインに合わせて使いやすくなりましたね！しかし前からこんなに変えられたかなぁ。
AGN Web TeamでもTwitterしてます。お気軽にフォローしてくださいね！@agn_web
ちなみにFacebookはこちら。