2016年04月05日

さくらブログのサイドバータイトルをおしゃれに変更

スポンサーリンク

今回は、サイドバーのカテゴリや過去の記事などのタイトルを、少しおしゃれにしようと思います。
色のついたもの、カッコいいものなど色々なデザインが可能ですが、このブログではグラデーションを使ったものにします。

この記事は、さくらブログの超シンプル(右サイドバー)を使用している場合の解説となります。
さくらブログは、基本的にどのデザインも同じように改造出来るはずですが、デザインによって若干コードや場所が違います。

さくらブログの【デザイン】→【デザイン設定】→適応チェックされているテーマタイトルを選びます。
CSSが表示されます。

下記を、CSSの一番下に追加してください。

/* ▼-----サイドバータイトルグラデ-----▼ */
.sidetitle {
font-size: 15px !important;
color: #333333 !important;
margin: 5px 0px !important;
padding: 4px 0px 2px 0px !important;
border: 1px solid #cccccc !important;
border-radius: 3px !important;
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
/* IE10 用 */
background-image: -ms-linear-gradient(top, #ffffff 0%, #cccccc 100%) !important;
/* Mozilla Firefox用 */
background-image: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%) !important;
/* Opera用 */
background-image: -o-linear-gradient(top, #ffffff 0%, #cccccc 100%) !important;
/* Webkit用 (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #cccccc))

!important;
/* Webkit用 (Chrome 11+用) */
background-image: -webkit-linear-gradient(top, #ffffff 0%, #cccccc 100%) !important;
/* W3C Markup, IE10用 */
background-image: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%) !important;
}
/* ▲-----サイドバータイトルグラデ、ここまで-----▲ */
.sidetitleというのが、サイドバーのタイトル設定です。
!importantという優先ルールを使用して、元設定を無視してこの設定が優先されるようにしています。

まぁ、深く考えずにそのままコピペしてみましょう。

プレビューをして気に入ったら【保存】してください。

見出しデザインと同じく検索すれば、色々なデザインがサンプルコード付きで見つかります。
ほとんどの場合、見出しデザインがそのまま使えますので、「ブログ 見出し」などで検索すると良いと思います。

この.sidetitleの{ }内を変えてあげれば、お好きなデザインに変更できます。


スポンサーリンク
posted by ノービス at 15:46 | Comment(0) | さくらブログ カスタマイズ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: