【Seesaaブログ新デザインシステム】カテゴリページ・タグ一覧ページのタイトルを記事タイトルと同じ位置に置く・「heading」を編集する|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。このままSeesaaブログのカスタマイズを続けるならば、次は記事ページの下部にある「関連する記事」や「この記事へのコメント」部分の編集になると思います。その前に、このブログのカタチをしっかり決めて、「heading」というclassを編集しようと思います。....あ、「このブログのカタチ」とか大げさなことを書いてしまいました。単純に、コンテンツのタイトル位置を決めたいと思っただけです、ハイ。メインコンテンツの上からの位置(現状)ブログの一番上には「ヘッダー」があります。ブログタイトルが表示される場所です。ヘッダーの下に「メインコンテンツ」と「サイドバー」があります。メインコンテンツとサイドバーは、上から同じ位置からスタートするようなイメージで私はブログを作ってきました。トップページや個別記事ページの上部は、メインコンテンツとサイドバーの位置が揃っています。トップページ記事ページでも、カテゴリページやタグ一覧ページを開くと、タイトルの位置がズレて表示されます。飛び出してしまったような感じですね。カテゴリページタグ一覧ページカテゴリページもタグ一覧ページも、「○○の記事一覧」や「タグ:○○」というタイトルが、まるでヘッダー(ブログタイトルと同じ場所)に入っているように見えます。私はカテゴリページやタグ一覧ページのタイトルも、トップページや個別記事ページと同じように「記事のタイトル」という意味で置きたいのです。カテゴリやタグ一覧を特別なタイトルとして設定したくはないのです。(各記事タイトルよりも上位のタイトル、という位置づけにしたくない)なので、こうやってカテゴリやタグのタイトルを目立つようには置きたくないし、個別記事タイトルと同じ位置に配置したいのです。このような状態になってしまうのかというと、それはHTMLに書かれたコードの順番のせいです。デフォルトのテンプレートのHTMLでは、カテゴリページやタグ一覧ページのタイトルはコンテンツ(「l-content」)よりも上位に記述されています。コンテンツ内の記事タイトルよりも上に配置されてしまうのです。コンテンツ内の記事タイトルと同じ位置に置きたいのであれば、「l-content」よりも下にコードを書けばいいのです。HTMLの「l-content」を移動してタイトルの位置を変更するということで、HTMLを編集して、カテゴリページやタグ一覧ページのタイトルを「l-content」よりも下に移動させます。私のような考えではない方は、この作業をする必要はありません。(ご自分でカテゴリやタグのタイトルを調整してください)HTMLを編集します。class="l-content">」タグを探します。42行目あたりにあると思います。-%>」の上に移動させます。「l-content」よりも下に移動させるためには、「l-content」関連のタグを上に持って行けばいいのです。(カテゴリページのタイトルやタグ一覧ページのタイトルを移動させるよりもこちらの方が簡単です)<移動後>コード移動後の実際のページHTMLでタグを移動させると、記事タイトルと同じ位置にカテゴリページやタグ一覧ページのタイトルを配置させることができます。下記掲載の画像を見てもらえばわかりますが、タイトル「日記の記事一覧」や「タグ:テスト記事」の位置が、サイドバーのタイトル「カレンダー」と同じ位置になりました。上記の作業で、カテゴリページやタグ一覧ページのタイトルの位置を変更することができました。見るとタイトル部分の下に線が入っています。ちなみに、作業したHTML部分を見てみると、カテゴリページやタグ一覧ページのタイトルにはすべて「heading」というclassが付けられているのがわかります。カテゴリページやタグ一覧ページのタイトルによくわからない下線が引かれているのは、この「heading」で下線を引くように指示されているからです。見栄え良く、「heading」(タイトル部分のスタイル)を編集したいと思います。class「heading」の編集CSS(スタイルシート)を編集します。管理画面の「スタイルシート編集」画面で「heading」というclassを探します。下記に「元コード」と「編集後」のコードを掲載しておきます。CSSの該当部分に「編集後」のコードをコピーして貼り付けるか、もしくは該当箇所を直接変更してから「保存」します。説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。*/}●コメントアウトで見出しを付けています。●コード内容を見たらわかると思いますが、ここで記述したタイトル部分「heading」の内容は、サイドバーのタイトル部分「module__heading」とほぼ同じコードです。(サイドバーのタイトルは文字を真ん中に配置していましたが、こちらでは左寄せにしています。3px;}●私はサイドバーのタイトル部分と同じように表示させたいと思ったので「編集後」のようなコードにしましたが、違うように表示させたい場合はご自分で色々と編集してみてください。次の記事では、記事ページ「関連記事」のサムネイル「no-image」を編集します。記事ページの下部に表示される「関連記事」を編集します。[必須入力]※画像の中の文字を半角で入力してください。