サイトに関するCool-Rockのブックマーク (6)

  • アイコン画像をWebフォントに変更して高速化

    Webフォント導入webフォント(アイコンフォント)導入するにあたって複数の案がでました。有名なのは「Font Awesome」というサービスで色々なアイコンフォントが利用できます。一部見せておくとこんな感じです。 非常にアイコンの種類が豊富で使い方も簡単なのですが、「Font Awesome」で私の使い方SNSのアイコン(はてブとかLineとかPocket等)がありませんでした。 結局必要なアイコンだけダウンロードして使える「IcoMoon」というサービスを利用する事にしました。この「IcoMoon」では自作したアイコンをインポートしてウェブフォントにできるのですよ。 さて、この「IcoMoon」に自作したSNSボタンをインポートするのですが、私自身「Illustrator」とかそれ系のソフトを利用した事がないので、アイコン作成する知識がありません。でもネットで自作したSNSボタンを公開

  • スクリーンショットにコメントをつけてシェアできるツール

    2017年11月23日 便利ツール Webサイトに修正指示を出す時、どんなツールで、どのようにシェアしていますか?該当ページのスクリーンショットを撮影し、その画像に指示を入れていく…という方が多いかな、と思います。今回はWebサイトの制作者のみならず、制作者に指示をだす人や、クライアント側も使える、修正指示がグンと楽になりそうなツールをいくつか紹介します! ↑私が10年以上利用している会計ソフト! AUN[あうん] AUN[あうん]はふせん紙の感覚でWebサイトや画像にコメントを残し、共有できるツールです。登録不要!無料で気軽に利用できるところが魅力的。対象となるWebサイトのURLを入力するだけでスクリーンショットを撮影でき、指示やコメントを残していけますよ。さっそく試してみましょう。 サイトからURLを入力し、読み込みが終わると、画面をトリミングするかどうかの選択画面が表示されます。読

    スクリーンショットにコメントをつけてシェアできるツール
  • こいつぁ便利ね…!他サイトの記事紹介リンクをかっこ良く作成してくれる「Embedly」

    人様のブログや他サイトの記事を紹介するためにいろんな方法をとっておりましたが、@shintarowfresh さんの最近捗ったweb系のあれこれって記事で知ったEmbedlyというサービスがなかなか良かったので導入&カスタマイズしてみました。 Embedly 外部サイトを紹介するのに便利なEmbedlyの使い方 まずはこちらのページへGO。 ブックマークレットをブックマークバーにぶち込みます。 これで準備は完了。あな簡単し。 あとは紹介したいページにアクセスして、先ほど登録したブックマークレットをクリックすると… いいじゃない!下部のソースコードを貼り付ければおしまいです。 できあがりは↓こんな感じ。 ホント買って良かったこのレンズ!Sonnar T* FE 55mm F1.8 ZA(SEL55F18Z)実写レビュー レスポンシブ対応ですし、使い方も非常に簡単。こいつぁ便利ですね! 最近捗

    こいつぁ便利ね…!他サイトの記事紹介リンクをかっこ良く作成してくれる「Embedly」
  • SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ!! - Qiita

    SEO好きですか?私は嫌いです。そんな事に取り組むよりも仕組みやコンテンツの改善に取り組みたいです。今回はそんなSEO嫌いにお送りする、SEO対策集です。やってられないSEOは1日で終わらせてもっと生産的な仕事に集中しましょう! まずは結論から 下記をテンプレートにしていただければ良いです。google検索表示もfacebook表示も上手くいきます。twittercardの表示だけは公式サイト(日語)より申請がいるのでそれだけしておきましょう。 <title>Qiita - プログラマの技術情報共有サービス</title> <meta content="Qiita - XXX" name="title"> <meta content="ブログ記事詳細. 120字以内を心がけよう。その中でも最初の40字は大事。" name="description"> <meta content='キーワ

    SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ!! - Qiita
  • OGPにおける記述方法の勘違いと修正方法(2015年春時点での最新情報?)

    OGPとは OGPとは「Open Graph Protocol」の略でSNSで使われる共通仕様を指します。 ただ、そうは行っても共通で使える部分と、各SNS専用の項目が必要な場合があります。 ここでは主要SNSについて紹介していきます。 あと、HTML5を基ベースとして書いていますのでその点はご了承ください。 基的なOGPの設定項目一覧 OGPの記述はの中で行います。 head要素の変更 まずはhead部分にprefixを追加します。 <head prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#"> OGP設定のおまじないみたいなものです。この設定を行う事によってOGPを認識するようです。 注意点ですがog: http://ogp.me/ns#の部分でog:の後は必ず半角スペースを入れて下さい。これはOGP

    OGPにおける記述方法の勘違いと修正方法(2015年春時点での最新情報?)
  • 【よく見るものを一覧で解説】HTTPステータスコードとは?コード番号別に詳しく解説 | ナイルのマーケティング相談室

    HTTPステータスコードとは、ウェブサイトにアクセスしたとき、正常な画面ではない場合に表示される3桁の数字のことです。 ウェブサイトにアクセスしたときに「404」や「503」といった数字が表示された経験はないでしょうか。HTTPステータスコードはたくさんの種類があり、それぞれ意味する内容が異なります。 そこで記事では、それぞれのステータスコードが持つ意味や対処法、HTTPステータスコードの確認方法を解説します。 HTTPステータスコードについて知ることで、アクセスしたウェブサイトに何が起きているのかを理解できるようになるので、ぜひご参考にしてください。 この記事のポイント HTTPステータスコードは、特定の HTTP リクエストが正常に完了したかどうかを示す3桁の数値で表されるもの 大まかに200番台の成功レスポンス、300番台のリダイレクト、400番台のクライアントエラー、500番台の

    【よく見るものを一覧で解説】HTTPステータスコードとは?コード番号別に詳しく解説 | ナイルのマーケティング相談室
  • 1