CSSの面倒なコード、アニメーションやグラデーションやシャドウなど、表示結果を見ながらコードを生成でき、HTML5のよく使うスニペットや新要素、MetaタグやOGPやTwitterカードなどのコードを簡単に生成できるオンラインサービスを紹介します。 こういったコード生成は探せば見つかるかもしれませんが、まとまってると便利ですね。
![Web制作者はブックマークしておくと便利!HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス](https://cdn-ak-scissors.b.st-hatena.com/image/square/2f7d24c7b0dfa86340e998aad8aa802e5f39c820/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015063003-01.png)
OGP画像シミュレータとは? FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 (2014年01月
【エンゲージメント率150%UPも!?】注目機能Twitter Cards!内容詳細と導入方法まとめ 反応率UPに期待大!注目の機能Twitter Cardsの内容詳細と導入方法をまとめてご紹介します! こんにちは、アライドアーキテクツ株式会社 制作部プロデューサーの久保田です。 突然ですが、あなたはTwitterに昨年導入された注目機能、「Twitter Cards」をご存知ですか? Twitter Cardsを設定することにより、企業は「FacebookのOGP」のように、Twitterタイムライン上における投稿の見え方を最適化することができます。今回は、多くの情報が流れるタイムライン上で目に留めてもらい、さらに広めてもらうためにぜひ導入したい機能「Twitter Cards」の詳細と、設定方法をまとめて詳しくご紹介します。 Twitter Bird Sketch / shawncam
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く