タグ

Web制作と解説とスニペットに関するglat_designのブックマーク (3)

  • Media Queriesの効率的な書き方 - Qiita

    メディアクエリは要素ごとに記述する メディアクエリはまとめて書いたり外部ファイル化することもできますが、要素ごとに記述するほうが効率がいいです。 離れた場所にメディアクエリの記述があると、修正のたびにあっちこっち行ったりきたりして手間がかかります。 また、見通しが悪くなるのでメディアクエリごとのルールの影響が把握しづらく、修正漏れが発生する確率が高くなります。 メディアクエリの記述はmixinで書く 自分は以下のようなmixinを定義して、 @mixin max-screen($break-point) { @media screen and (max-width: $break-point) { @content; } } @mixin min-screen($break-point) { @media screen and (min-width: $break-point) { @co

    Media Queriesの効率的な書き方 - Qiita
    glat_design
    glat_design 2017/01/18
    Media Queriesのうまいこと行かなさ、もどかしい /
  • WordPress でオリジナルの SNS シェアボタンを実装する方法 | WP-E (仮)

    2015年12月1日追記 : Twitter のツイート数取得 API count.json の提供終了に伴い、内容を修正しています。 EXP では以前まで WP Social Bookmarking Light を使っていましたが、つい最近オリジナルのシェアボタンに切り替えました。ただし、pocket は公式の API が公開されていないので公式ボタンを採用しています。この記事では Facebook、はてブ、Twitter のオリジナルシェアボタンの実装方法を紹介していきます。 目次 Facebook 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 はてなブックマーク 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 Twitter 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 pocket さいごに PHP JavaScript Faceboo

    WordPress でオリジナルの SNS シェアボタンを実装する方法 | WP-E (仮)
    glat_design
    glat_design 2015/05/16
    こういうの毎回ブクマしてる気がするけど今回もしておこう…w /
  • SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

    サンプルデモ真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。 HTML <h2>シェアボタンの表示</h2> <p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p> <

    SNSのシェアボタンの設置方法まとめ (サンプルコード付き)
  • 1