Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】記事ページを線で囲む(1)線で囲む…

【Seesaaブログ新デザインシステム】記事ページを線で囲む(1)線で囲むというclassを作る

Seesaaブログの記事ページを線で囲む
■Seesaaブログの記事ページのコンテンツを点線で囲む(1)
■新しいclass「article_kobetu」を作成
■CSSに追加  

Seesaaブログのトップページには記事が数個、表示されます。
私は以前の記事<■【Seesaaブログ新デザインシステム】トップページの記事を線で囲んで境目をわかりやすくする>で、表示される記事コンテンツ1つずつを線で囲むようにカスタマイズしました。



トップページに枠線を入れたので、個別記事ページでも点線の枠線を入れようと思います。
続き記事になるので、先にどういうことをやるのかを書いておきますね。
記事は3つ連番です。


まず最初にこの記事(1)で、囲み線の設定をします。どういうスタイルにするのかをCSSに記述して「article_kobetu」という名前を付けます。

次の記事(2)で、記事ページのどこまでを線で囲むのかを考えます。
私はページ案内リンクの上で線を終わらせる(つまりページ案内リンクは枠線の外側に位置する)ことにしました。HTMLの記述がわからなくなりそうなので、フッターの終了タグを移動させます。

最後(3)の記事で、HTMLに新しく作ったclass「article_kobetu」を記述します。







トップページの記事部分の設定を確認する


まずは、トップページの記事部分の設定を確認しておきます。
同じようなスタイルを設定しようと思っていますから、まずは確認です。


<以前の記事で設定したトップページの記事部分「.entry」>
/*** トップページ(entry)
*****************************************************/

.entry {
margin-bottom: 40px; /* コンテンツとコンテンツの間 */
padding: 10px 10px 15px 10px;
border:1px dotted #4E667D; /* コンテンツを点線で囲む */
line-height:1.5em; /* トップページの行間 */
}


「border:1px dotted #4E667D;」を入れて記事部分を点線で囲むように設定していたので、記事ページでも同じように点線で囲むようにします。
色々と試行錯誤してみましたが、個別記事部分に新しくclass名を付けてしまうのが簡単です。
一気に設定が可能ですからね。


ということで、個別記事ページには「article_kobetu」というclass名を付けて、点線で囲むようにしたいと思います。
「article_kobetu(個別)」ということで、安易なネーミングですが気にしないでください。
一連の作業ではCSSだけではなくHTMLも編集するので、少し複雑になるかもしれません。
‥‥ま、いいか。


とりあえずこの記事では、新しく作るclass「article_kobetu」の設定をします。



CSSに新しいclass「article_kobetu」を記述する


CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「article--all」というclassを探します。
このコードの上に新しく作ったclass「article_kobetu」を追加します。


「.article--all」はそのまま残しておいてください。「.article--all」の上に追加します
CSSの該当部分に下記「追加するコード」をコピペまたは直接記述して、「保存」します。


<追加するコード>
/*** 個別記事(article)
*****************************************************/

/*** 個別記事の外枠点線 ***/
.article_kobetu {
margin-bottom: 40px; /* コンテンツとコンテンツの間 */
padding: 10px 10px 15px 10px;
border:1px dotted #4E667D; /* コンテンツを点線で囲む */
}


編集後のスタイルシート編集画面

●コメントアウトで見出し「個別記事(article)」や「/*** 個別記事の外枠点線 ***/」を付けています。
●なぜ「.article--all」の上に追加するようにしつこく言ったのかというと、CSS上に「個別記事(article)」という見出しを入れたかったからです。(ただ、それだけですw)
●トップページに枠線を入れた時とほとんど同じ指示を出しています。




次の記事の紹介

さて、この記事では「.article_kobetu」をCSSに追加しましたが、追加しただけなので、このままでは何も変わりません。
次の記事では、記事ページを線でどこまで囲むのかを考えます。


【Seesaaブログ新デザインシステム】記事ページを線で囲む(2)どこまで囲むのか構成を考えて「footer」を移動する
前回の記事で、記事ページの記事コンテンツを点線で囲むためのCSSの設定は終わりました。続いてHTMLを編集しなければいけませんが、その前に、点線でどこまで囲むのかを考えてみます。この構成はきちんとやっておかないと‥‥






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

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