cup-2884023_1280

カスタマイズ

名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズ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

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

関連記事

  1. laptop-2838921_1280

    カスタマイズ

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

    CSS編集方法についての前置き「管理画面」→「外観」→「テーマ編集…

  2. home-office-569153_1280

    カスタマイズ

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

    WordPressでスクロール時も固定表示されるソーシャルボタンを…

  3. season-1985856_1280

    カスタマイズ

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

    子テーマについての前置きWordPressはほとんどの方が既存のテ…

  4. architecture-1868502_1280

    カスタマイズ

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

    先日導入したCORE(TCD027)テーマについてのカスタマイズ記事で…

  5. laptop-computer-1245981_1280

    カスタマイズ

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

    どシンプルなものからちょっと凝ったものまで、CSSでスタイリングし…

  6. computer-1185626_1280

    カスタマイズ

    CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた

    アメブロからWordPressへと個人ブログを移すにあたって「どんなデ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

WPテーマ

WordPressテーマ「BlogPress (TCD010)」
  1. laptop-2234342_1280

    テーマ

    日本語有料テーマの頂点!TCDテーマまとめのまとめ
  2. leave-2902471_1280

    WordPress基礎講座

    ダッシュボードと管理メニューの使い方
  3. coffee-1284041_1280

    トラブル

    WordPressでトップページ以外が表示されなくなった時の対処法
  4. bench-1289528_1280

    WordPress応用講座

    フロントページを固定ページに設定しつつ、最新の投稿ページも使いたい!
  5. desk-2715557_1280

    WordPress応用講座

    WEBサイト作成に役立つツールまとめ
PAGE TOP