株式会社シスアナコム

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

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

今度こそ最後。STINGER3のスタイルシートまとめ。

   

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

前回のひとことで、STINGER3に関する記事は終わりにすると書いたのに、本当に申し訳ありません。

いくつか不足している部分がありましたので、追加します。

そして、わかりやすいように現時点での子テーマのスタイル(style.cssとsmart.css)を全て掲載します。

サイドバーのNEW ENTRYと人気記事のフォント

先週書いた記事は、かなり読んで頂けたようです。

ありがとうございました。

正直な話、ウェブサイトの見た目はあまり重視してないので、STINGER3のカスタマイズとしては一番最後になってしまいました。

でも、一般的には見た目を重視している方が多いということですね。

そのため、人気記事ランキングに入ってきました。

すると、この記事の題名が長いため4行表示になり、サイドバーに表示している人気記事で枠からはみ出てしまいました。

さすがに格好悪い。

そこで、3行に収まるように、フォントを少しだけ小さくしました。

#side #topnews dd {
  font-size: 14px;
}

スマホ表示での不要な空白を削除

あと、スマホで表示した場合に、もう少し詰めて表示した方が見やすいかなと思いました。

そこで、不要な空白を削除するように、以下のCSSを追加。

.sumbox {
  padding-top: 0;
  padding-bottom: 0;
}

.post .entry .entry-content {
  padding: 0;
}

これで、今度こそ完了です!

以下まとめ。

スタイルシート(style.css)

@charset "UTF-8";

/*
Theme Name:  Stinger 3 Child Theme
Template:  stinger3ver20140327
*/

@import url('../stinger3ver20140327/style.css');

/* ドロップダウンメニュー */
#navi-in {
  margin: 10px auto auto;
  padding: 0;
  width: 986px;
  height: 34px;
}

#navi-in ul {
  margin: 0;
  padding: 0;
}

#navi-in li {
  float: left;
  width: 162px;
  height: 30px;
  margin: 0;
  padding: 0;
}

#navi-in li a {
  text-align: center;
  display: block;
  margin: 0;
  padding: 10px 0;
  width: 100%;
  background: royalblue;
  color: white !important;
}

#navi-in li:hover > a {
  background: darkblue;
}

#navi-in li ul li {
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

#navi-in li ul li a {
  background: darkblue;
  margin: 0;
  padding: 10px 0;
}

#navi-in li:hover ul li {
  overflow: visible;
  height: 30px;
}

/* フッターの色を変更 */
#footer {
  background: royalblue;
}

/* フッターのh3とh4リンクの文字色を変更 */
#footer #footer-in h3 a,
#footer #footer-in h4 a {
  color: white;
}

/* サイドバーのNEW ENTRYと人気記事の表示 */
#wrap #wrap-in #side #topnews div dl {
  padding: 10px;
  background: white;
  margin-bottom: 10px;
  height: 100px;
  border: 1px solid royalblue;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

#side #topnews dd {
  font-size: 14px;
}

/* サイドバー全体 */
#wrap #wrap-in #side {
  border: 1px solid royalblue;
  border-radius: 4px;
  background: rgba(255,255,255,0.5);
}

/* 全体的なフォントの設定 */
* {
  font-family: “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
}

/* トップページのタイトル下線 */
.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の設定 */
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;
}

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

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

smart.css(オリジナルコンテンツ以下)

.sitename img {
	height: auto;
	max-width: 100% !important;
}

/* フッターの色を変更 */
#footer {
  background: royalblue;
}

/* フッターのh3とh4リンクの文字色を変更 */
#footer #footer-in h3 a,
#footer #footer-in h4 a {
  color: white;
}

/* 全体的なフォントの設定 */
* {
  font-family: “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
}

/* トップページのタイトル下線 */
.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の設定 */
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;
}

.sumbox {
  padding-top: 0;
  padding-bottom: 0;
}

.post .entry .entry-content {
  padding: 0;
}

次回以降について

ワードプレスやSTINGER3に関しては、もう十分に満足しました。

次回以降のひとことでは、過去の反省に基づいて、別の事をやっていくつもり。

本サイトとは別にドメインを取得してウェブサイトを作る予定にしています。

弊社で契約しているさくらのレンタルサーバ スタンダードだと、1契約でマルチドメイン機能を使って20個までウェブサイトを構築可能。

追加費用もそんなにかかりませんし、少しずつ進めていくつもりです。

何のサイトを作るかについては、次回以降に。

過去の反省です。

では。

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

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


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

Message

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