コンテンツ「カテゴリ」、「最近の記事」をサイドナビに【後編】

 『コンテンツ「カテゴリ」、「最近の記事」をサイドナビに【前編】』のつづき。
【前編】で1と2、【後編】で3を掲載します。
  1. コンテンツHTML編集
  2. 保存⇒再構築で確定する
  3. スタイルシートを設定する

3.スタイルシートを設定する

 『コンテンツ「カテゴリ」、「最近の記事」をサイドナビに【前編】』で変更したセレクタ「.miginvtitle3」と「.miginavi3」の内容(宣言)は以下の通りです。

 スタイルシート編集ページは 「デザイン」 → 「デザイン一覧」 → 「使用しているテンプレートのタイトル」をクリック で開きます。

 このスタイルシート編集欄の一番下辺り書き加えます。

書き加えたセレクタの内容

/*--カテゴリ・新着をサイドナビ--*/  ←何処に書いたか整理するための記載

.miginvtitle3{  ←「サイドナビ」のタイトルに設定したセレクタ
color:#009900; ←文字色:暗めの緑
background-color:#b9ffcf; ←背景色:薄い緑
border-bottom:1px solid #009900;  ←枠線下側:1px、実線、暗めの緑
font-weight:bold; ←文字の太さ:太い
font-size:12px;
display:block; ←ブロックレベル要素として表示
line-height:2em; ←行の高さ:2文字分
text-align:center; ←文字の配置(横方向):中央寄せ
margin:14px 5px 4px 0px; ←枠外余白:上14px、右5px、下4px、左0px
}

.miginavi3 a{
color:#ffffff; ←文字色:白
line-height:1.6em; ←行の高さ:1.6文字分
margin:0px 5px 0px 0px; ←枠外余白:上0px、右5px、下0px、左0px
padding-left:10px; ←枠内余白-左側:10px
display:block; ←ブロックレベル要素として表示
font-size:12px;
background-color:#33cc66; ←背景色:ややくすんだ緑
text-align:left; ←文字の配置(横方向):左寄せ
border-top:1px solid #f5f5f5; ←枠線上側:1px、実線、ほぼ白
border-bottom:1px solid #000000; ←枠線下側:1px、実線、黒
border-right:1px solid #000000; ←枠線右側:1px、実線、黒
text-decoration:none; ←文字装飾:なし
}

.miginavi3 a:hover{
color:#666666; ←文字色:グレー
background-color:#8eeaaa; ←背景色:くすんだ明るめの緑
}


.miginavi3 a{ }は、.miginavi3の範囲内にある<a>〜</a>の範囲にスタイルを適用させるという意味です。

.miginavi3 a:hover{ }は、.miginavi3の範囲内にある<a>〜</a>の範囲で、オンマウスオーバーの状態の時ににスタイルを適用させるという意味です。

コンテンツ「カテゴリ」をサイドナビにする場合、

 サイドナビにあるカテゴリのリンクをクリックして飛ぶページは、そのカテゴリ内で最も日付が新しいページか、最も日付が古いページになると思います。

 リンク先を日付が最も古いページになるように設定して、そのページをカテゴリ内のインデックスページにすると、よりホームページっぽくなるのではないかと思います。

■リンク先をカテゴリ内の日付が最も古いページにする方法

 「設定」→「ブログ設定」のページを開き、設定項目の一番下にある「カテゴリページ」の項目を【「記事日時の昇順」でソート】にして、「ブログ設定の変更」ボタンを押すことでリンク先を変更します。


■記事の日付を変更する方法

→「記事を整理する 《並べ替え》

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。