タグ

2016年10月8日のブックマーク (4件)

  • 【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方

    ほとんど無料ですがいくつか有料のも混ざっています。有料のを選ぶとアイコンセレクト画面ではなく『お金払ってね』的な画面に切り替わりますのですぐわかるかと思います。 また、絵柄ごとにライセンスが異なります。Removeボタンすぐ上のライセンスで確認してください。英語の説明ですが、翻訳サイトを使うとなんとなく意味が分かります。 欲しい画像がみつからなかったら・・・ 上記のところにも欲しいアイコンが見つけられなかった場合、icomoonは自作のアイコンやフリーのSVGアイコンなどもWEBフォント化することが出来るのです。WEBフォント化にすることができるのはSVG形式の画像です。SVG形式の画像はIllustratorなどで作成することができますが、探せば無料で利用できるサイトもたくさんあります。 2014年、無料で商用利用できる最新フリーアイコン素材のまとめ これらを組み合わせれば、さすがに好み

    【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方
    div1
    div1 2016/10/08
  • IllustratorとIcoMoonでSVGスプライトのラクラク設定!

    2016年2月9日 Illustrator, SVG, 便利ツール 繰り返し使うSVG形式のアイコン等を表示する際に便利なSVGスプライト。しかし、symbol タグで囲んで…一つ一つにIDを付けて… viewBox 属性をコピペして…と、当にコーディングがめんどくさい!新規プロジェクトを始める度に設定するのが煩わしくなり、いろいろと楽する方法を試した結果、アイコンジェネレーターツールの「IcoMoon App」を使う方法に落ち着いたので、やり方を紹介したいと思います。 ↑私が10年以上利用している会計ソフト! SVGスプライトとは? SVGスプライトは、ロゴやアイコンなどの複数のSVG画像をひとつのファイルにまとめて保存し、使いたい時に呼び出す方法です。SVGなので、拡大縮小しても画質が劣化しません。詳細は過去記事「アイコンフォントからSVGへ!より手軽にベクター画像を表示しよう」に目

    IllustratorとIcoMoonでSVGスプライトのラクラク設定!
    div1
    div1 2016/10/08
  • SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント

    検索エンジンがページ構造を理解しやすいようにHTMLがマークアップされていることは、安定的に検索結果上位にインデックスされるために重要な要素の1つです。 当然のことながら、前提として検索キーワードを想定した質の高いコンテンツ作成が必要です。せっかく質の高いコンテンツを作成してもマークアップの仕方が論理的に間違っていると台無しです。 今回はSEO対策として押さえておいてほしいHTMLおよびHTML5マークアップの最低限のポイントについてお話しします。 この記事では自力でSEOに最適なマークアップをする方法を紹介していますが、はじめからSEO対策がばっちりなWordPressテーマを使えば、なにもしなくても良いのでとてもラクです。SEO対策が万全のWordPressテーマは下記で紹介しています。 WordPressのおすすめテーマはコレ!SEOもレスポンブも完璧【有料&無料】 headタグ内の

    SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント
    div1
    div1 2016/10/08
  • Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする! そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs

    Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    div1
    div1 2016/10/08