You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
公開2016.04.15 更新2017.12.03 仕事・技術 いつのまにやら非推奨になってしまっていたquery_posts()を使った記事取得から、WP_Queryを使った方法にアップデートするメモです。 従来のquery_postsを使った記事の取得 $args = array('post_type'=>'post'); query_posts( $args ); if(have_posts()) : while (have_posts()) : the_post(); //ここに処理 endwhile; endif; wp_reset_query(); こんなふうに書くのがこれまでの定番でした。 この方法は、Wp_reset_query()を入れないと、当該ページのメインループに影響を及ぼしてしまうことがあったりと厄介なところもありました。 WP_Queryを使ったイマドキの記事取
CSSでバーティカルリズムを実現しよう!line-height-stepを使ってみる 石井宏治(グーグル) 「バーティカルリズム」(Vertical Rhythm)と呼ばれるデザイン手法があります。最近は関連記事も増えてきたので聞いたことがある、という方もいらっしゃるかもしれません。日本語本来のタイポグラフィでは「行取り」と呼ばれる類似の手法があり、ほぼ全ての印刷物やワープロで使われています。 「行取り」あるいは「バーティカルリズム」とは、要素の配置に一定のリズムを取り入れることで、デザイン上の安定感や、可読性の向上などの効果が見込るデザイン手法です。通常は、本文の行の高さをリズムの単位として、要素間の余白を調整します。ノートの罫線や、原稿用紙をイメージするとわかりやすいと思います。 上の例のように、CSSでline-heightやmarginを適切に設定すれば実現可能ですが、メンテナンス
自分で成し遂げたいものがあったとしても、一人の力は限られている。当然、誰かに手伝ってもらうことになるが、そのカギは「お願いする力」である。編集者という仕事は、自力で何かをなしとげるというより、いわば人にお願いして成し遂げる仕事である。その経験と、自分が思う「理想の頼まれ方」とを掛け合わせて、仕事をお願いする心得を9つにまとめてみた。 その1:お願いする仕事のみならず全体を語る。お願いする仕事が、全体のごく一部だとしても全体像とそれが出来上がることの意味を伝える。単に石を積み上げてほしいのではなく、人々の憩いの場を作りたいためだと伝える。 その2:なぜあなたにお願いしたかを伝える。その仕事はだれでもいいからやってもらいたいのではなく、あなたにやってもらいたい。あなたの何が素晴らしいと思ってお願いしたいのか。その理由を語る。だれでもいいのではなく、「あなた」にお願いしたい思いを伝える。 その3
» 【注意喚起】iPhoneで命拾いした男性『緊急SOS機能』設定の重要性を強く訴える「今すぐ設定しておいた方がいいぞ」 特集 アップルはiOS11から「緊急SOS」機能の提供を開始した。これは、緊急時に素早く電話をかけたり、指定の連絡先にテキストメッセージを送信できる機能だ。 この機能のおかげで九死に一生を得た男性が、「設定」の重要性についてTwitterに投稿。その内容が注目を浴び、3万件以上リツイートされている。彼は1人で釣りをしていた時に、身体に異変が起きたという。 ・iPhone行列の常連 その男性は、iPhoneの新モデルが発売する度に、アップルストア銀座に並ぶ田村さんである。同じ行列仲間として、私(佐藤)も面識があり、行列の度に親しくさせて頂いている。その彼がTwitter(@xxxprius)で次のように投稿した。 ・田村さんの投稿 「iOS11で追加された「緊急SOS」の
ユーザー体験があらゆるWebサイトのデザインにとって不可欠であることに、疑いの余地はありません。 しかし、ユーザー体験が何よりも重要な業界があるとすれば、それはホテルを始めとしたサービス業です。 ホスピタリティとは要するに、顧客の期待に応え、顧客の期待を超えることであり、最初のタッチポイントから最後にいたるまで、顧客に優れた体験を提供し続けることです。 また、私たちが生きるデジタル時代において、ホテルのWebサイトは、ホテルが最初に提供する顧客体験の場であることが多いです。そのため、少なくともどのホテルも、直接予約の画面には力を注いでいます。ホテルのオーナーであれば、Webサイトでのユーザー体験はホテルでの顧客体験と同等に優れたものにしたいでしょう。 そのためには、まず初めに旅行者がWebサイトを訪れる理由を理解する必要があります。 旅行者の主な目的は何でしょうか? この問いに対する答えが
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
レスポンシブサイトのコーディング時のbr要素 ちょっと目からウロコだったのでメモ。 あがってきたデザインがパソコン用のサイトの方は改行があるのに、スマフォ用は改行がない。うーん、改行するまとまり箇所をspan要素で囲って、CSSでblock要素化するかなーとも考えたんですけど、美しくない。 そこで、ハッとなった。スマフォのサイズになった時にbr要素を無効にすれば良いんだと。そしたらできた。 @media screen and (max-width: 1000px) { br { display: none; } } なんとたったこれだけ。media screenで○○px以下は無効にしてしまいます。特定の箇所だけであれば、その箇所をclass属性でもつけて無効にしてしまえば良い。逆にパソコンサイズの方を改行させないのであれば、パソコン用サイトに改行がなくて、スマフォ用サイトに改行がある場合
2018/11/07 内容訂正 「Click Classes」ではなく、「Click Element」では?とのご指摘をいただきました。 お詫びして訂正いたします。 イベントトラッキングでクリックされた要素の任意の属性名を取得したい場合があります。 今回は参考に img がクリックされた前提で alt を取得するまでをご紹介します。 下準備 Click Element を有効に 変数に移動して設定から Click Element を有効にします。 トリガーの作成 新しいトリガーを作成 「新規」をクリックして新しいトリガーを作成します。 トリガータイプを指定 「トリガータイプ」は クリック → すべての要素 を選択。 トリガーの発生場所を指定 「このトリガーの発生場所」を「一部のクリック」にして 先程有効にした「Click Element」を選択。 「CSSセレクタに一致する」を選び、 今回
インフォグラフィックとは情報やデータを視覚的に表現したもので、文字や言葉にすると膨大な量になってしまったり表現がわかりづらくなるものをイラスト・グラフ・図・ピクトグラムなどを用いてわかりやすく見せることができます。 そんなインフォグラフィックデザインが多数まとめられたデザイン参考サイトを紹介します。 全体的な配色や配置といったバランス、様々な形状やサイズの要素の組み合わせ方など、インフォグラフィックに限らずデザインとして参考になる部分も多いです。 infographic.jp インフォグラフィック作成サービスを行っている企業が多数のデザイン事例を紹介しており、ページ上部にあるナビの「GALLERY」からより多くのデザインを閲覧できます。 infogra.me インフォグラフィックやデータビジュアリゼーションを共有するコミュニケーションプラットフォームで、国内外問わず多数のインフォグラフィッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く