SVGとは
SVG(Scalable Vector Graphics)は、ベクター画像のため、JPEGやPNGなどと比べ、高画像で軽量、またCSSでsizeやcolorの変更などができます。進化し続ける高解像度なスマートフォンや、Retinaディスプレイなどへの対応には、SVGが必須と言えます。
WordPressでSVGのアップロード
WordPressはデフォルトでSVGファイルのサポートを行なっておりませんので、SVG画像のアップロードができません。それを許可するためには、子テーマ内のfunctions.phpへ、以下の記述を追加します。
functions.php
|
1 2 3 4 5 6 7 8 9 |
function add_file_types_to_uploads($file_types){ $new_filetypes = array(); $new_filetypes['svg'] = 'image/svg+xml'; $file_types = array_merge($file_types, $new_filetypes ); return $file_types; } add_action('upload_mimes', 'add_file_types_to_uploads'); |
これでSVGファイルが許可されたファイル形式となり、アップロードが可能になります。
SVG画像の設置
通常、WordPressのサイトタイトルはheader.php内にあり、以下の部分が該当するかと思います。aタグの間にある< ?php bloginfo( 'name' ); ? >でサイト名が表示されます。
header.php
|
1 2 3 4 5 |
<h1 class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <?php bloginfo( 'name' ); ?> </a> </h1> |
SVG画像をimgタグで表示する場合は、アップロードした画像のパスを以下のように記述します。
header.php
|
1 2 3 4 5 |
<h1 class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="https://remonote.jp/wp-content/uploads/2018/10/remo-log-4.svg" alt="remonote"> </a> </h1> |
あとはcssでwidthなどを指定します。
css
|
1 2 3 4 5 |
.site-title img { width: 45%; max-width: 150px; height: auto; } |
これでも十分ロゴとして使えますが、色や、線幅を変えたくなったら、その度に画像を差し替えなければいけません。そういったことをcssでできるようにするには、SVGコードで表示させます。
SVGコードの取得
Illustratorで作成した時の場合ですが、 メニューの【ファイル > 書き出し > 書き出し形式… > 「ファイル形式: SVG(svg)」を選択 > 書き出し > コードを表示 】 で、txtファイルなどで表示されたSVGコードをコピーします。
コピーしたSVGコードを、aタグの間に設置します。そのまま貼り付けても、問題ありませんが、コード量が多くなりますので、不要な記述は削除してもかまいません。
header.php
|
1 2 3 4 5 6 7 8 9 10 |
<h1 class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 478.5 84.5"> <defs><style>.cls-1{fill:#333;stroke-width:2px;}.cls-1,.cls-2,.cls-3{stroke:#333;}.cls-1,.cls-4{stroke-miterlimit:10;}.cls-2,.cls-3{fill:none;stroke-linejoin:round;stroke-width:7px;}.cls-3,.cls-4{stroke-linecap:round;}.cls-4{fill:#fff;stroke:#000;stroke-width:5px;}</style> </defs> <title>remo-log 5 </title> <path class="cls-1" d="M130.9,73.9c-.2-2.2-1.3-5.3-4.4-12.8-4.3-10.3-7.3-13.2-13.3-13.2H99.3V65.4a45.2,45.2,0,0,0,.6,8.5h-7a45.4,45.4,0,0,0,.6-8.4V25.3a53.7,53.7,0,0,0-.6-8.6l8.2.2h16.5c10.9,0,16.9,5.1,16.9,14.4,0,4.8-1.4,8.4-4.5,11s-4,2.9-8.1,3.8c3.1.9,4.9,2.9,7.6,8.2,1.8,3.5,3.6,7.4,5.9,12.6a68.9,68.9,0,0,0,3.4,7ZM117.1,42.7a12,12,0,0,0,8.5-3.2,9.9,9.9,0,0,0,2.9-7.6c0-6.4-3.8-9.8-10.9-9.8H99.3V42.7Z"/><path class="cls-1" d="M150.8,54.5c.2,5,1,7.8,3,10.5a12.5,12.5,0,0,0,10.6,5.1c6.1,0,10.3-3,12.4-8.8l5.3,2.1a17.9,17.9,0,0,1-4.1,6.2,18.7,18.7,0,0,1-13.6,5.3c-11.8,0-19.2-8.2-19.2-21.2s7.4-21.2,18.6-21.2c9.7,0,16.6,6.2,18.1,16.3.1.8.4,3.7.5,5.8Zm25.6-4.7c-.5-4.2-1.6-6.9-4-9.2a12.2,12.2,0,0,0-8.9-3.4,11.7,11.7,0,0,0-10.6,6.5,15.7,15.7,0,0,0-1.9,6.1Z"/><path class="cls-1" d="M191,73.9a56.3,56.3,0,0,0,.5-8.5V41.9a54.4,54.4,0,0,0-.5-8.5h6.1v4.1c0,.4-.1,1.3-.1,2.7a15.4,15.4,0,0,1,2.8-3.7c2.5-2.5,6.2-3.9,10.6-3.9s7.4,1.3,9.7,3.8a9.9,9.9,0,0,1,2.3,4.4c3.5-5.8,7.6-8.2,13.9-8.2s8.7,1.6,10.9,4.6,2.6,5.3,2.6,9.7V65.5a52.7,52.7,0,0,0,.5,8.4h-6.7a45.5,45.5,0,0,0,.5-8.5V47.7c0-7.1-2.6-10.2-8.6-10.2A11.2,11.2,0,0,0,226,43a16.1,16.1,0,0,0-2.5,7.7V65.5a52.1,52.1,0,0,0,.5,8.4h-6.7a53.7,53.7,0,0,0,.5-8.5V47.7c0-6.6-3-10.2-8.4-10.2a11.7,11.7,0,0,0-9.8,5.7,16.7,16.7,0,0,0-2.5,7.5V65.4a59.7,59.7,0,0,0,.5,8.5Z"/><path class="cls-1" d="M259,53.7c0-13,7.8-21.2,20-21.2S299,40.7,299,53.6s-7.8,21.2-19.9,21.2S259,66.7,259,53.7Zm5.8-.1c0,10.2,5.5,16.4,14.2,16.4s14.2-6.2,14.2-16.3-5.4-16.4-14-16.4S264.8,43.4,264.8,53.6Z"/><path class="cls-1" d="M316.2,16.9a39.1,39.1,0,0,0,3.8,6.8l23.7,35.5c.8,1.3,3.1,5,4.9,8.2-.3-6-.5-9.3-.5-10V25.5a47.5,47.5,0,0,0-.6-8.6h7a46.9,46.9,0,0,0-.6,8.6v40a42.9,42.9,0,0,0,.6,8.4h-8.2a50.8,50.8,0,0,0-3.9-6.7L318.4,31c-.6-.9-3.1-5.2-4.1-7.2.3,3.5.5,7.2.5,9.1V65a47.9,47.9,0,0,0,.6,8.9h-7a47.9,47.9,0,0,0,.6-8.9V25.3a47,47,0,0,0-.6-8.4Z"/><path class="cls-1" d="M363.9,53.7c0-13,7.8-21.2,20-21.2s19.9,8.2,19.9,21.1S396.1,74.9,384,74.9,363.9,66.7,363.9,53.7Zm5.8-.1c0,10.2,5.5,16.4,14.2,16.4s14.2-6.2,14.2-16.3-5.4-16.4-14-16.4S369.7,43.4,369.7,53.6Z"/><path class="cls-1" d="M424.1,22.3a54.2,54.2,0,0,0-.5,8.3v2.8h3.6a46.1,46.1,0,0,0,7.6-.4v5.7a45,45,0,0,0-7.6-.5h-3.6V64.4c0,2.2.3,3.3,1,4a5.1,5.1,0,0,0,3.7,1.3c2,0,3.5-.5,5.9-2l1.7,5.3a20.2,20.2,0,0,1-8.5,1.7c-3.3,0-5.8-.8-7.3-2.3s-2.1-3.7-2.1-7.2V38.3h-3a50.2,50.2,0,0,0-6.7.5V33a34,34,0,0,0,6.7.4h3V30.6a56.9,56.9,0,0,0-.5-8.3Z"/><path class="cls-1" d="M445.9,54.5c.2,5,1,7.8,3,10.5a12.5,12.5,0,0,0,10.6,5.1c6.1,0,10.3-3,12.4-8.8l5.3,2.1a17.9,17.9,0,0,1-4.1,6.2,18.7,18.7,0,0,1-13.6,5.3c-11.8,0-19.2-8.2-19.2-21.2s7.3-21.2,18.6-21.2c9.7,0,16.6,6.2,18.1,16.3.1.8.4,3.7.5,5.8Zm25.6-4.7c-.5-4.2-1.6-6.9-4-9.2a12.2,12.2,0,0,0-8.8-3.4A11.7,11.7,0,0,0,448,43.7a15.7,15.7,0,0,0-1.9,6.1Z"/><polygon class="cls-2" points="67.5 81 3.5 81 3.5 4 48 3.5 67 22.5 67.5 81"/><polyline class="cls-3" points="40.5 14 40.5 29 56.5 29"/><line class="cls-4" x1="14.5" y1="43" x2="53.5" y2="43"/><line class="cls-4" x1="15.5" y1="67" x2="41" y2="67"/><line class="cls-4" x1="14.5" y1="55" x2="53.5" y2="55"/></svg> </a> </h1> |
これでSVG画像が表示されたかと思います。
CSSの指定
色やサイズはCSSで指定します。SVGに使えるCSSのプロパティです。なお、fillやstrokeなどSVG独自のプロバティがあります。
|
1 2 3 4 5 |
fill … 塗りつぶし fill-opacity … 透明度 0〜1 stroke … 線色 stroke-width … 線幅 stroke-opacity … 線の透明度 |
ロゴをhoverさせる場合は、以下のように、指定すればOKです。
css
|
1 2 3 4 5 6 7 8 9 |
a:hover .cls-1 { fill: red; stroke: red; } a:hover .cls-2, a:hover .cls-3, a:hover .cls-4 { stroke: red; } |
以上です！ご覧いただき、ありがとうございました！😌
