【Seesaaブログ新デザインシステム】記事ページを線で囲む(1)線で囲むというclassを作る|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。Seesaaブログのトップページには記事が数個、表示されます。私は以前の記事<■【Seesaaブログ新デザインシステム】トップページの記事を線で囲んで境目をわかりやすくする>で、表示される記事コンテンツ1つずつを線で囲むようにカスタマイズしました。トップページに枠線を入れたので、個別記事ページでも点線の枠線を入れようと思います。続き記事になるので、先にどういうことをやるのかを書いておきますね。最初にこの記事(1)で、囲み線の設定をします。いうスタイルにするのかをCSSに記述して「article_kobetu」という名前を付けます。次の記事(2)で、記事ページのどこまでを線で囲むのかを考えます。私はページ案内リンクの上で線を終わらせる(つまりページ案内リンクは枠線の外側に位置する)ことにしました。HTMLの記述がわからなくなりそうなので、フッターの終了タグを移動させます。最後(3)の記事で、HTMLに新しく作ったclass「article_kobetu」を記述します。当記事の関連記事■記事ページを線で囲む(1)線で囲むというclassを作る■記事ページを線で囲む(2)どこまで囲むのか構成を考えて「footer」を移動する■記事ページを線で囲む(3)HTMLを編集して囲み線を表示させるトップページの記事部分の設定を確認するまずは、トップページの記事部分の設定を確認しておきます。同じようなスタイルを設定しようと思っていますから、まずは確認です。#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--all」の上に追加するようにしつこく言ったのかというと、CSS上に「個別記事(article)」という見出しを入れたかったからです。(ただ、それだけですw)●トップページに枠線を入れた時とほとんど同じ指示を出しています。次の記事の紹介さて、この記事では「.article_kobetu」をCSSに追加しましたが、追加しただけなので、このままでは何も変わりません。次の記事では、記事ページを線でどこまで囲むのかを考えます。■【Seesaaブログ新デザインシステム】記事ページを線で囲む(2)どこまで囲むのか構成を考えて「footer」を移動する前回の記事で、記事ページの記事コンテンツを点線で囲むためのCSSの設定は終わりました。続いてHTMLを編集しなければいけませんが、その前に、点線でどこまで囲むのかを考えてみます。[必須入力]※画像の中の文字を半角で入力してください。