名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズ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: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のみで実装したかったんですが画像の方が楽でした。(笑)

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

mayu-official-site

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);
}

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

吹き出しをつくる

mayu-official-site

実は、吹き出しはツールを使って簡単に作れるんです!
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;
}

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

mayu-official-site

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

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

これももちろん最初から作ったわけじゃなくて、
以下のチュートリアルを参考にしました(*^^*)
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あるサイトじゃないのでズボラポイント多数です)

フォームを可愛くする

mayu-official-site

このフォームは「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;
}

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

mayu-official-site

お問い合わせフォームの横にヘンなスペースができたので
ボタン風の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つのことを始めると一生そればっかやってます・・・
手抜いたところも多数ですがどうでもいいとこにこだわって作ってしまいました(´・_・`)

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

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

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


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

ローディング・読み込み中の画像を簡単に作成できるツール

ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...

MORE

コピペで使える固定ソーシャルボタンBOX

WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...

MORE

WordPressをカスタマイズする前に子テーマを作っておく

子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...

MORE

無料で簡単にロゴを作れるツール「LOGASTER」が斬新!

Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...

MORE

WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方

カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...

MORE

コピペで使えるCSSデザイン枠テンプレート

どシンプルなものからちょっと凝ったものまで、 CSSでスタイリングしたデザイン枠のテンプレートです...

MORE

CORE(TCD027)でトップページの新着記事一覧にページナビをつける

先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...

MORE

商用サイトで使えるフリー素材サイトまとめ

アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...

MORE

WordPressでCSSの反映を確認しながら編集する方法

CSS編集方法についての前置き 「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から ...

MORE

MacやiPhoneのスクショはめ込み画像を作る

そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...

MORE

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

flower