名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、
ちょっとお手すきになったのでリニューアルでもしてみようかと思い立ちました。

ちなみに本物の名刺はこんなんです。(自サイト素材を使用w)
裏面にそのサイトのURLを書いています。

vi
vi2

リニューアル前はこんな感じでした

私としたことがリニューアル前のキャプチャを撮り忘れてしまいました。

そんなわけで、イメージだけなんですけど
元々使用していたテーマが以下の「Minimatica」です。

Minimatica

ちなみにWordPress公式テーマなので管理画面からダウンロードできます~。

意外とこれカスタマイズしました!m(_ _)m

サムネイルが大きく表示されてますが、これは投稿ページです。
でも自己紹介サイトなのでブログは書かないしってことで
投稿ページを無理やり固定ページとして使いました(笑)

で、ウィジェットとかも消しちゃって、2カラムから1カラムに変更して
記事の抜粋も見えないようにして・・・って感じで
それはまぁそれなりになったんですが!

何というか、この時はあんまりスクロールしなくても
パッと見やすいサイトがいいなーと思って1ページに書く内容も簡潔にして
シンプルな感じに作ってたんですけど、
最近は逆にランディングページばりの縦長タイプにしたくなってきまして(笑)

そんな経緯でリニューアルを試みてみたのでした。

次のテーマはどシンプルなものを!

もう充実した機能は要らないから1カラムで運用できるテーマを導入して
後は固定ページで中身を作っていこう!ということで
今回インストールしたのが「Crates」です。

crates

っていうかあれ?こういうテーマやっけ?(笑)

mayuは管理画面から検索したのでデモサイトとはまた違った
質素なデザインに見えましたがまさかグリッドデザインだったとはーーー!

いやはや、フロントページは固定ページを使うので
失礼ながらこのデザインはまったく関係なくなってしまうのです(´・ω・)

ちなみにフィルタは「1カラム レスポンシブ」のみで検索して、
その中で1番シンプルだったものを選びました!

このテーマ、ヘッダーのアイコンが特徴的で
メニューアイコンをクリックすると右側にでろんっとメニューが表示されますし、
検索アイコンをクリックすると1番上にでろんっと検索フォームが表示されます。

でも今回はその機能も封印・・・

カスタマイズ後はこんな感じに

一晩掛けてじっくりカスタマイズして、ひとまずこんな形になりました。

mayu-official-site

面影が無いです!(汗)

そこまでするならイチから作れよって声も聞こえてきそうですが、
そんなに技量も時間も根性も無いですし、やっぱりベースがある方が楽に作れます。

mayuの仕事はテーマ配布じゃなしにカスタマイズサポートなのです!

サイトのイメージは最初から何となく決まってて、
上に大きくヘッダーを表示してその中に丸型メニュー、
メニューをクリックするとスクロールで移動・・・
でも実際わざわざメニュー作るほど内容があるわけじゃない、みたいな(笑)

ただのカッコつけです。(ついてるのか?)

イメージカラーは何かもうピンクしか浮かばなかったので
ピンクで作ってみたら他の色が
まったくイメージできなくなってしまいましたって感じです(;´Д`)

やってみたこと

ちょいちょい手抜いてますが、ひと通りざっくりと作ったところで
あえて実装したポイントとかを書いてみます。

可愛い英字フォントを入れたい!

英字フォントはおなじみ「Google Fonts」から拝借しました。

タイトルと見出しに使用しているフォントは「Emilys Candy」です。
font

その他に使用しているフォントは「Poiret One」です。
font

他にも悩んだフォントがいくつかあります!

  • Fredericka the Great
  • font

  • Bad Script
  • font

  • The Girl Next Door
  • font

  • Josefin Sans
  • font

  • Life Savers
  • font

全部それぞれの良さがあって可愛いですよね~!
WEBフォントは全部見ようと思ったら
小一時間くらい潰れる勢いなので気をつけてください(笑)

丸型メニューをホバー時にくるっと回転させる

mayu-official-site

マウスを乗せると回転するアニメーション効果をCSSに書いています。

ちなみにCSSはこんな感じです。すぐできるやつです!

「#header_menu li img」にあたるセレクタ名は変更してくださいね。

今回、メニューを全部画像で作ってやりました。
ホントはCSSのみで実装したかったんですが画像の方が楽でした。(笑)

アイフレームちっくなスクロール枠を設置する

mayu-official-site

Avtivityってことで自分の活動を日付つきで一覧表示しています。

これはどんどん表示が増えていくものなので
縦幅が伸び続けるのは邪魔やなってことでアイフレームっぽくしました。

HTMLはこちら。

CSSはこちら。

背景を半透明にして、フレームに若干の影をつけています。
横幅のスクロールバーは非表示にしています。

吹き出しをつくる

mayu-official-site

実は、吹き出しはツールを使って簡単に作れるんです!
CSS ARROW PLEASE!

作ってみて気になる部分はあとから微調整しました。
以下は「角丸」「内側の余白をつくる」「吹き出しの周りの線なし」バージョンです。

素材一覧をギャラリー風に

mayu-official-site

ギャラリー風っていうかただテーブルで並べただけですが・・・(汗)

ホバー時のアニメーションがちょっとおしゃれになっています。

これももちろん最初から作ったわけじゃなくて、
以下のチュートリアルを参考にしました(*^^*)
ORIGINAL HOVER EFFECTS WITH CSS3

Exsample10のやつですね!

タイトルとか説明文は無しで、「READ MORE」の部分だけを素材の名前にしました。

HTMLはこちら。

CSSはこちら。

本当は<a>タグの要素を無条件でド真ん中に表示させたかったんですが
めんどくさそうだったのでマージンだけで適当にやってます。
(そんなにPVあるサイトじゃないのでズボラポイント多数です)

フォームを可愛くする

mayu-official-site

このフォームは「Contact Form 7」で作成しています。

Contact Form 7の項目はいたってシンプルですが、
プレスホルダーとして元から表示させる文字のみ設定しています。

で、デザインのカスタマイズはCSSを以下のように書き替えました。
プラグインのテーマじゃなく、普通にテーマのCSSを変更しています。

フォントのスタイルはWEBフォントのものです。

ソーシャルボタンをシンプルに

mayu-official-site

お問い合わせフォームの横にヘンなスペースができたので
ボタン風のFacebook、Twitter、アメブロへのリンクを貼って埋めました(笑)

HTMLはこちら。

SNSはこちら。

HTMLのアイコンはWEBフォント使ってます。
Font Awesome Icons

表示されなかったら<head>内に以下のコードを記入してください。

レスポンシブに対応させる

元々のテーマがレスポンシブに対応しているんですが、
テーブルやらフォームやらをPCベースで色々作ったので
そのままだとスマホからのレイアウトがダダ崩れ・・・

ってことで、固定ページや投稿ページで
PHPが使えるようになるプラグイン「Exec-PHP」を導入して
以下の条件分岐コードで表示する内容を変更することにしました。

あとがき!

1つのことを始めると一生そればっかやってます・・・
手抜いたところも多数ですがどうでもいいとこにこだわって作ってしまいました(´・_・
)

本当はパララックス効果とかも入れてみたかったんですが今回はもういいやってことで。

サイト作るのは好きですがデザインは苦手なのでその辺はあまり突っ込まないでくださいw

あまり詳しい解説ではないですが、
こんなんでも分かってもらえる人には何かのヒントになればいいなと思います。

  • このエントリーをはてなブックマークに追加

こんな記事も書きました!