【WordPress】サイトのロゴをSVG画像にする

SVGとは

SVG(Scalable Vector Graphics)は、ベクター画像のため、JPEGやPNGなどと比べ、高画像で軽量、またCSSでsizeやcolorの変更などができます。進化し続ける高解像度なスマートフォンや、Retinaディスプレイなどへの対応には、SVGが必須と言えます。

WordPressでSVGのアップロード

WordPressはデフォルトでSVGファイルのサポートを行なっておりませんので、SVG画像のアップロードができません。それを許可するためには、子テーマ内のfunctions.phpへ、以下の記述を追加します。

functions.php

これでSVGファイルが許可されたファイル形式となり、アップロードが可能になります。

SVG画像の設置

通常、WordPressのサイトタイトルはheader.php内にあり、以下の部分が該当するかと思います。aタグの間にある< ?php bloginfo( 'name' ); ? >でサイト名が表示されます。

header.php

SVG画像をimgタグで表示する場合は、アップロードした画像のパスを以下のように記述します。

header.php

あとはcssでwidthなどを指定します。

css

これでも十分ロゴとして使えますが、色や、線幅を変えたくなったら、その度に画像を差し替えなければいけません。そういったことをcssでできるようにするには、SVGコードで表示させます。

SVGコードの取得

Illustratorで作成した時の場合ですが、 メニューの【ファイル > 書き出し > 書き出し形式… > 「ファイル形式: SVG(svg)」を選択 > 書き出し > コードを表示 】 で、txtファイルなどで表示されたSVGコードをコピーします。

illustrator svg txt

コピーしたSVGコードを、aタグの間に設置します。そのまま貼り付けても、問題ありませんが、コード量が多くなりますので、不要な記述は削除してもかまいません。

header.php

これでSVG画像が表示されたかと思います。

CSSの指定

色やサイズはCSSで指定します。SVGに使えるCSSのプロパティです。なお、fillやstrokeなどSVG独自のプロバティがあります。

ロゴをhoverさせる場合は、以下のように、指定すればOKです。

css

以上です!ご覧いただき、ありがとうございました!😌

【CSS】inputのフォーカス時の青い光を消す

実行環境

これのことです!⬇︎ フォームにもれなくついてくる青いヤツ!消したくても原因はborderでもないしshadowでもないし、一体何者なんだとずっと思っていました!

rails bootstrap input focus css

正体ははoutlineでした!以下の通りに指定すると青い光は消えて、borderをくっきり上書きすることができました。
outlineのリファレンスはこちらです。
http://www.htmq.com/style/outline.shtml

rails bootstrap input focus css

また、事前にbackground-colorを少し暗くしておくことで、フォーカスした時にinputフィールドが明るくなった感じがしますね!

また、上記のデモでは適用していませんが、フォーカス時のplaceholderのcolorを変える場合はこちらです。

この青いヤツから解放された時は、すがすがしい開放感に浸れました!
以上です。ご覧いただき、ありがとうございました😁

【Rails5】Deviseのregistrations#editで画像をアップロードする

rails avatar upload devise

Deviseのインストールが済んでいて、registrations#editでユーザーの画像をアップロードしたいという時の流れです。アップローダーのライブラリはcarrierwaveを使っています。

環境はこちらです

準備

必要なgemはこちらです。

Gemfile

$ bundle install します。

DeviseはUserモデルだとして、そこにavatarカラムを追加します。

$ rails db:migrat します。

アップローダー

avatarのアップローダーを生成します。

アップローダーの内容は適宜変更してください。

app/uploaders/avatar_uploader.rb

モデルとアップローダーを紐づける

使用するモデルに次の一行を追記して、モデルとの紐づけをおこないます。

app/models/user.rb

ストロングパラメーターの追加

account_update_paramsにavatar, avatar_cache, remove_avatarを追加します。avatar_cacheはバリデーション時などに画像を保持するためで、remove_avatarは画像を削除する時のためのパラメーターです。

app/controllers/users/registrations_controller.rb

Views

user/registrations#editへのリンクを貼っておきます。

‘current_user’はサインインしているユーザーを取得するdeviseのヘルパーメソッドです。既存の画像がない場合は’no_avatar.png’という画像をあてています。

app/views/devise/registrations/edit.html.erb

CSS

アバター画像を正円にするために’border-radius’を50%にしています。画像の縦横比を保ちつつ中央にトリミングする方法は色々あるかと思いますが、’object-fit’プロパティーを使えば一行で済みます。

リダイレクト先

Deviseのアカウント情報を更新した後のリダイレクト先はデフォルトではroot_pathになっているかと思いますが、指定するには after_update_path_forを使います。

app/controllers/users/registrations_controller.rb

今回は以上です!続編では、アップロードした画像をすぐにプレビューできるようにjQueryを追加したいと思います!😊
アップロードした画像を即時プレビューする