コピペで出来る！Ameba Owndの「BILL」を使用したCSSカスタマイズ方法

Ameba Owndのテーマ「BILL」を使用したCSSカスタマイズの方法を紹介
- なんで「BILL」？
- CSSカスタマイズの仕方
コピペで簡単に出来るCSSカスタマイズ
おわり

Ameba Owndのテーマ「BILL」を使用したCSSカスタマイズの方法を紹介

今回は、誰でも簡単にオシャレなホームページを作れるサービス「Ameba Ownd」で、CSSカスタマイズをしてみたいと思います。

CSSを使ってほんの少しだけ自分好みにホームページのデザインを変えてみませんか？

難しく感じるかもしれませんが、コードをコピペするだけで簡単にデザインを変えることができますよ。

デモページ

なんで「BILL」？

今回使用したのは「BILL」というシンプルなテーマです。

カバー画像とロゴ画像が置ける
スマホで見た時、ハンバーガーメニューの動きがかっこいい
シンプルでカスタマイズがしやすそう
1カラムでスッキリさせたい

などの理由から選ばせていただきました！

今回のCSSはこのテーマを前提とした仕様になっております。

CSSカスタマイズの仕方

ログイン後、左側にあるメニューの「カスタマイズ」をクリックすると「CSSカスタマイズ」が出てきます。

CSSカスタマイズのページに飛んだら、左のサイドバーにCSSを記入していきます。
「全体」と「スマートフォン」の2つ枠がありますが、基本的に「全体」の方を使用します。

コピペで簡単に出来るCSSカスタマイズ

それでは早速サイトデザインを変えていきましょうー！

ページの1番上にラインを引く

まずはデザインのちょっとしたポイントとしてページの1番上にラインを引いてみましょう。

header {
  border-top: 6px solid #111 !important;
}

ボタンの角を丸くする

固い印象のボタンを角丸にして柔らかい雰囲気に変更します。

.btn__item {
  border-radius: 25px;
}

ボタンにオンマウスした時ふわっと背景色を変える

ボタンにカーソルを当てた時、ふわっと背景の色が変わる動きをつけます。

スマホではカーソルを当てた時の処理が必要ないので、メディアクエリで囲んで480px以下のデバイスには適用しないようにしています。

@media screen and (min-width: 480px) {
  .btn__item {
    display: block;
    margin: 1em auto;
    position: relative;
    text-transform: uppercase;
    overflow: hidden;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
  }
  .btn__item::after {
    content: '';
    position: absolute;
    z-index: -1;
    height: 100%;
    left: -35%;
    top: 0;
    transform: skew(50deg);
    transition-duration: 0.6s;
    transform-origin: top left;
    width: 0;
  }
  .btn__item:hover {
    color: #fff;
    background-color: #111;
  }
  .btn__item:hover:after {
    height: 100%;
    width: 135%;
  }
}

ナビゲーションにオンマウスした時ふわっと下線をつける

ナビケーションにカーソルを当てた時、ふわっと下線が引かれる動きをつけます。

ボタンの動きと同じくメディアクエリを使用するので、既に@media screen and (min-width: 480px) {}があればこの部分は必要ありません。

@media screen and (min-width: 480px) {
  .global-nav__item>a {
    line-height: 30px;
  }
  .global-nav__item>a::after {
    border-bottom: solid 2px #111;
    bottom: 0;
    content: "";
    display: block;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    width: 0;
  }
  .global-nav__item>a:hover::after {
    width: 100%;
  }
  .global-nav__item--active>a,
  .pc .global-nav__item:hover>a {
    opacity:1;
  }
}

見出し・小見出しのデザインを変更する

もう少し見やすくするために、大見出しと小見出しのデザインを変更します。

.u-base-bg-clr {
  background-color: initial;
}
.heading-lv1 h1,
.home .heading-lv2 h2 {
  background:none;
  color:#111;
  font-size: 40px;
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
.heading-lv1 h1:after,
.home .heading-lv2 h2:after {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 3px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #111;
  border: none;
}
.heading-lv2 h2:after {
  content:initial;
}
.heading-lv2 h2 {
  background: #111;
  color: #fff;
  text-align: left;
  display: block;
  padding: 3px 10px;
  border-radius: 4px;
}

リンクの色を変更する

テキスト中にあるリンクの色を変えることができます。
「color: #3c96dc;」の部分にお好みの色を16進数で指定しましょう。

.u-lnk-clr,
.u-clr-area a,
.u-lnk-clr:visited,
.u-clr-area a:visited {
  color: #3c96dc;
}

リスト形式の記事一覧に矢印をつける

タイトルの右側に矢印をつけてリンクをわかりやすくします。

.blog-list__item .blog-item__text a{
  display:block;
}
.blog-list__item .blog-item__text {
  display: block;
  position: relative;
  padding-right:2em;
}

.blog-list__item .blog-item__text:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 0;
  border-top: solid 2px #888;
  border-right: solid 2px #888;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}