2016年04月05日

ブログタイトルと記事タイトルの文字サイズ調整

スポンサーリンク

以前、 さくらブログの記事内の文字サイズ変更しました。

さくらブログのフォント変更方法は、こちら >>

記事の文字の大きさを変更したので、記事タイトルが小さく見えます。
記事のタイトルを大きく変更したいと思います。

この記事は、さくらブログの超シンプル(右サイドバー)を使用している場合の解説となります。
さくらブログは、基本的にどのデザインも同じように改造出来るはずですが、デザインによって若干コードや場所が違います。
元のコードを全部コピーして、メモ帳などのテキストエディタに貼り付けて保存しておきましょう。
バックアップを取っておけば、改造に失敗しても戻す事が出来ます。

さくらブログの【デザイン】→【デザイン設定】→適応されているタイトルデザインをクリックします。
CSSが表示されたら、一番下までスクロールして、下記を追加してください。

/* ▼-----記事タイトルの大きさと色変更-----▼ */
.title{
font-size: 22px; /* 文字の大きさ */
}
.title a {
color: #000; /* 文字の色 */
text-decoration: none; /* アンダーライン無し */
}
.title a:hover{
color:#949494; /* カーソルが乗った時の色 */
text-decoration: underline; /* アンダーラインあり */
}
/* ▲-----記事タイトルの大きさと色変更、ここまで-----▲ */

.titleで、記事タイトルの文字を、14pxから22pxに変更。
.title aで、記事タイトルの色指定とアンダーライン消し
(リンクのアンダーラインを全て消している場合、ここでのアンダーラインなしは必要ありませんが、あっても不具合は無いので、一応記載しておきます。)
.title a:hoverで、記事タイトルにカーソルが乗った時の色を変更して、アンダーラインを付けています。

※このCSSは、必ずリンク色の変更CSSの下に書いてください。
下に記載しないとリンク色設定が優先され、記事タイトルが青くなってしまいます。

ブログタイトルの文字サイズ変更

記事タイトルの文字サイズを大きくしたら、今度はブログタイトルが小さく見えます。
ブログタイトルを少し大きくして、センターに移動します。
ブログ説明文も中央になるよう調整します。
/* ▼-----ブログタイトルの大きさと位置変更-----▼ */
#banner h1 {
margin: 0;
padding-top: 35px;/* タイトル上の隙間 */
padding-bottom: 10px;/* タイトル下の隙間 */
text-align:center;/* タイトルをセンターに配置 */
}
#banner h1 a {
font-size: 30px;/* タイトルの文字サイズ */
color:#000;/* タイトルの色 */
background-color: #fff;/* タイトルの背景色 */
}
#banner h1 a:hover {
color: #949494;/* タイトルにカーソルが乗った時の色 */
}
#banner .description{
color:#6E6E6E;/*ブログ説明文の文字色 */
font-weight:normal;/*ブログ説明文の文字太さ */
}
/* ▲-----ブログタイトルの大きさ変更、ここまで-----▲ */

下の方にある「#banner .description」は、ブログ説明文です。
ブログ説明文は、さくらブログ管理画面の左上【メニュー一覧】内の「ブログ設定」で、記入されている文字です。
メニューから指定するものだからか、ここは他と違い、何故かセンター寄せが効きません。

原因調査をしましたが、私には解りませんでした。

そこで、手っ取り早く、中央寄せにしちゃいます。
さくらブログの管理画面で、【デザイン】→【コンテンツ】→ヘッダー部分下段にある【ブログ説明】というブログパーツをクリックします。

【ブログ説明】ウインドーが、開きます。
一番上の本文を書くテキストエリアに「好きなブログ説明文」を書きます。

これにより、ブログを作った時に入れたブログ説明分がキャンセルされ、こちらが優先されるようになります。
ブログ設定の文字と違っていても構いません。

テキストエリアの上に便利ボタン群がありますので【中央揃え】ボタンで、記入したブログ説明文を中央にします。
【保存】を押してセーブして【ブログ説明】ウインドーを閉じます。
そして、コンテンツの【保存】も忘れず押してください。
これで、ブログ説明文が、画面中央に配置されます。

これで、何とかバランスが整いました。

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

メールアドレス:

ホームページアドレス:

コメント: