CSSデザインの本買ったりSVGで画像作ったり

動的サイトから静的サイトに変えようかなと、ちまちま作業を進めたものの、何せHTML＆CSSの知識が微妙なので、今風デザインのサイトが作れなかったりする。

さすがにコレはちょっとなーと思ったので、『作って学ぶ HTML＆CSSモダンコーディング』って本を買ってきたり。この本は同じレイアウトでも、Flexboxで設定するケース・CSS Gridで設定するケースと、複数方法が書かれているのがよい。

余談ですが商品広告リンク、今まではボタンの色をこのブログに合わせて変更してましたが、今回から変更せずにデフォルトのままにしました。新しいサイトは色を変えようと思うし今後も変えるかもなので、色を変える度に広告変更するのも面倒臭いなと思いまして。

話を元に戻すが、この本だとサイトタイトルはSVGで作ったロゴ画像使ってるね。(この本ではファビコンの事は一切書かれていないが)ファビコンも今はSVGで作る時代だ(と思う)し、やっぱSVGの画像を作ってみた方がいいかね。

以前、ブログのタイトルロゴをSVCにしようとしたけど失敗した事があるが、あの時はちょっと凝ったの作ろうとして失敗したからな。単純に画像と文字を並べただけのPNGを作って、それをSVGに変換すればいいかな。

オンラインでPNGからSVGに変換できるサイトは、検索すると色々出てくるが、今回は『Vectorizer – 無料の画像ベクター変換』ってサイトで変換しました。そんなこんなで出来たサイトロゴとファビコンは、下の画像参照で。

…ああ、WordPressはSVG非対応なんで(プラグイン追加したりfunctions.phpや.htaccessをいじれば使えるらしい)、今はこのままで。

ちなみにサイトロゴとファビコンで使用した画像は、『human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)』でダウンロードしました。過去に違う名前でブログとかやってた時にも、使用した事があったり。ピクトさんは大好きだったりします。

…とまあそんな訳で、ちまちま作業を続けていこうかと。本だとサイトタイトルが左上にあって、右上はハンバーガーメニューのボタンがあったりするんだが、ハンバーガーメニューは色々と面倒臭いのでどうしようかなと思ってたり。変更するにしても、何を設置するかなぁ。

追記(17日)

ハンバーガーメニューにFont Awesomeのアイコン使うには、アカウントが必要なのがなぁ(前にもチラッとそんな事書いたけど)と思ってたんだが、本をよく見ると『Host Font Awesome Yourself』からダウンロードして使用する事もできるとか(ダウンロードはアカウント不要)。

ダウンロードするとなんか色々とダウンロードされるが、必要なのは「webfonts」ってフォルダ(とその中身)と「all.css」だけっぽい。それをサーバーにUPして、cssファイルを読み込んで使用するそうで。

ローカルホストで試したら、ちゃんと使えました。なので、サイトの右上にハンバーガーメニュー設置できそうです。よかったよかった。

ちなみにFont Awesomeのアイコンフォント一覧は、探すと複数のサイトで見る事ができました。これで本に書かれてないアイコンフォントも、使おうと思えば使えそうだなと。

追記2(22日)

本の見ながらトップページを作っていったんだが、実際作ってみると「ハンバーガーメニューじゃなくてもいいかも。」とか、「ここは画像を変えた方がよさそうだから、ロゴもピクトさんから変えようかな。」とか、変えようかなと思う所がいくつかあったり。

まあ急ぐ必要はないので、色々試しながら作っていこうかなと思います。