株式会社シスアナコム

情報システムに関することなら、どんなことでも適切に助言いたします!

この投稿は1年以上前に公開されました。
現在では状況や内容が変わっている可能性があります。
ご注意下さい。m(_ _)m

STINGER3のスタイルシート(style.css、smart.css)をカスタマイズ

      2014/06/09

シスアナコム社長の杉山です。

STINGER3のカスタマイズに関する記事はとりあえず今回で終了します。

最後は全体的な見た目を決めている、スタイルシートをカスタマイズします。

と言っても、すでに少しスタイルシートを使ってカスタマイズを行っていますので、子テーマの準備は不要。

対象ファイルはPC用の「style.css」とスマホ用の「smart.css」

この2つのファイルに、色々と設定を追加してみます。

全体的なフォントの設定

まずは全体的なフォントの設定を変更します。

STINGER3の標準設定では、Macは「osaka」フォント、Windowsは「MS Pゴシック」が使われます。

これを、もう少し見やすいフォントに変更します。

* {
  font-family: “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
}

Macは「ヒラギノ角ゴシック」、Windowsは「メイリオ」を使うようにしました。

トップページの装飾

トップページに対する装飾を行いました。

線を入れる

まずはタイトルの下に大きめの破線を入れました。

/* トップページのタイトル下線 */
.blog_info {
  border-top: 5px dotted royalblue;
}

ブログ情報(更新年月日とカテゴリ情報)の上に線を入れることで、タイトルの下に線が入っているように見えます。

あと、トップページの記事と記事の間に区切りの線を入れました。

/* トップページの記事間の線 */
.entry {
  border-bottom: 1px solid royalblue;
}

続きを見るボタンの装飾

「続きを見る」ボタンが小さくて目立たないので修正。


/* 続きを見るボタンの修正 */
.motto a {
  border: 1px solid #ccc;
  border-radius: 6px;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
  width: 97%;
}

.motto a:hover {
  background-color: royalblue;
}

枠線を付けてサイズを大きくして、マウスオンで色が変化するようにしました。

見出し2の装飾

見出し2(h2)がシンプルすぎるので、もう少し装飾してみました。

/* 見出し2の設定 */
h2 {
  margin: 20px -20px 20px -20px;
  padding: 5px 0 0 10px;
  border-color: royalblue;
  border-width: 1px 1px 1px 5px;
  border-style: solid;
  background: white;
  background: -webkit-linear-gradient(white 0%,lightblue 100%);
  background: linear-gradient(white 0%,lightblue 100%);
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

マージンと内側の余白を調整して、枠とグラデーションと影を付けました。

表の罫線を消去

記事内に表(テーブル)を入れると、上と右に線が入ります。

必要ないので消去します。

/* 記事内の表の罫線を消去 */
#main .post table {
  border: none;
}

余白を調整

不要と思われる余白を消します。

記事内のリストの上部余白。

.post ul {
  padding-top: 0;
}

サイドバーのNEW ENTRYと人気記事の部分。

.menu_underh2 {
  margin-bottom:0;
  padding-bottom:0;
}

画面上部ヘッダーのサイト説明とメニューの間。

#container #header #header-in #h-l {
  padding-bottom: 0px;
}

全体的なフォントを変更したため、画面上部のメニューの高さが変化してしまい、余白がなくなって引っ付いてしまうので、余白を作るために高さ指定を追加します。

#navi-in {
  margin: 10px auto auto;
  padding: 0;
  width: 986px;
  height: 34px;
}

カスタマイズ完了!

これで弊社ウェブサイトのSTINGER3のカスタマイズは完成しました。

しばらくの間は、このデザインで使いたいと思います。

将来的に変更した場合は追加の記事を書くつもりです。

→2014年6月8日:追加記事はこちら

次回からのひとことは何にしようか検討中です。

 

 - ひとこと, ひとこと(ワードプレス)

↓ブログランキングに参加しています!


ネット・PC(全般) ブログランキングへ
にほんブログ村 IT技術ブログ ITコンサルティングへ
にほんブログ村

Message

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