タグ

2018年3月19日のブックマーク (7件)

  • Webデザイン制作のために、絶対に質問すべき64のコト |ブログ|root|芯を問い、成長に貢献する

    どんなに綿密な打ち合わせを行っていても、クライアントの持っているイメージどおりにWebサイトを制作するのは難しいもの。最終チェックで「なんかイメージ違うんだよな……」なんて言われた苦い経験は、誰にでもあるのではないでしょうか。 今回は、そんなすれ違いを少しでもなくすために、制作前に確認しておきたいことをまとめました。自分専用にオリジナルのヒアリングシートを作る際にも使えるので、ぜひ活用してみてください。 まずはここから!制作コンセプト編何をおいても、必ず確認しておきたいのが制作コンセプト。サイトを作る目的が曖昧なままでは、いつまでたってもクライアントの要求を満たせるページは生み出せません。まずはここで紹介する項目を確認し、サイトのイメージをつかんでいきましょう。 1. どのような種類のサイトを制作するのか?(商品情報サイト、ECサイト、キャンペーンサイトなど)2. どのような顧客をターゲッ

    Webデザイン制作のために、絶対に質問すべき64のコト |ブログ|root|芯を問い、成長に貢献する
  • WordPress:アイキャッチ画像のURL・代替テキスト・サイズといった各種情報を取得する方法 - NxWorld

    利用頻度が高いと思うURLや代替テキストをはじめ、タイトル・キャプション・説明などWordPressのアイキャッチ画像の各種情報を取得する方法です。 テンプレートタグで単純に表示させるのではなく、余計な記述を省いたり任意で何か新しく属性を追加させたいときなど出力内容をいろいろとカスタマイズしたい場合に、紹介する方法で各種情報を取得することで様々な出力ができると思います。 アイキャッチ画像を単純に表示させたい場合は、the_post_thumbnail()またはget_the_post_thumbnail()をechoする形でimgを出力させることができますが、特定の情報のみ出したい場合や情報をもとに手を加えたい場合は、下記で各情報をそれぞれ取得することができます。 // URL $thumbnail_url = get_the_post_thumbnail_url(); // ID $th

    WordPress:アイキャッチ画像のURL・代替テキスト・サイズといった各種情報を取得する方法 - NxWorld
  • ヘッドレスブラウザとは何か?その概要と使用理由を主なツールの紹介とともに解説

    あなたは、開発中のWebサイトのユーザーインターフェイス(UI)が正常に動作し、サイト全体が最適なユーザーエクスペリエンス(UX)を提供できているかどうかをどのように調べているのでしょうか。ヘッドレスブラウザは、高レベルの動作を自動化するための、そしてサイトが一般的なシナリオ中で行う動作の質を把握するための高速で軽量のツールを与えてくれます。 ヘッドレス環境には、ChromeやFirefoxなどの一般的なブラウザのヘッドレス版や、いくつかの異なるブラウザをシミュレートするツールを含む、多くの選択肢があります。ヘッドレステストのメリットを熟知し、Web開発やテストに最適なブラウザを選択できるように、利用出来るブラウザの選択肢について学んでいきましょう。 ヘッドレスブラウザとはどのようなものか ヘッドレスブラウジングというのは、奇妙な専門用語のように感じられるかもしれませんが、これは単に、認識

    ヘッドレスブラウザとは何か?その概要と使用理由を主なツールの紹介とともに解説
  • よく使うWordPressのif文(条件分岐)まとめ - コムテブログ

    TL;DR よく使う WordPress の if(条件分岐 / Conditional Tag)。使用頻度が高いものを書いてます。 基 条件成立時、上の条件でない時、条件が成立しない時の条件が複数あるパターン。条件を増やすときは elseif を増やし、条件が一つだけのときは、elseif と else を省略する。 <?php if() : ?> // 条件成立時 <?php elseif () :?> // 上の条件でない時 <?php else : ?> // どの条件も成立しない時 <?php endif; ?>

    よく使うWordPressのif文(条件分岐)まとめ - コムテブログ
  • デベロッパーなら知っておきたい30秒でできるCSSスニペット集「30 Seconds of CSS」

    毎日コーディングでさまざまなコードを書くデベロッパーにとって非常に便利なスニペット。知っているだけで作業効率が格段にアップするもの。そんな方におすすめできる「30 Seconds of CSS」をご紹介していきたいと思います。 先進的な知識を多く取り込むためにも、基礎的な業務内容をいかに短縮して行っていけるかは非常に重要なポイント。デベロッパーの方はぜひ下記よりチェックしてみてください。 詳しくは以下 レイアウト、アニメーション、インタラクティビティ、その他といったようにカテゴライズされており、それぞれのジャンルに分類されたコードがわかりやすく記載されています。デモもすぐ閲覧できるようになっており、使いたい要素を探しやすいのも魅力。奇抜なものはありませんが、基として使いたい、ぜひ知っておきたいものが揃っているので、日々のコーディングに非常に役立ってくれそうです。 コードを書く手間を短縮す

    デベロッパーなら知っておきたい30秒でできるCSSスニペット集「30 Seconds of CSS」
  • キャッシュ対策!WordPressで読み込んでいるCSSにファイルの最終更新日時をバージョン番号として追加する方法 | TechMemo

    WordPressで読み込まれるCSSに、ファイルの最終更新日時のバージョン番号を付与する方法をご紹介いたします。 「style.css?ver=1521411592」のように、UNIXタイムスタンプのバージョン番号を追加するため、CSSを変更した際にいちいちキャッシュをクリアしなくてもよくなります。 WordPressCSSにファイルの最終更新日時をバージョン番号として追加する方法 以下のコードをfunctions.phpに追加することで、CSSにファイルの最終更新日時をバージョン番号として付与することができます。 function update_styles_ver( $styles ) { $mtime = filemtime( get_stylesheet_directory() . '/style.css' ); $styles->default_version = $mtim

    キャッシュ対策!WordPressで読み込んでいるCSSにファイルの最終更新日時をバージョン番号として追加する方法 | TechMemo
  • CSSの作業効率がアップする、少し高度な使い方のまとめ

    Webページやスマホアプリをはじめ、レスポンシブ対応ページなどで役立つ、CSSのあまり知られていない仕様や少し高度な使い方を紹介します。 Lesser known CSS quirks & advanced tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 垂直方向のpaddingは要素の幅に対して相対的 02. マージンの相殺が適用されない条件 03. 不透明度でz-indexの積み重ね順序を変更できる 04. CSSのカスタムプロパティ(変数) 05. vertical-align: top | middle | bottom 06.「height: 100%;」の挙動 07. idとclassの詳細度 08. 属性のターゲティング 09. 複数の値を指定する場合、垂直、水平の順番になるとは限らない 10.

    CSSの作業効率がアップする、少し高度な使い方のまとめ