WordPressでSVGを扱いたい！ アップから表示まで完全対応する工程まとめ
いろいろなサイトで使われるようになったSVG。でも、WordPressはなぜかSVGファイルをサポートしていません。その理由と、メディアライブラリを拡張して対応する方法を徹底的に解説します。 ベクターイメージはWebの世界でますます一般的になりつつあります。SVGは標準的なイメージに代わる、スケーラブルでレスポンシブかつ高速な代替手段を提供します。SVGの主なメリットは、どのデバイスからでもくっきり鮮明に見え、通常はファイルサイズを小さく抑えられるという点です。 いまやSVGは特定のブラウザーに依存せず、サポートは広範囲であり、すべてのモダンブラウザーはイメージタグで指定されたSVGや、CSSのbackgroundプロパティの一部として指定されたSVGをサポートしています。 WordPressを使用しているなら、メディアライブラリーがどのようにメディアアセットの中央リポジトリとして動作する
無料アイコン - PNG およびベクターをダウンロード
UIMaterialWindowsSF SymbolsOfficeTinyPuffyColor3D FluencyEmojiGlyph NeueSimple SmallBlue UIIce Cream装飾的なPastelHand DrawnPulsarParakeetDecoColorGradientEmojiDottedStickersGlyph NeueBubblesCloudDoodleArcadePlumpyColor GlassBlue UIInfographicLacesStencilAvantgardeHatchWater ColorPixelsPapercutLED概要SF SymbolsiOS 17 OutlinedMaterial OutlinedDottedCute OutlineIsometric LinePastel GlyphHand DrawnPulsar L
PhotoMarche（フォトマルシェ）|無料で写真をダウンロードし放題で、さらに商用利用OK！
Photomarcheへようこそ！ 当サイトの写真素材はすべて無料です。 会員登録するだけですべての素材をご利用いただけます。 素材のダウンロードはログインしてクリックするだけでOK。 お気に入りの素材はもう見つかりましたか？ カテゴリーやタグも使って欲しい素材を見つけてください。 サイトに写真を投稿くださるカメラマンさんも募集しています。 写真素材は毎日増えます。新着写真素材もチェックしてください。 コンテジ、スマホ写真はありません。すべてが質の高い写真素材です。 特集テーマもどんどん変わっていくのでお楽しみに。 カメラマンが撮影した高品質な写真素材がすべて無料のダウンロードサイト。 フォトマルシェは、高品質な写真素材のダウンロードサイトです。ご利用はすべて無料です。日本全国の風景写真を中心に、プロカメラマンが撮影した様々な写真を取り揃えておりますので、ウェブサイトの制作などご自由にお使
WordPressのプラグインを開発しよう（初級編）
プラグインってなんだろう。 WordPressのテンプレートをカスタマイズしてるとfunctions.phpにコードを書くことがあると思います。 基本的にこのコードをプラグインフォルダに入れるだけでプラグインになります。 そのテンプレートに依存したものはfunctions.phpに記述したままでもいいと思いますが、ある程度使い回せるものでしたらプラグイン化すると良いと思います。 簡単なプラグイン 簡単な例を見てみましょう。 functions.php に次のようなコードがあるとします。 functions.php function show_text() { echo 'おはようございます。'; } これはテンプレートファイルに「<?php show_text(); ?>」と書くと「おはようございます。」と表示するだけのコードです。 これをプラグイン化してみます。 プラグインは「wp-co
要素にスタイルクラスを適用／除外するには？（addClass／removeClass／toggleClass／hasClass）
← 前回 連載 INDEX 次回 → 要素にスタイルクラス（class属性）を設定するのは、addClassメソッドの役割です。 スタイルを適用するという意味では、cssメソッドにも似ていますが、cssメソッドがコードの中にスタイル定義そのものを記述しなければならないのに対して、addClassメソッドはスタイルクラスの名前で指定できます。つまり、スタイル定義を明確にコードから分離できますので、保守性に優れます（＝JavaScriptのコードに混在したスタイル定義まで、デザイナーがメンテナンスするのは困難です）。cssメソッドは、まずスタイルを操作するには手軽な手段ですが、本格的なアプリでは、スタイル操作はaddClassメソッドを主体に行うことをお勧めします。 例えば以下は、addClassメソッドを使って、class="dotnet"である要素のテキスト色を赤（Red）に、背景色を黄色
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
HTML［map要素］イメージマップを定義する - TAG index
同時にid属性を指定する場合は、name属性とid属性の値は同一である必要があります。 イメージマップを使用することで、1つの画像内に複数のリンク領域を設定できるようになります。 次の例では、四角、丸、三角の図形と、それ以外の領域の部分にリンクが設定されています。 古いブラウザでは、それ以外の領域に設定されたリンクが機能しない場合があります。 イメージマップ作成の流れ イメージマップは、画像を埋め込むimg要素、マップを定義するmap要素、リンク領域を設定するarea要素、この3種類の要素で構成されています。 まず、イメージマップに使用する画像を用意して、それをimg要素で埋め込みます。 <img src="menu.gif" alt="メニュー"> map要素に name="" を追加して、任意のマップ名を指定します。次の例では map という名前を指定しています。（他のマップ名と重複し
HTMLとCSSでSVGを使うためのメモ - Qiita
Qiita初投稿です。 2014年にフリーランスとなってからというもの、なかなか勉強の時間がとれず、おざなりになってしまっている技術がいくつかあります…… その中でもSVGの扱い方について、簡単にではありますが調べたのでメモしておきます。 昨日までの自分に教えるような気持ちで書きます！ まず、SVGは使えるのか？ ブラウザ対応状況 Can I use... Support tables for HTML5, CSS3, etc だいたい大丈夫です（2016/07/27現在） IEも9以降であれば表示はできるっぽいです。 メリット 拡大・縮小に強い（きれい） 軽い 使い方によってはCSSで装飾したり、アニメーションさせることも可能 アクセシビリティ上も良いことがある（まだあまり調べてない） デメリット 写真やイラスト等には向かない（どんな画像かによる。これまでGIFやPNGで書き出していたタ
SVG形式の画像ファイルを表示する
WebページでSVG形式の画像を表示するコードを紹介します。 概要 SVG画像の準備 今回は下図のSVG画像を表示します。今回SVG画像は Adobe Illustratorで作成します。 imgタグを利用して表示する imgタグを利用してSVG画像を表示する例を紹介します。 コード 下記のHTMLファイルを作成します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p>SVGの画像です。</p> <img src="logo.svg" width="128"/> </body> </html> 解説 imgタグのsrcにSVGの画像ファイルを指定します。jpegファイルやpngdファイルなどの通常の画像ファイルの表示と同じタグの記述になります。 表示結果 上記の
データ変換ツール（BASE64, URLエンコード(URLデコード), HEX(16進ダンプ), MD5, SHA-1変換フォーム）
BASE64, URLエンコード, HEX(16進数ダンプ)等のデータを相互変換するツールです。 MD4, MD5, SHA-1, SHA-256等のアルゴリズムでメッセージダイジェスト/ハッシュ値を取得することも可能です。 使い方の詳しい説明は、このページの下の方をご覧ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「はてな」「LINE（ライン）」など、SVGのフリーアイコンを作っていただいたのでシェアします
ワードプレステーマTCD
