ブログタイトルに中見出しと同じ背景色が表示された時の対処法


Jimdo PagePartnerさんが提供している無料テンプレートや独自レイアウトを使用している方などが対象となります。

ブログ記事一覧ページにて、各ブログタイトルに「コンテンツ内の見出し中」と同じ背景色が表示されて(重なって)見栄えが悪くなってしまった時の対処方法をご紹介します。

使用する背景色や枠線によっては、ブログの日付も不自然に見えてしまいますよね。

 


この記事は、2016年6月23日に改訂しました。

対処方法

Jimdoの管理画面で、「基本設定」→「ヘッダー編集」を開き、下記のCSSをコピーしてそこへ貼り付けます(コピペします)。次に「保存」をクリックして「キーボードのF5ボタン」を押します。

 

※「デザイン」>「独自レイアウト」内の「CSS」の空行に記述することもできます。

その場合はスタイル開始タグ<style type="text/css">と終了タグ</style>の記述は不要です。


<style type="text/css">

 

.blogselection h2 {

 color: #202020 !important;

 border-top: none !important;

 border-right: none !important;

 border-bottom: none !important;

 border-left: none !important;

 background: none !important;

 box-shadow: none !important;

}

 

</style>


お使いのテンプレートの「見出し中」のデザインに応じて、非表示にしたくない部分(行)を上記CSSより削除してお使いください。あくまで、応急処置になります。

 

ブログ記事内の大見出しのデザインを調整したい場合は同様にして、「.blogselection h2」の部分を「.post h1」に変えて指定します。

 

やみくもに非表示にするよりも、ブログタイトルのデザインをじっくりと考え直し、変更していくほうが良いかも知れませんね。

 

用語について

【 .post h1 】

個別のブログ記事内トップに表示される「大見出し」です。

 

【 .blogselection h2 】

:任意のページにブログ記事を一覧表示した際の「各ブログタイトル」です。

 

【 color 】

:ここでは見出しの文字色を濃いグレー色にしています。

 

【 border-top, border-right, border-bottom, border-left 】

:枠線を消しています。順に、上、右、下、左にある枠線になります。

 

【 background 】

:見出しの背景を無しにしています。

 

【 box-shadow 】

:見出しに影を指定している場合、これを消します。

 

 これらのセレクタ&プロパティを使いこなして、ご自身のブログタイトルをコンテンツ見出しと違ったデザインにカスタマイズしてみるのも、趣きがあって楽しめるかと。

ぜひ、素敵なサイトを作って下さい。  

参考:Jimdoのブログ表示の変更について

Jimdoは5月にブログ表示の一部を変更しました(公式サイト上でのお知らせは一切無し)。

具体的には、今までブログ記事一覧として表示されていた「大見出し(h1)」が、「中見出し(h2)扱い」になるというものでした。

そのため、変更前から使用している無料テンプレートや独自レイアウトなどでは、変更後のブログタイトルにコンテンツの中見出しと同じ装飾が混じって表示されるという現象が起こりました。