ブログカスタマイズの雑談BLOG

Seesaaブログをカスタマイズするにあたり、Seesaaブログのテンプレートに最初から設定されていたclassだけでは思うようにスタイルの指定ができませんでした。
そもそも最初に「ブログの記事部分を線で囲もう」と思ってしまったことが間違いで、そこから独自で作ったclassがどんどん増えていき、もはや私自身もよくわかっていません。（オイｗ）



なので、Seesaaブログのデフォルトのテンプレート「シンプルA. ホワイト 右カラム」には記述されていないclass（私が勝手に作ったclass）をまとめておこうと思います。私自身が迷わないように、ということなのでほとんど私のための備忘録ですね、ハイ。



とりあえず主要なclassを書き出しておきます。
class名（リンク部分）をクリックすると、このページの該当部分にジャンプします。

article_kobetu

「article_kobetu 」は「点線で囲む」という指示を出すclassです。
記事を線で囲むので「article_kobetu（個別）」と名付けました。


個別記事ページの記事を囲んだり、カテゴリページやタグ一覧ページの上部に表示させている記事リストを囲んでいます。

article_kobetu2

「article_kobetu」と同じく、点線で囲むという指示を出すclassです。
class名に「2」を追加しただけですね。


「article_kobetu」の設定を基本として、行間を持たせるために「line-height: 2.3em;」を追加しています。「article_kobetu2 a」の記述でリンク設定時のフォントサイズを「105%」にしました。
カテゴリページやタグ一覧ページの上部に表示させている記事リストを点線で囲む時に使用しています。（「article_kobetu」のままだとちょっと行間が狭くて、くっ付きすぎている印象だったので）

subheading

「subheading」は上部に100pxの余白を入れるclassです。
「heading」の「sub（サブ）」というネーミングです。


同一ページ上に「タイトル」が複数ある場合に、上のコンテンツとの余白を取るために下のタイトル部分に設定しています。（意味、わかるでしょうか？ｗ）
記事ページの関連記事タイトルや、タグ一覧ページのタグクラウド、カテゴリページ等の記事リストに使用しています。
適用した部分の上に余白を入れるためだけに作ったclassなので、記述内容は簡単なものです。

「midasi1」「midasi2」

「midasi1」「midasi2」は、記事を作成する時に「見出し用」として使用するclassです。
大タイトルや小タイトルを付ける場合に使えばいいと思います。
Seesaaブログのパソコン用テンプレートで「h3」や「h4」を使えるようにするために、デフォルトのテンプレートの「見出しタグ」を入れ替えた時に新しく作りました。
このclassを使えば、記事内で「h3」や「h4」を使って好きなように見出しを付けることができます。




記事の作成画面でこのように書いて使用します。
私が勝手に作った見出し用のclassなので、CSSの記述内容は下記の記事でご確認ください。

no-image2

個別記事ページ下部の関連記事（カテゴリ最新記事）部分に表示されるサムネイル画像に枠線を付けると、記事に画像を挿入していない場合に表示するようにしていた「no image」の枠線と重なってしまって、太線になってしまいます。これを解消するために作ったclassです。


デフォルトで設定されているclass「no-image」から枠線「border: 1px solid #aaa;」を削除した記述です。
HTMLに元々記述されていたclass名「no-image」に「2」を追加するだけで簡単に変更できるので、このようなclass名にしました。

「side-waku」「module__heading2」

「side-waku」はサイドバーの各コンテンツを線で囲みたいと思ったので作ったclassです。
サイドバーに枠線を付けるので「side（サイド）-waku（枠）」と名付けました。
このclassはサイドバーにしか使わないので、「コンテンツHTML」に記述しています。



「module__heading2」も同じくサイドバーの各コンテンツ用に作ったclassです。
「side-waku」を使ってコンテンツを線で囲んだ時に、コンテンツのタイトル部分と上枠線との間の余白を設定するために作りました。


元々、サイドバーのタイトル部分にはclass「module__heading」を使用していますが、下余白「margin-bottom」が「15px」です。余白はこんなに必要ないので、新しくclass「module__heading2」を作って「margin-bottom」を「5px」に設定し、「side-waku」の枠線との余白を狭くしました。
ということで、「module__heading2」はデフォルトの「module__heading」から下余白「5px」部分しか変更していません。









次の記事の紹介

次の記事では「Seesaaブログ編集に関する記事のリスト」を掲載します。