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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

面影が無いです！（汗）

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

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

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

ただのカッコつけです。（ついてるのか？）

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

やってみたこと

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

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

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

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

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

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

• Fredericka the Great



• Bad Script



• The Girl Next Door



• Josefin Sans



• Life Savers

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

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

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

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

/* マウスオーバーで回転するエフェクト */
#header_menu li img:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5 ease;
    -o-transition: all 0.5 ease;
    transition: all 0.5 ease;
}

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

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

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

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

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

HTMLはこちら。

<div class="frame">ここに文章</div>

CSSはこちら。

/* アイフレームっぽい枠 */
.frame {
     width: auto;
     height: 300px;
     border: 1px #ccc solid;
     overflow-x: hidden;
     padding: 20px;
     margin-bottom: 30px;
     background: rgba(255,255,255, 0.5);
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

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

吹き出しをつくる

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

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

/* 吹き出し */
.arrow_box {
     position: relative;
     background: #ffe5e8;
     padding: 10px 20px;
     margin-top: 10px;
     border-radius: 10px; 
     -moz-border-radius: 10px; 
     -webkit-border-radius: 10px; 
}
.arrow_box:after {
     right: 100%;
     top: 50%;
     border: solid transparent;
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     pointer-events: none;
     border-color: rgba(255, 229, 232, 0);
     border-right-color: #ffe5e8;
     border-width: 20px;
     margin-top: -20px;
}

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

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

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

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

Exsample10のやつですね！

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

HTMLはこちら。

<div class="view"><img src="http://web.myafi.net/wp-content/uploads/2014/01/fbnit-300x225.png" alt="ニット・編み物の壁紙" width="200" height="150" class="none size-medium wp-image-55" />
<div class="mask"><a href="http://nx.myafi.net/wall/texture_knit.html" target="_blank">Wallpaper of knit</a></div></div>

CSSはこちら。

/* マウスオーバーで拡大するエフェクト */
.view {
      width: 200px;
      height: 150px;
      overflow: hidden;
      position: relative;
      text-align: center;
      box-shadow: 0 1px 1px #eee;
      -webkit-box-shadow: 0 1px 1px #eee;
      -moz-box-shadow: 0 1px 1px #eee;
      background: url(images/f108.png);
}
.view .mask, .view .content {
      width: 200px;
      height: 150px;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
}
.view img {
      display: block;
      position: relative;
      transform: scaleY(1);
      transition: all 0.7s ease-in-out;
}
.view a {
      display: inline-block;
      text-decoration: none;
      padding: 5px;
      background: #fff;
      color: #ffccd3;
      text-transform: uppercase;
      box-shadow: 0 0 5px 5px #fff;
      opacity: 0;
      transform: scale(1);
      opacity: 1;
      margin: 60px 20px;
}
.view a:hover {
      box-shadow: 0 0 10px 10px #fff;
}
.view .mask { 
      background-color: rgba(255,255,255, 0.5); 
      transition: all 0.5s linear;
      opacity: 0;
}
.view:hover img { 
      transform: scale(10);
      opacity: 0;
}
.view:hover .mask { 
      opacity: 1;
}

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

フォームを可愛くする

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

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

<p>[text* your-name placeholder "Name"] </p>

<p>[email* your-email placeholder "E-mail"] </p>

<p>[textarea your-message placeholder "Message"] </p>

<p>[submit "SEND"]</p>

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

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

/* フォーム */
input[type="text"],input[type="email"], textarea {
     font-family: 'Poiret One', 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
     width: 90%;
     border: none;
     background: transparent;
     border-bottom: 1px solid #999;
     box-shadow: none;
     margin-bottom: 20px;
     border-radius: 0;
     font-weight: 400;
}
textarea:focus, text:focus, input[type="text"]:focus,input[type="email"]:focus {
     border-bottom: 1px solid #f0f0f0;
     box-shadow: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     border-radius: 0;
}
input[type="submit"] {
     font-family: 'Poiret One', 'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
     border: 0;
     background: #ff69b4;
     padding: 10px 20px;
     width: 90%;
     text-transform: uppercase;
     color: #fff;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -o-transition: all 0.2s ease-in-out;
     -ms-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
     cursor: default;
}
input[type="submit"]:hover {
     background: #ccc;
}

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

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

HTMLはこちら。

<ul id="sns">

<li class="fb"><a href="https://www.facebook.com/mayu.suzuri" target="_blank"><i class="fa fa-facebook"></i> Facebook</a></li>

<li class="tw"><a href="https://twitter.com/8uma" target="_blank"><i class="fa fa-twitter"></i> Twitter</a></li>

<li class="ab"><a href="http://ameblo.jp/revre" target="_blank"><i class="fa fa-pencil-square-o"></i> Ameba Blog</a></li>

</ul>

SNSはこちら。

/* SNS */
#sns li {
     width: 60%;
     text-align: center;
     margin: 0 auto;
     display: block;
     border-radius: 10px;
     margin-bottom: 15px;
}
#sns li a {
     display: block;
     color: #fff;
     font-size: 20px;
     padding: 20px 10px;
     text-decoration: none;
     -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
     border-bottom: 3px solid #aaa;
}
#sns li a:hover {
     box-shadow: 2px 2px 2px rgba(0,0,0,0.2) inset;
     -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.2) inset;
     -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2) inset;
     background: rgba(0,0,0,0.1);
}

.fb {
     background: #3b5998;
}
.tw {
     background: #55acee;
}
.ab {
     background: #4dac26;
}

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

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

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

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

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

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

<?php if(is_mobile()) { ?>
スマホで表示させる部分
<?php } else { ?>
PC・タブレットで表示させる部分
<?php } ?>

あとがき！

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

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

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

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