読者です 読者をやめる 読者になる 読者になる

君とアニメと人生と

アニメ・人生・仕事の三本柱でお送りします

ゆきひーさん制作のブログテーマ「Naked」に+αで施した5つのカスタマイズ

ブログ ブログ-運営

はてなブログユーザーの方なら恐らくご存知、あのゆきひーさん(id:ftmaccho)が待望のオリジナルブログテーマを公開されました。

私も早速インストールさせていただき、ほんの少しだけ自分でも+αでカスタマイズを施したので、今回はそのまとめ記事です。私自身も全くの素人なので、内容は初心者向けです。

ゆきひーさん!素敵なブログテーマをありがとうございます!!

※注意書き
正常に作動することは確認していますが、Webデザインの素人が行っているため、余分なコードなども入っている可能性があります。予めご了承ください。

目次のカスタマイズ

目次内の文字を大きく

デフォルトの設定だと、目次内の文字は大分小さめに設定されています。ただ、私はレスポンシブ対応で使っているのでスマホで見てみたのですが、文字が小さくて上下の項目と被ってしまい、リンクが押しづらいなと感じました。そこでこちらのコードです。


/*目次*/
ul.table-of-contents {
    font-size: 110%;
}
ul.table-of-contents ul{
    font-size: 105%;
}

「デザインCSS」の所に上のコードを入れれば、目次内の文字を大きめにできます。(↑にあるこの記事の目次がこのサイズと同じです)

トグルメニューのカスタマイズ

トグルメニューの項目を二つ折りに

デフォルトでは、レスポンシブ設定時のスマホ・タブレットでのメニューが、縦に一列に並ぶようになっています。私はメニューにたくさん項目を入れているので、縦長になりすぎてしまいました。そこでこちらのコードです。


/*メニューバー*/
@media screen and (max-width:768px) {
  #n-menu .menu-content li {
  float: left;
  width: 50%;
  }
}

これでメニューが二つ折りに出来ました。

ちなみに、素人の私でも出来たのは、同じくゆきひーさんのこちらの記事を参考にしたためです。

トグルメニューを画面上部に固定

併せて、トグルメニューを画面上部に固定しました。デフォルトでは、ブログタイトルの下に固定しているのでスクロールすると画面上からいなくなってしまいます。下までスクロールするとトグルメニューまで戻ってきてもらえない可能性が高いので、私は画面上部に固定することにしました。こちらがそのコードです。上のメディアクエリと範囲が同じなので、くっ付けても問題ありません。


@media screen and (max-width:768px) {
    #n-menu {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10;
    }
    #blog-title{
        margin-top: 30px;
    }
}

そして例のごとく、このカスタマイズもゆきひーさんの過去記事を参考にさせていただきました。本当に感謝感謝です。

「続きを読む」ボタンのカスタマイズ

「続きを読む」ボタンの幅を広げる

デフォルトでは、TOPページに表示される新着記事にある「続きを読む」ボタンが小さめに設定されています。スマホだと押しづらい感じがしたので、幅を大きく広げました。こちらがそのコードです。


/*続きを読むボタン*/
a.entry-see-more {
  display: block;
  width: 85%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  background-color: #333;
  color: #fff;
  border-radius: 10px;
  margin: 0 auto;
}
.entry-see-more:hover {
  background-color: #545252;
  border-color: #545252;
  color: #fff;
}

ほぼ画面いっぱいに広がって押しやすくなりました。

ヨメレバ・カエレバのカスタマイズ

ヨメレバ・カエレバに「honto」「7net」を加えてバランスを整える

「Naked」にはデフォルトでいくつかのブログパーツのデザインが組み込まれています。そのうちのひとつがヨメレバ・カエレバです。私も以前から使わせていただいているのですが、今回のデフォルトにはAmazon・楽天・Yahoo!ショッピング・価格ドットコムのデザインしか対応していません。

私は以前から「honto」と「7net」も入れているので(売れたことないですが)、わざわざ消すのも面倒くさく、そのままデザインで調整することにしました。そこでこちらのコードです。


/*--------------------------------------
  ヨメレバ・カエレバ
--------------------------------------*/
.booklink-link2 a,
.kaerebalink-link1 a {
    width: 48%;
}
.shoplinkbk1 a{
border: 1px solid #007EBF !important;
color: #007EBF !important;
} .shoplinkseven a{ border: 1px solid #FF5F17 !important; color: #FF5F17 !important; }

すると、こんな感じのデザインになります。

ひとつひとつのボタンの幅は、スマホ表示でも「Yahoo!ショッピング」が枠からはみ出さないように、「48%」にしておきました。

※ちなみに、hontoとKindleは色が被るので、私はKindleを黄緑に変更しました。この辺りはお好みで。

まとめ

他にも細かいところをいくつか+αで加えましたが、基本のデザインがとってもおしゃれで使いやすいので、とってもおすすめです。今回私が施したカスタマイズもぜひ試してみてくださいね。

© 2014-2016 君とアニメと人生と