
■Seesaaブログの記事ページのコンテンツを点線で囲む(1)
■新しいclass「article_kobetu」を作成
■CSSに追加
■新しいclass「article_kobetu」を作成
■CSSに追加
Seesaaブログのトップページには記事が数個、表示されます。
私は以前の記事<■【Seesaaブログ新デザインシステム】トップページの記事を線で囲んで境目をわかりやすくする>で、表示される記事コンテンツ1つずつを線で囲むようにカスタマイズしました。
トップページに枠線を入れたので、個別記事ページでも点線の枠線を入れようと思います。
続き記事になるので、先にどういうことをやるのかを書いておきますね。
記事は3つ連番です。
まず最初にこの記事(1)で、囲み線の設定をします。どういうスタイルにするのかをCSSに記述して「article_kobetu」という名前を付けます。
次の記事(2)で、記事ページのどこまでを線で囲むのかを考えます。
私はページ案内リンクの上で線を終わらせる(つまりページ案内リンクは枠線の外側に位置する)ことにしました。HTMLの記述がわからなくなりそうなので、フッターの終了タグを移動させます。
最後(3)の記事で、HTMLに新しく作ったclass「article_kobetu」を記述します。
当記事の関連記事■記事ページを線で囲む(1)線で囲むというclassを作る
■記事ページを線で囲む(2)どこまで囲むのか構成を考えて「footer」を移動する
■記事ページを線で囲む(3)HTMLを編集して囲み線を表示させる
■記事ページを線で囲む(2)どこまで囲むのか構成を考えて「footer」を移動する
■記事ページを線で囲む(3)HTMLを編集して囲み線を表示させる
トップページの記事部分の設定を確認する
まずは、トップページの記事部分の設定を確認しておきます。
同じようなスタイルを設定しようと思っていますから、まずは確認です。
<以前の記事で設定したトップページの記事部分「.entry」>
/*** トップページ(entry)
*****************************************************/
.entry {
margin-bottom: 40px; /* コンテンツとコンテンツの間 */
padding: 10px 10px 15px 10px;
border:1px dotted #4E667D; /* コンテンツを点線で囲む */
line-height:1.5em; /* トップページの行間 */
}
*****************************************************/
.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_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を編集しなければいけませんが、その前に、点線でどこまで囲むのかを考えてみます。この構成はきちんとやっておかないと‥‥
前回の記事で、記事ページの記事コンテンツを点線で囲むためのCSSの設定は終わりました。続いてHTMLを編集しなければいけませんが、その前に、点線でどこまで囲むのかを考えてみます。この構成はきちんとやっておかないと‥‥