365LogoProject 第5弾

365LogoProjectの5日目!

第5弾


aiデータ

モチーフは笑顔。
やや低年齢向け。
温かみを目指したけど、うーん、色味は課題。

サーバーをmixhostにしました。

去年からkagoyaマネージドを借りてたのですが、どうも扱いづらい。
色々と自分なりに探した結果、wpXがよさそうだということに。
それでも他のサーバーがないかと探し検討した結果、mixhostという新進気鋭のサーバーを見つける。
mixhost

3月の終わり頃に無料お試しを申し込み、4月5日にはもう契約してました。お試し期間中の機能制限について
mixhostの魅力はなんといってもお手軽さ。
最安値プランで月額480円、スタンダードでも月980円から。
SSDなのでXサーバー等のHDDクラスに比べると容量は少ないが、そんなに容量必要とするサイト運営はしてないので問題ない。
最初は移行の設定に迷ったが、慣れてしまえばXサーバーやkagoyaよりも楽なシステムだった。

移行の手順はここでは割愛。
他所のブログさんでもたくさん書かれてるし。(個人的に聞きたい方は問い合わせください)
mixhost公式のサーバー移行ヘルプ

また無料でsslに対応しているのも魅力の一つ。別で取ると高いのよこれ。。。
余分な記述を.htaccessに書く必要もないし、ボタン一つで最新のwpをインストール出来る。
初心者だと難しい部分もあるかもしれないけど、よそからの移行を考えてる人にはとても魅力的なサーバーだと思う。
ただこれから人気が出てきて重くて仕方が無くなる……ことがないといいけれど。

365LogoProject 第4弾

365LogoProjectの4日目!

第4弾


aiデータ

モチーフはハート。丸みをだいじに。
色はピンクのみ。
丸みを出すためにメッシュツールをちょこちょこっと使って陰影を表現してます。

365LogoProject 第3弾

365LogoProjectの3日目!

第3弾


aiデータ

色はパステルで合わせて。
この期に及んでロゴを作りましたw
サーバー移転作業にてんてこで、結局今日もサイト立ち上げできず…。
専用サイト早く作らないとなぁ。

365LogoProject 第2弾

365LogoProjectの二日目!

第2弾

0402
aiデータ

カラーコードは#83823D 和名でうぐいす色。
モチーフはうぐいす。
写真をトレースしたロゴです。

365LogoProject 第一弾

2017年4月1日より、ロゴを1年間毎日作ろうと決めました。
Webデザイン自体は作る機会は多いですが、
デザインそのものをアーティスティックに作ることはあまりなく、自分の腕をあげるために始めた企画です。

365LogoProjectにあたっての条件は以下の通り

365LogoProject概要

・制作環境は何でも構わない
・毎日1個作る
・製作時間は1時間
・作ったロゴは無料配布
・毎月テーマを決める
・テーマ内であれば特に縛りはない

というもの。
今回、私は不慣れなIllustratorを使用していきます。

4月のテーマは「丸」です。
というわけでさっそく作ってみました。

第一弾

0401
aiデータ

#000と#fff90dの組み合わせで丸の中の月を表現したく。
作っているうちに円を重ねてみたらどうだろうと思い、最初の案の段階では大雑把な幅の円が複数重なっていました。
結果できたものは、円を1pxずつ小さくし、黒→黄色→黒→黄色の順で重ねています。
黒い部分は#000 #888 #777と段階的に白に近づけています。
ロゴそのものに意味はないので、そこはこれからの課題。2pxずつでもよかったかもしれない。

友への手紙。

振り返って10年

色々と整理してたら、この業界に入ったきっかけをふと思い出すメールを見つけた。
ツールを触ったことがある、趣味でサイトを作ったことがある、そんな程度の知識で飛び込んだWeb業界。
思えばあれから10年も経っている。
続きを読む

チェックボックス CSSでのみ装飾 サンプル2

HTML

<div class="wrapper">
  <label class="checker">
    <input type="checkbox" name="something" value="true">
    <span class="check"></span>
    <span class="text">未チェック</span>
  </label>
</div>

CSS

/*-------------------------------------------------
チェックボックス
----------------------------------------------- */
/* チェックボックス周辺の見た目調整 */
.checker .check { display: inline-block; vertical-align: middle; }
.checker .text { display: inline-block; vertical-align: middle; max-width 80px; }
.checker input {
  display: none;
}
.checker .check {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.checker .check::before {
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  content: "";
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
}
.checker input:checked + .check::after {
  display: block;
  position: absolute;
  top: 5px;
  left: 3px;
  width: 16px;
  height: 8px;
  border-left: 3px solid #090;
  border-bottom: 3px solid #090;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  content: "";
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.checker input:disabled + .check:before {
  background-color: #eee;
}
.checker input:checked:disabled + .check::after {
  border-left: 3px solid #aaa;
  border-bottom: 3px solid #aaa;
}

チェックボックス CSSでのみ装飾 サンプル

HTML

<form>
<label>
    <input type="checkbox" name="" value="0" class="checkbox">
    <span class="checkbox-icon"></span>
    チェックボックス
</label>
</form>

CSS

/*-------------------------------------------------
チェックボックス
----------------------------------------------- */
label input[type="checkbox"]{
  display: none;
}
label{
  cursor: pointer;
  color: #333333;
  font-weight: normal;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  margin-right: 20px;
}
label .checkbox-icon:before{
  content:'';
  border: 1px solid #ddd;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 3px;
  -webkit-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
  background: #ffffff;
}
label input[type="checkbox"]:checked + .checkbox-icon:before{
  opacity: 0;
  background: #eee;
  border-color: #eee;
  transform:scale(2);
}
label .checkbox-icon:after{
  content:'';
  opacity: 0;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  transform:rotate(-200deg);
  -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
label input[type="checkbox"]:checked + .checkbox-icon:after{
  opacity: 1;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #e93653;
  border-bottom: 2px solid #e93653;
  transform:rotate(40deg);
}