【Seesaaブログ新デザインシステム】サイドバーのコンテンツを線で囲む(過去ログ、最近の記事、カレンダー、カテゴリ、自由形式、タグクラウド、人気記事)|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。右カラム」では、サイドバーに各コンテンツが表示されるようになっています。私自身は、サイドバーには「過去ログ」「最近の記事」「カレンダー」「カテゴリ」「自由形式」「タグクラウド」「人気記事」「ブログ内検索」等のコンテンツを表示させていますが、今回は、タイトル下のコンテンツ部分を線で囲んでみたいと思います。線で囲むことで、境界線がハッキリします。編集後のイメージサイドバーの各コンテンツを線で囲むために、新しいclassを作って対応します。同時に、現在コンテンツのタイトルに使用しているclass「module__heading」についても、少し考えてみたいと思います。ちなみに、この記事では「過去ログ」「最近の記事」「カレンダー」「カテゴリ」「自由形式」「タグクラウド」「人気記事」のコンテンツを線で囲みます。サイドバーの「検索ボックス」に関しては、ここでの編集と同じ箇所を同じように編集するわけではありませんので、次の記事<■サイドバー「ブログ内検索」の枠線を変更する>で説明したいと思います。新しいclass「side-waku」を作ってCSSに追加するサイドバーのコンテンツを線で囲むclassにどんな名前を付けようか考えましたが、「side-waku」にしようと思います。「サイドの枠」ってことで、何を指しているのかすぐにわかりますね。(もちろん、こんなclass名は嫌だという場合は好きな名前にしてください)CSS(スタイルシート)を編集します。管理画面の「スタイルシート編集」画面を開き、CSSの空いている部分に下記の記述をコピペします。CSSの一番下でいいと思います。私は「サイドバー」関連はCSSにまとめて記述しているので、そこに追加しようと思います。ここまでのカスタマイズ後ならば、CSSの645行目あたりに「サイドバー」があるのではないでしょうか。この後「module__heading」も編集する予定なので、追加するならば「module__heading」の下あたりがいいと思います。下記の「追加するコード」を「module__heading」の下にコピペします。#79828B;}●コメントアウトで見出しを付けています。●枠線はちょっと太めの「2px」にしています。背景色は薄い灰色です。●枠線内の文字色を変更しています。真っ黒ではなく、どちらかと言えば薄い紺色でしょうか。コード編集後のCSS(スタイルシート)class「module__heading」をコピーして新しくclassを作るサイドバーのタイトル部分は、class「module__heading」で設定しています。今回は、タイトル部分の下に表示されるコンテンツ部分を線で囲もうとしているので、コンテンツの上部枠線とタイトル部分の間の余白を設定しなければいけません。サイドバーのタイトル部分のスタイルを見てみたいと思います。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」の下に、下記の「追加するコード」をコピペし、記述内容を「保存」します。3px;}●class名を「module__heading2」にしました。コード編集後のCSS(スタイルシート)サイドバーのコンテンツ部分に新しいclassを記述するサイドバーのコンテンツに関するHTMLは「コンテンツHTML」画面で編集します。今回はサイドバーのコンテンツのほぼ全部を枠線で囲みたいので、囲みたいコンテンツに先ほど作ったclassを追加していきます。1つ1つ見ていきますが、基本的には、私は自分が設置しているコンテンツしか触りません。8個のコンテンツです。コンテンツHTMLの記述順に従って編集していきます。class="side-waku">」と終了タグ「</div>」です。線で囲みたい部分をこの開始タグと終了タグで挟みます。「過去ログ」を編集します。同じような編集を繰り返すことになるので、例として「過去ログ」がどういう感じになるのかを説明して、その他のコンテンツ部分は編集箇所のみを示したいと思います。-%>」から始まります。-%>」というタグを探します。class="side-waku">」を追加します。「</section>」の上に終了タグ「</div>」を追加します。現時点の「過去ログ」コンテンツ「過去ログ」のタイトルと、枠線部分との間の余白が大きいと思いませんか?この余白を少し狭くしたかったので、先ほど「module__heading2」というclassを作りました。class="module__heading2">」に変更します。「2」を追加するだけで大丈夫です。以前の記事<■見出しタグを変更する(3)h3やh4をpタグに入れ替える>で「見出しタグ」を編集したので、上記コンテンツHTML編集画面でclass「module__heading」が設定されているタグは「pタグ」になっているはずです。(デフォルトのテンプレートの場合は、「module__heading」が設定されているタグは「h3」だと思います)以下、見出し部分のタグは全部「pタグ」に変更されていることを前提に説明を進めますのでご注意ください。編集後の「過去ログ」コンテンツ実際のページではこんな感じです。タイトル部分と枠線との間の余白が狭くなりました。以下はコード部分の説明のみを淡々とやります。「最近の記事」「カレンダー」「カテゴリ」「自由形式」「タグクラウド」「人気記事」に枠線を付ける方法です。class="side-waku">」と終了タグ「</div>」で挟みます。class="module__heading2">」に変更します。「2」を追加するだけです。-%>」から始まります。class="module__heading2">」に変更します。class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。(コード記述が長いので「</div>」の追加位置に注意してください)編集後の「最近の記事」コンテンツ「コメント」「検索ボックス」その他のコンテンツコンテンツHTMLには、上記で編集した「最近の記事」のコードの下に「コメント」と「検索ボックス」、その他のコードが記述されていますが、飛ばします。私は「コメント」を設置するつもりはないので、コードの追加はしません。「コメント」を設置したとしても、編集方法は同じです。class="side-waku">」と「</div>」で挟みます。「検索ボックス」に関しては、次の記事<■サイドバー「ブログ内検索」の枠線を変更する>で説明します。他にも色々とコンテンツの記述が入っていますが、もう全部飛ばします。何のコンテンツなのか、私にもよくわかりませんね、ハイ。「カレンダー」コンテンツを線で囲むでは、自分が表示させているコンテンツ「カレンダー」を編集します。私は以前の記事<■サイドバーのコンテンツにタイトルを表示させる(カレンダー、自由形式など)>で、「カレンダー」にタイトルを表示させるように設定しました。私のブログでは「カレンダー」コンテンツにも「カレンダー」というタイトルがあります。他のコンテンツと同じように枠線を設定したいと思います。-%>」から始まります。118行目にあります。class="module__heading2">」に変更します。class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。-%>」から始まります。162行目にあります。class="module__heading2">」に変更します。class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。編集後の「カテゴリ」コンテンツ「自由形式」コンテンツを線で囲むサイドバーに「自由形式」でコンテンツを追加している場合があると思います。私は以前の記事<■サイドバーのコンテンツにタイトルを表示させる(カレンダー、自由形式など)>で「自由形式」にタイトルを表示させるように設定していました。こちらも他のコンテンツと同じように枠線を設定します。-%>」から始まります。200行目にあります。class="module__heading2">」に変更します。class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。編集後の「自由形式」コンテンツとりあえず「自由形式」を使って「記事リスト」というコンテンツを作ってみました。線で囲まれていますね。「タグクラウド」コンテンツを線で囲む上記「自由形式」のコード記述の下には色んなコードが記述されていますが(プロフィールとかトラックバックとか)私には必要ありませんので「タグクラウド」の編集に進みます。-%>」から始まります。360行目にあります。class="module__heading2">」に変更します。class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。-%>」から始まります。374行目にあります。class="module__heading2">」に変更します。class="side-waku">」を追加し、「</section>」の上に終了タグ「</div>」を追加します。編集後の「人気記事」コンテンツ上段が「人気記事」です。表示内容がなく枠だけが見えていますが、画像をキャプチャした時がこういう状態だっただけです。メインコンテンツの「heading」の下余白についてサイドバーの各コンテンツを線で囲み、コンテンツのタイトルと囲み線との間の余白を狭くしました。5px;」と記述したので、タイトルと枠線との間の余白が小さくなったわけです。トップページや記事ページのメインコンテンツ部分の「タイトル」は、サイドバーのコンテンツのタイトルと同じスタイルではないので(いわゆる記事のタイトル部分のことです)、ページを見ても何の問題もないと思います。「カテゴリページ」や「タグ一覧ページ」など、メインコンテンツ部分にページのタイトルが表示されるページの場合、サイドバーのコンテンツのタイトルと同じスタイルを設定していますから、メインとサイドのタイトル部分の下余白の大きさが異なることになって違和感があります。画像ではわかりにくいかもしれませんが、メインコンテンツとサイドバーのタイトル下の余白の大きさが違います。なんだかメインコンテンツがズレて始まっているように感じてしまうわけです。15px;」なので、ちょっとズレて始まるように見えるわけです。気にしないのであればそのままでも大丈夫ですが、私自身は気になりますので、編集しておきます。5px;」に変更すればいいです。次の記事の紹介この記事では、サイドバーの「過去ログ」「最近の記事」「カレンダー」「カテゴリ」「自由形式」「タグクラウド」「人気記事」の各コンテンツを線で囲みました。今回は編集しなかった「検索ボックス」については、次の記事で編集したいと思います。■【Seesaaブログ新デザインシステム】サイドバー「ブログ内検索」の枠線を変更する他のコンテンツと同じように、「検索ボックス(ブログ内検索)」にも同じ処理をすればちゃんと枠線が付きますが、ちょっと見た目がおかしくなってしまいます。画像の通り、二重の線で囲まれてしまうのです。[必須入力]※画像の中の文字を半角で入力してください。