Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】サイドバーのコンテンツを線で囲む(…

【Seesaaブログ新デザインシステム】サイドバーのコンテンツを線で囲む(過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事)

Seesaaブログのサイドバーのコンテンツを線で囲む
■Seesaaブログのサイドバーのコンテンツを編集
■「過去ログ」「最近の記事」「カレンダー」「カテゴリ」「自由形式」「タグクラウド」「人気記事」のコンテンツを線で囲む
■新しく作ったclass「side-waku」「module__heading2」の設定  

Seesaaブログ新デザインシステムのテンプレート「シンプルA. ホワイト 右カラム」では、サイドバーに各コンテンツが表示されるようになっています。


私自身は、サイドバーには「過去ログ」「最近の記事」「カレンダー」「カテゴリ」「自由形式」「タグクラウド」「人気記事」「ブログ内検索」等のコンテンツを表示させていますが、今回は、タイトル下のコンテンツ部分を線で囲んでみたいと思います。線で囲むことで、境界線がハッキリします。


編集後のイメージ
編集後のサイドバー


サイドバーの各コンテンツを線で囲むために、新しいclassを作って対応します。
同時に、現在コンテンツのタイトルに使用しているclass「module__heading」についても、少し考えてみたいと思います。



ちなみに、この記事では「過去ログ」「最近の記事」「カレンダー」「カテゴリ」「自由形式」「タグクラウド」「人気記事」のコンテンツを線で囲みます。
サイドバーの「検索ボックス」に関しては、ここでの編集と同じ箇所を同じように編集するわけではありませんので、次の記事<■サイドバー「ブログ内検索」の枠線を変更する>で説明したいと思います。





新しいclass「side-waku」を作ってCSSに追加する


サイドバーのコンテンツを線で囲むclassにどんな名前を付けようか考えましたが、「side-waku」にしようと思います。「サイドの枠」ってことで、何を指しているのかすぐにわかりますね。(もちろん、こんなclass名は嫌だという場合は好きな名前にしてください)



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面を開き、CSSの空いている部分に下記の記述をコピペします。CSSの一番下でいいと思います。


私は「サイドバー」関連はCSSにまとめて記述しているので、そこに追加しようと思います。
ここまでのカスタマイズ後ならば、CSSの645行目あたりに「サイドバー」があるのではないでしょうか。


コードを追加する位置


この後「module__heading」も編集する予定なので、追加するならば「module__heading」の下あたりがいいと思います。
下記の「追加するコード」を「module__heading」の下にコピペします。(もちろん、CSSの一番下でもかまいません)


<追加するコード>
/*** サイドバー枠線 ***/
.side-waku {
border: 2px solid #A7B3BE;
background-color: #FBFBFB;
padding: 8px;
color: #79828B;
}


●コメントアウトで見出しを付けています。
●枠線はちょっと太めの「2px」にしています。背景色は薄い灰色です。
●枠線内の文字色を変更しています。真っ黒ではなく、どちらかと言えば薄い紺色でしょうか。



コード編集後のCSS(スタイルシート)


編集後のスタイルシート



class「module__heading」をコピーして新しくclassを作る


サイドバーのタイトル部分は、class「module__heading」で設定しています。
今回は、タイトル部分の下に表示されるコンテンツ部分を線で囲もうとしているので、コンテンツの上部枠線とタイトル部分の間の余白を設定しなければいけません。
ちょっと、サイドバーのタイトル部分のスタイルを見てみたいと思います。


<サイドバータイトル「.module__heading」>
/*** サイドバータイトル ***/
.module__heading {
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:center;
margin-bottom: 15px;
padding:3px 0px;
border-radius: 3px;
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px;
}


「module__heading」の中には「margin-bottom: 15px;」つまり「15px」の下余白が設定されていますが、邪魔です。
「15px」の余白を気にしないならば以下の作業をする必要はありませんが、私は気になるんですよね。ちょっと余白が大きいと思うのです。
できれば「5px」ぐらいに設定したい。
でも、このまま「module__heading」の記述を「5px」に変更してしまうと、他のパーツにも影響が出ます。



class「module__heading」はサイドバーのタイトルだけではなく、個別記事ページの下に表示される「関連する記事」などにも使われています。「module__heading」だけで直接使われていなかったとしても、classを2つ同時に設定しているような場面にも使われています。
サイドバーのコンテンツ部分だけの余白を変更したいのに、このブログの色んな場所で使われている「module__heading」を変更してしまうと全部に影響が出てしまいます。
なので、この「module__heading」をコピーして新しくclassを作ってしまいます。



面倒なことは極力避けたいので、class名は「module__heading2」にします。
「なんて単純な!」という感じですが、実際にコンテンツHTMLを編集する時には、元のclass名に「2」を追加すればいいだけなのでラクです。
元の「module__heading」との違いはただ1点、「margin-bottom」の数値だけです。
後はそっくり同じ内容にします。



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「module__heading」というclassを探します。
この「module__heading」の下に、下記の「追加するコード」をコピペし、記述内容を「保存」します。


<追加するコード>
/*** サイドバータイトル(枠線あり) ***/
.module__heading2 {
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:center;
margin-bottom: 5px;
padding:3px 0px;
border-radius: 3px;
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px;
}


●class名を「module__heading2」にしました。「module__heading」と違うのは「margin-bottom: 5px;」だけです。



コード編集後のCSS(スタイルシート)


サイドバータイトル部分のスタイルシート



サイドバーのコンテンツ部分に新しいclassを記述する


サイドバーのコンテンツに関するHTMLは「コンテンツHTML」画面で編集します。
今回はサイドバーのコンテンツのほぼ全部を枠線で囲みたいので、囲みたいコンテンツに先ほど作ったclassを追加していきます。
1つ1つ見ていきますが、基本的には、私は自分が設置しているコンテンツしか触りません。
「カレンダー」「ブログ内検索」「カテゴリ」「最近の記事」「過去ログ」「タグクラウド」「人気記事」「自由形式」の8個のコンテンツです。コンテンツHTMLの記述順に従って編集していきます。


各コンテンツ部分に追加するコードは、開始タグ「<div class="side-waku">」と終了タグ「</div>」です。線で囲みたい部分をこの開始タグと終了タグで挟みます。



まずは「過去ログ」を編集します。
同じような編集を繰り返すことになるので、例として「過去ログ」がどういう感じになるのかを説明して、その他のコンテンツ部分は編集箇所のみを示したいと思います。



「過去ログ」コンテンツを線で囲む


「過去ログ」の記述は「<% if:parts_name == 'archives' # START parts -%>」から始まります。
管理画面の「コンテンツHTML編集」画面を開き、「<% if:parts_name == 'archives' # START parts -%>」というタグを探します。1行目にあります。


コンテンツHTMLの編集箇所


4行目の「<div class="module__body">」の上に開始タグ「<div class="side-waku">」を追加します。そして「</section>」の上に終了タグ「</div>」を追加します。


編集後のコンテンツHTML


現時点の「過去ログ」コンテンツ
現時点の「過去ログ」コンテンツ


「過去ログ」のタイトルと、枠線部分との間の余白が大きいと思いませんか?
この余白を少し狭くしたかったので、先ほど「module__heading2」というclassを作りました。
タイトル部分のタグ「<p class="module__heading">」を「<p class="module__heading2">」に変更します。「2」を追加するだけで大丈夫です。


コンテンツHTMLの過去ログ部分


【注意】
以前の記事<■見出しタグを変更する(3)h3やh4をpタグに入れ替える>で「見出しタグ」を編集したので、上記コンテンツHTML編集画面でclass「module__heading」が設定されているタグは「pタグ」になっているはずです。(デフォルトのテンプレートの場合は、「module__heading」が設定されているタグは「h3」だと思います)
以下、見出し部分のタグは全部「pタグ」に変更されていることを前提に説明を進めますのでご注意ください。



編集後の「過去ログ」コンテンツ
0442.jpg

実際のページではこんな感じです。タイトル部分と枠線との間の余白が狭くなりました。



では、以下はコード部分の説明のみを淡々とやります。
「最近の記事」「カレンダー」「カテゴリ」「自由形式」「タグクラウド」「人気記事」に枠線を付ける方法です。


やり方は、まずは線で囲みたい部分を、開始タグ「<div class="side-waku">」と終了タグ「</div>」で挟みます。
そして、タイトル部分のタグ「<p class="module__heading">」を「<p class="module__heading2">」に変更します。「2」を追加するだけです。



「最近の記事」コンテンツを線で囲む


「最近の記事」の記述は「<% if:parts_name == 'recent_article' # START parts -%>」から始まります。たぶん、15行目にあります。



17行目の「<p class="module__heading">」に「2」を追加して「<p class="module__heading2">」に変更します。
「<div class="module__body">」の上に開始タグ「<div class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。(コード記述が長いので「</div>」の追加位置に注意してください)


コンテンツHTMLの変更する場所


編集後の「最近の記事」コンテンツ
編集後の「最近の記事」コンテンツ



「コメント」「検索ボックス」その他のコンテンツ


コンテンツHTMLには、上記で編集した「最近の記事」のコードの下に「コメント」と「検索ボックス」、その他のコードが記述されていますが、飛ばします。



私は「コメント」を設置するつもりはないので、コードの追加はしません。
もしも「コメント」を設置したとしても、編集方法は同じです。「2」を追加して、「<div class="side-waku">」と「</div>」で挟みます。


「検索ボックス」に関しては、次の記事<■サイドバー「ブログ内検索」の枠線を変更する>で説明します。


他にも色々とコンテンツの記述が入っていますが、もう全部飛ばします。
もはや何のコンテンツなのか、私にもよくわかりませんね、ハイ。



「カレンダー」コンテンツを線で囲む


では、自分が表示させているコンテンツ「カレンダー」を編集します。
私は以前の記事<■サイドバーのコンテンツにタイトルを表示させる(カレンダー、自由形式など)>で、「カレンダー」にタイトルを表示させるように設定しました。なので、私のブログでは「カレンダー」コンテンツにも「カレンダー」というタイトルがあります。
他のコンテンツと同じように枠線を設定したいと思います。



「カレンダー」の記述は「<% if:parts_name == 'calendar' # START parts -%>」から始まります。たぶん、118行目にあります。


120行目の「<p class="module__heading">」に「2」を追加して「<p class="module__heading2">」に変更します。
「<table>」の上に開始タグ「<div class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。(コード記述が長いので「</div>」の追加位置に注意してください)


編集後のカレンダー部分のHTML


編集後の「カレンダー」コンテンツ
編集後の「カレンダー」コンテンツ



「カテゴリ」コンテンツを線で囲む


「カテゴリ」の記述は「<% if:parts_name == 'category' # START parts -%>」から始まります。たぶん、162行目にあります。



164行目の「<p class="module__heading">」に「2」を追加して「<p class="module__heading2">」に変更します。
「<div class="module__body">」の上に開始タグ「<div class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。


編集後のカテゴリ部分のHTML


編集後の「カテゴリ」コンテンツ
編集後の「カテゴリ」コンテンツ



「自由形式」コンテンツを線で囲む


サイドバーに「自由形式」でコンテンツを追加している場合があると思います。
私は以前の記事<■サイドバーのコンテンツにタイトルを表示させる(カレンダー、自由形式など)>で「自由形式」にタイトルを表示させるように設定していました。こちらも他のコンテンツと同じように枠線を設定します。



「自由形式」の記述は「<% if:parts_name == 'free' # START parts -%>」から始まります。たぶん、200行目にあります。


202行目の「<p class="module__heading">」に「2」を追加して「<p class="module__heading2">」に変更します。
「<% parts.free_text | mark_raw -%>」の上に開始タグ「<div class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。


編集後の自由形式のHTML


編集後の「自由形式」コンテンツ
編集後の「自由形式」コンテンツ

とりあえず「自由形式」を使って「記事リスト」というコンテンツを作ってみました。
ちゃんと線で囲まれていますね。



「タグクラウド」コンテンツを線で囲む


上記「自由形式」のコード記述の下には色んなコードが記述されていますが(プロフィールとかトラックバックとか)私には必要ありませんので「タグクラウド」の編集に進みます。



「タグクラウド」の記述は「<% if:parts_name == 'tag_cloud' # START parts -%>」から始まります。たぶん、360行目にあります。


362行目の「<p class="module__heading">」に「2」を追加して「<p class="module__heading2">」に変更します。
「<div class="module__body">」の上に開始タグ「<div class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。


編集後のタグクラウドのHTML


編集後の「タグクラウド」コンテンツ
編集後の「タグクラウド」コンテンツ



「人気記事」コンテンツを線で囲む


「人気記事」の記述は「<% if:parts_name == 'popular_article' # START parts -%>」から始まります。たぶん、374行目にあります。



376行目の「<p class="module__heading">」に「2」を追加して「<p class="module__heading2">」に変更します。
「<div class="module__body">」の上に開始タグ「<div class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。


編集後の人気記事のHTML


編集後の「人気記事」コンテンツ
編集後の「人気記事」コンテンツ

上段が「人気記事」です。
表示内容がなく枠だけが見えていますが、画像をキャプチャした時がこういう状態だっただけです。



メインコンテンツの「heading」の下余白について


サイドバーの各コンテンツを線で囲み、コンテンツのタイトルと囲み線との間の余白を狭くしました。
これは、新しく作ったclass「module__heading2」の設定の中で「margin-bottom: 5px;」と記述したので、タイトルと枠線との間の余白が小さくなったわけです。


トップページや記事ページのメインコンテンツ部分の「タイトル」は、サイドバーのコンテンツのタイトルと同じスタイルではないので(いわゆる記事のタイトル部分のことです)、ページを見ても何の問題もないと思います。
ただ、例えば「カテゴリページ」や「タグ一覧ページ」など、メインコンテンツ部分にページのタイトルが表示されるページの場合、サイドバーのコンテンツのタイトルと同じスタイルを設定していますから、メインとサイドのタイトル部分の下余白の大きさが異なることになって違和感があります。


現時点のタグ一覧ページ


こんな感じですね。
ちょっと画像ではわかりにくいかもしれませんが、メインコンテンツとサイドバーのタイトル下の余白の大きさが違います。なんだかメインコンテンツがズレて始まっているように感じてしまうわけです。
これは、サイドバーのタイトル部分の下余白が「5px」なのに対してメインコンテンツのタイトル部分の下余白が「margin-bottom: 15px;」なので、ちょっとズレて始まるように見えるわけです。



もちろん、気にしないのであればそのままでも大丈夫ですが、私自身は気になりますので、編集しておきます。
CSSのclass「heading」の記述のうち、「margin-bottom: 15px;」を「margin-bottom: 5px;」に変更すればいいです。
まあ、試してみてください。




次の記事の紹介

この記事では、サイドバーの「過去ログ」「最近の記事」「カレンダー」「カテゴリ」「自由形式」「タグクラウド」「人気記事」の各コンテンツを線で囲みました。
今回は編集しなかった「検索ボックス」については、次の記事で編集したいと思います。


【Seesaaブログ新デザインシステム】サイドバー「ブログ内検索」の枠線を変更する
他のコンテンツと同じように、「検索ボックス(ブログ内検索)」にも同じ処理をすればちゃんと枠線が付きますが、ちょっと見た目がおかしくなってしまいます。画像の通り、二重の線で囲まれてしまうのです。‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。