【Seesaaブログ新デザインシステム】記事ページを線で囲む(2)どこまで囲むのか構成を考えて「footer」を移動する|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。前回の記事では、記事ページの記事コンテンツを点線で囲むために、CSSの設定をしました。続いてHTMLを編集しなければいけませんが、その前に、点線でどこまで囲むのかを考えてみます。この構成はきちんとやっておかないと、後からわけがわからなくなって崩壊します。「どこまでを線で囲むのか」を考えてください。その後、HTMLの記述をスッキリさせるために「</footer>」タグを移動します。当記事の関連記事■記事ページを線で囲む(1)線で囲むというclassを作る■記事ページを線で囲む(2)どこまで囲むのか構成を考えて「footer」を移動する■記事ページを線で囲む(3)HTMLを編集して囲み線を表示させる記事ページのどこまでを線で囲むのか考えるとりあえず、記事ページのテンプレートの構成を見てみます。今回の編集ではサイドバーは無関係ですので外します。ヘッダー以下、どんなコンテンツが入っているのかを確認します。by(投稿者の名前と時間、コメント数、カテゴリ名)・Twitterマーク(他、Facebookのマークなど)・前ページ・次ページ案内リンク・関連する記事(または最新の記事)・この記事へのコメント(コメント欄)◆フッター(Seesaaロゴ)「メインコンテンツ」を点線で囲みたいわけです。メインコンテンツに含まれるパーツのうちどこまでを点線で囲むのか、というのを先に考えておかなければなりません。実際、「関連する記事」や「コメント欄」まで含む、なんてことはあまりないと思います。(もしもコメント欄まで点線で囲みたいのであれば、CSSで「.article」というclassを作ってborderを入れてください。できますが、私はしませんw)「コメント欄」まで枠線内に入れてしまうと、けっこう長くなってしまうし、終わりが見えなくなりそうです。コメントがたくさん入ると、その分だけページが長くなりますからね。どこまで囲むべきなのか?この時参考になるのは、トップページだと思います。同じように点線で囲んでいるトップページでは、ページ案内リンク「12345ボタン」の上で点線が終わっているんですよね。いうことは、個別記事ページも同じように「前ページ・次ページ案内リンク」の上で点線を終わらせた方がスッキリするのではないでしょうか?まあ、私が「前ページ・次ページ案内リンク」の上で点線を終わらせたいだけなんですけどね。「Twitterマークまでは点線で囲む」ということになります。「前ページ・次ページ案内リンク」は、点線の外側に配置します。(私とは異なる場所で囲み線を終了させたい方はご自分で調整してください。私は関知しません)さて、Twitterマークまでを点線で囲う場合、1つだけやっておきたい作業があります。この作業は必ずやらなければならないものではありません。HTML上でスッキリさせたいだけなのでしなくてもいい作業なんですが、やらなかった場合はどのような影響が出てくるのか私にはわかりません。(試していないからわからないのです)理屈上はやらなくても大丈夫なはずです。何をしたいのかというと、HTMLの個別記事ページ部分に設定されている「</footer>」タグを移動する、ということです。class="article">」と「</article>」に挟まれた部分になります。「HTML編集画面」では65行目ぐらいから始まります。以降、ちょっとコード記述が長いので、HTMLの個別記事部分に何が書いてあるのかを簡単に書き出しておきます。module--category-recent-entry)</article>「ヘッダー」や「記事本文」はそのままでかまいません。点線内に配置するのは当然です。問題は「フッター」なんです。私は、記事ページを点線で囲む時に、Twitterマークまでを囲みたいわけです。その下の「前ページ・次ページ案内リンク」や「関連する記事」は点線からはずしたいのです。module--category-recent-entry)」は、CSS(スタイルシート)上ではそもそもフッター内で指示されていません。module--category-recent-entry」は、フッターのクラス「article__footer」の中で指示されているわけではありません。独立して指示されています。by)」と「bookmark(Twitterなどのマーク)」だけなのです。この画像を見てもわかる通り、フッターのクラス「article__footer」と同時に指示が記述されているのは「posted」と「bookmark」だけです。module--category-recent-entry)」をフッターから外してしまっても何の問題もありません。別にね、外さなくてもいいんですが(笑)、そうするとフッターの終了タグ「</footer>」がどこにあるのかわかりにくくなってしまうんです。(私が、の話です)なのでまず、フッターの終了タグ「</footer>」を移動させてスッキリしたいと思います。HTMLを編集して「</footer>」を移動させるHTMLを編集します。管理画面の「HTML編集」画面で「</footer>」を探します。class="article">」(65行目)の画像を掲載しましたが、この島のずっと下、131行目あたりにあると思います。class="permalink">」の上(つまり99行目)に貼り付けて「保存」します。131行目にあった「</footer>」は切り取られましたから、そこには何もありません。「</article>」が残っているだけになります。「</footer>」の移動はこれで終わりです。「</footer>」の移動が終わったので、次の記事ではHTMLを編集して囲み線を表示させたいと思います。■【Seesaaブログ新デザインシステム】記事ページを線で囲む(3)HTMLを編集して囲み線を表示させる前々回の記事から、Seesaaブログの記事ページを線で囲む作業をしています。この記事で「記事ページを線で囲む」作業は終わりです。[必須入力]※画像の中の文字を半角で入力してください。