Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】カテゴリページ・タグ一覧ページのタ…

【Seesaaブログ新デザインシステム】カテゴリページ・タグ一覧ページのタイトルを記事タイトルと同じ位置に置く・「heading」を編集する

Seesaaブログ新デザインシステムのカテゴリページ・タグ一覧ページのタイトルを記事タイトルと同じ位置に置く
■カテゴリページやタグ一覧ページのタイトル部分がメインコンテンツよりも上の位置に設定されているのを変更する
■HTMLの「<div class="l-content">」と「<div role="main" class="main l-left">」の2つのタグを移動
■CSSの「heading」を編集  

このままSeesaaブログのカスタマイズを続けるならば、次は記事ページの下部にある「関連する記事」や「この記事へのコメント」部分の編集になると思います。
でもその前に、このブログのカタチをしっかり決めて、「heading」というclassを編集しようと思います。


‥‥あ、「このブログのカタチ」とか大げさなことを書いてしまいました。
単純に、コンテンツのタイトル位置を決めたいと思っただけです、ハイ。





メインコンテンツの上からの位置(現状)


ブログの一番上には「ヘッダー」があります。ブログタイトルが表示される場所です。
そして、ヘッダーの下に「メインコンテンツ」と「サイドバー」があります。
メインコンテンツとサイドバーは、上から同じ位置からスタートするようなイメージで私はブログを作ってきました。
なので、トップページや個別記事ページの上部は、メインコンテンツとサイドバーの位置が揃っています。


トップページ
トップページの画像


記事ページ
記事ページの画像



でも、カテゴリページやタグ一覧ページを開くと、タイトルの位置がズレて表示されます。
飛び出してしまったような感じですね。


カテゴリページ
カテゴリページの画像


タグ一覧ページ
タグ一覧ページの画像


カテゴリページもタグ一覧ページも、「○○の記事一覧」や「タグ:○○」というタイトルが、まるでヘッダー(ブログタイトルと同じ場所)に入っているように見えます。



私はカテゴリページやタグ一覧ページのタイトルも、トップページや個別記事ページと同じように「記事のタイトル」という意味で置きたいのです。
カテゴリやタグ一覧を特別なタイトルとして設定したくはないのです。(各記事タイトルよりも上位のタイトル、という位置づけにしたくない)
なので、こうやってカテゴリやタグのタイトルを目立つようには置きたくないし、個別記事タイトルと同じ位置に配置したいのです。



なぜこのような状態になってしまうのかというと、それはHTMLに書かれたコードの順番のせいです。


デフォルトのテンプレートのHTMLでは、カテゴリページやタグ一覧ページのタイトルはコンテンツ(「l-content」)よりも上位に記述されています。
だからコンテンツ内の記事タイトルよりも上に配置されてしまうのです。
コンテンツ内の記事タイトルと同じ位置に置きたいのであれば、「l-content」よりも下にコードを書けばいいのです。



HTMLの「l-content」を移動してタイトルの位置を変更する


ということで、HTMLを編集して、カテゴリページやタグ一覧ページのタイトルを「l-content」よりも下に移動させます。
私のような考えではない方は、この作業をする必要はありません。
(ご自分でカテゴリやタグのタイトルを調整してください)



HTMLを編集します。
管理画面の「HTML編集」画面で「<div class="l-content">」タグを探します。おそらく42行目あたりにあると思います。


HTML編集画面でのl-content部分



HTMLの42行目の「<div class="l-content">」と44行目の「<div role="main" class="main l-left">」の2つのタグを、24行目の「<% if:page_name eq 'category' -%>」の上に移動させます。
「l-content」よりも下に移動させるためには、「l-content」関連のタグを上に持って行けばいいのです。(カテゴリページのタイトルやタグ一覧ページのタイトルを移動させるよりもこちらの方が簡単です)


<移動後>
l-content移動後のHTML編集画面



コード移動後の実際のページ


HTMLでタグを移動させると、記事タイトルと同じ位置にカテゴリページやタグ一覧ページのタイトルを配置させることができます。
下記掲載の画像を見てもらえばわかりますが、タイトル「日記の記事一覧」や「タグ:テスト記事」の位置が、サイドバーのタイトル「カレンダー」と同じ位置になりました。


カテゴリページ
編集後のカテゴリページ


タグ一覧ページ
編集後のタグ一覧ページ



タイトルに付けられたclass「heading」の編集


上記の作業で、カテゴリページやタグ一覧ページのタイトルの位置を変更することができました。
ただ、よく見るとタイトル部分の下に線が入っています。


タグ一覧ページのタイトル部分



ちなみに、作業したHTML部分を見てみると、カテゴリページやタグ一覧ページのタイトルにはすべて「heading」というclassが付けられているのがわかります。


HTML編集画面でのheading部分


カテゴリページやタグ一覧ページのタイトルによくわからない下線が引かれているのは、この「heading」で下線を引くように指示されているからです。
なので、もう少し見栄え良く、「heading」(タイトル部分のスタイル)を編集したいと思います。



class「heading」の編集


CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「heading」というclassを探します。



下記に「元コード」と「編集後」のコードを掲載しておきます。
CSSの該当部分に「編集後」のコードをコピーして貼り付けるか、もしくは該当箇所を直接変更してから「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


<元コード>
.heading {
font-weight: bold;
font-size: 30px;
border-bottom: 1px dashed #ccc;
margin-bottom: 40px;
}


<編集後>
/*** カテゴリ・タグ一覧ページ等のタイトル
*****************************************************/

.heading {
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:left;

margin-bottom: 15px;
padding:3px 15px;
border-radius: 3px;
-webkit-border-radius: 3px;
/* Safari,Google Chrome用 */
-moz-border-radius: 3px; /* Firefox用 */
}


●コメントアウトで見出しを付けています。


●コード内容を見たらわかると思いますが、ここで記述したタイトル部分「heading」の内容は、サイドバーのタイトル部分「module__heading」とほぼ同じコードです。
(サイドバーのタイトルは文字を真ん中に配置していましたが、こちらでは左寄せにしています。左寄せにしたことにより、左側に余白が必要となるため、paddingに左右の余白を追加しました)

<参考・サイドバータイトル「.module__heading」>
/*** サイドバータイトル ***/
.module__heading {
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:center;
margin-bottom: 15px;
padding:3px 0px;
border-radius: 3px;
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px;
}


●私はサイドバーのタイトル部分と同じように表示させたいと思ったので「編集後」のようなコードにしましたが、違うように表示させたい場合はご自分で色々と編集してみてください。(背景色を付けないとか文字の大きさを変えるとか)



コード編集後のCSSと実際のページ


編集後のheading部分のスタイルシート


カテゴリページ
編集した後のカテゴリページ


タグ一覧ページ
編集した後のタグ一覧ページ




次の記事の紹介

次の記事では、記事ページ「関連記事」のサムネイル「no-image」を編集します。


【Seesaaブログ新デザインシステム】記事ページの「関連記事」(1)サムネイル「no-image」の色を変更
記事ページの下部に表示される「関連記事」を編集します。「関連記事」なのか「関連する記事」なのか、はたまた「カテゴリの最新記事」なのか?呼び方がさっぱりわかりませんが、まあ、どこを指しているのかはおわかりだと思います‥‥






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

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