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

前回の記事では、記事ページの記事コンテンツを点線で囲むために、CSSの設定をしました。
続いてHTMLを編集しなければいけませんが、その前に、点線でどこまで囲むのかを考えてみます。この構成はきちんとやっておかないと、後からわけがわからなくなって崩壊します。必ず「どこまでを線で囲むのか」を考えてください。
その後、HTMLの記述をスッキリさせるために「</footer>」タグを移動します。

記事ページのどこまでを線で囲むのか考える

とりあえず、記事ページのテンプレートの構成を見てみます。
今回の編集ではサイドバーは無関係ですので外します。ヘッダー以下、どんなコンテンツが入っているのかを確認します。


＜記事ページの構成＞



「メインコンテンツ」を点線で囲みたいわけです。
ただし、メインコンテンツに含まれるパーツのうちどこまでを点線で囲むのか、というのを先に考えておかなければなりません。


実際、「関連する記事」や「コメント欄」まで含む、なんてことはあまりないと思います。
（もしもコメント欄まで点線で囲みたいのであれば、CSSで「.article」というclassを作ってborderを入れてください。できます。できますが、私はしませんｗ）
「コメント欄」まで枠線内に入れてしまうと、けっこう長くなってしまうし、終わりが見えなくなりそうです。コメントがたくさん入ると、その分だけページが長くなりますからね。



では、どこまで囲むべきなのか？
この時参考になるのは、トップページだと思います。
同じように点線で囲んでいるトップページでは、ページ案内リンク「12345ボタン」の上で点線が終わっているんですよね。





ということは、個別記事ページも同じように「前ページ・次ページ案内リンク」の上で点線を終わらせた方がスッキリするのではないでしょうか？


まあ、私が「前ページ・次ページ案内リンク」の上で点線を終わらせたいだけなんですけどね。
つまり、「Twitterマークまでは点線で囲む」ということになります。
「前ページ・次ページ案内リンク」は、点線の外側に配置します。
（私とは異なる場所で囲み線を終了させたい方はご自分で調整してください。私は関知しません）



さて、Twitterマークまでを点線で囲う場合、1つだけやっておきたい作業があります。
この作業は必ずやらなければならないものではありません。
HTML上でスッキリさせたいだけなのでしなくてもいい作業なんですが、やらなかった場合はどのような影響が出てくるのか私にはわかりません。（試していないからわからないのです）
理屈上はやらなくても大丈夫なはずです。


何をしたいのかというと、HTMLの個別記事ページ部分に設定されている「</footer>」タグを移動する、ということです。

footerの範囲を変更する（「</footer>」を移動する）

デフォルトのHTMLを見てみると、個別記事の部分は「<article class="article">」と「</article>」に挟まれた部分になります。
「HTML編集画面」では65行目ぐらいから始まります。






以降、ちょっとコード記述が長いので、HTMLの個別記事部分に何が書いてあるのかを簡単に書き出しておきます。


＜HTMLの個別記事部分の構成＞



「ヘッダー」や「記事本文」はそのままでかまいません。点線内に配置するのは当然です。
問題は「フッター」なんです。
私は、記事ページを点線で囲む時に、Twitterマークまでを囲みたいわけです。
その下の「前ページ・次ページ案内リンク」や「関連する記事」は点線からはずしたいのです。

「フッター」内に入っていない（独立している）「前ページ・次ページ案内リンク」と「関連する記事」

実は「前ページ・次ページ案内リンク（クラス名：permalink）」と「関連する記事（クラス名：module module--category-recent-entry）」は、CSS（スタイルシート）上ではそもそもフッター内で指示されていません。


クラス名「permalink」と「module module--category-recent-entry」は、フッターのクラス「article__footer」の中で指示されているわけではありません。独立して指示されています。
「article__footer」の中で指示されているのは「posted（posted by）」と「bookmark（Twitterなどのマーク）」だけなのです。





この画像を見てもわかる通り、フッターのクラス「article__footer」と同時に指示が記述されているのは「posted」と「bookmark」だけです。
なので、「前ページ・次ページ案内リンク（クラス名：permalink）」と「関連する記事（クラス名：module module--category-recent-entry）」をフッターから外してしまっても何の問題もありません。



別にね、外さなくてもいいんですが（笑）、そうするとフッターの終了タグ「</footer>」がどこにあるのかわかりにくくなってしまうんです。（私が、の話です）
なのでまず、フッターの終了タグ「</footer>」を移動させてスッキリしたいと思います。

HTMLを編集して「</footer>」を移動させる

HTMLを編集します。
管理画面の「HTML編集」画面で「</footer>」を探します。
先ほど「<article class="article">」（65行目）の画像を掲載しましたが、この島のずっと下、131行目あたりにあると思います。






131行目にある「</footer>」を切り取り、100行目の「<div class="permalink">」の上（つまり99行目）に貼り付けて「保存」します。






131行目にあった「</footer>」は切り取られましたから、そこには何もありません。
ただ「</article>」が残っているだけになります。





「</footer>」の移動はこれで終わりです。




次の記事の紹介

「</footer>」の移動が終わったので、次の記事ではHTMLを編集して囲み線を表示させたいと思います。