JavaScriptなどプログラミングに関する投稿をしています。Graphics)は、ベクター画像のため、JPEGやPNGなどと比べ、高画像で軽量、またCSSでsizeやcolorの変更などができます。進化し続ける高解像度なスマートフォンや、Retinaディスプレイなどへの対応には、SVGが必須と言えます。WordPressでSVGのアップロードWordPressはデフォルトでSVGファイルのサポートを行なっておりませんので、SVG画像のアップロードができません。それを許可するためには、子テーマ内のfunctions.phpへ、以下の記述を追加します。'add_file_types_to_uploads');これでSVGファイルが許可されたファイル形式となり、アップロードが可能になります。通常、WordPressのサイトタイトルはheader.php内にあり、以下の部分が該当するかと思います。>でサイト名が表示されます。?></a></h1>SVG画像をimgタグで表示する場合は、アップロードした画像のパスを以下のように記述します。alt="remonote"></a></h1>あとはcssでwidthなどを指定します。auto;}これでも十分ロゴとして使えますが、色や、線幅を変えたくなったら、その度に画像を差し替えなければいけません。いったことをcssでできるようにするには、SVGコードで表示させます。txtファイルなどで表示されたSVGコードをコピーします。コピーしたSVGコードを、aタグの間に設置します。そのまま貼り付けても、問題ありませんが、コード量が多くなりますので、不要な記述は削除してもかまいません。y2="55"/></svg></a></h1>これでSVG画像が表示されたかと思います。色やサイズはCSSで指定します。SVGに使えるCSSのプロパティです。fillやstrokeなどSVG独自のプロバティがあります。線の透明度ロゴをhoverさせる場合は、以下のように、指定すればOKです。Icons」を導入してみました。SVG形式なのでCSSが適用できるのがまた嬉しいです。プラグインを検索してインストールします。Icon」のアイコン挿入ボタンが現れますので、クリックします。すると、アイコンの挿入画面が出てきて、多数のアイコンを選べます。b」から選べますが、何もしなければ、デフォルトの「i」になります。Icon」ボタンで挿入するか、Shortcodeを直接記事に貼り付けます。wrap="i"]ブラウザで確認するとアイコンが表示されています。⬇︎こちらソースコードを見てみると次のようなスタイルが適用されていましたので、font-siezやcolorを変えたい場合はここにCSSで指定すればいいですね。"\e18d";}ちなみに:beforeは、要素の直前に内容を挿入する擬似要素です。わたしの場合はリンクにつけて、同時にホバーもさせて使いたかったので、次のようにaタグで囲いました。Plugin</a>文章とバランスを合わせるためにCSSで微調整しています。class=”icon_demo”はデフォルトのアイコンと分けるために付与しています。#ea2b62;}これで⬇︎のようになりました。