訪問ありがとうございます!ゆっくりご覧ください!

【THE THOR】ピックアップ3記事の背景を消す&おしゃれにする方法

 

 こんなあなたにおすすめ!
THE THORのピックアップ3記事の背景画像が不満

アイキャッチ画像に文字があると背景画像がダサくなる…

良い機能なのに背景画像がダサくなるから使うのやめよう…

 

 

この記事では、THE THORをお使いの方向けに

 

ピックアップ3記事の背景画像を
カスタマイズする方法

を紹介します!

 

CSS・HTMLの初心者が試行錯誤して見つけ出した方法なので、うまく再現できなかったり、不具合が出たりしても一切責任がとれません!

 

 

 試す前にお読み下さい!
 不具合の責任はとれません!

 必ずバックアップしてからお試しください!

 気に入っていただけたらSNSでコメントやシェアをしてくれると嬉しいです♪

 

 

それでは紹介します!

 

 

【THE THOR】ピックアップ3記事の不満

 

THE THORをお使いの方は、一度は『ピックアップ3記事』を試してみたことがあると思います。

 

こんな感じですね。

 

 

 

そうです。

皆さんご存じの通り、文字つきのアイキャッチ画像だと違和感がハンパないんです。

特に白文字使ってるとゴチャつき方が限界突破します。

 

 

私は最初に設定した時

 

背景に変な画像が映ってる!不具合だ!

 

とマジで思いました。

 

ただ、せっかくTHE THOR(ザ・トール)を使っているのでピックアップ3記事を表示させたいという気持ちが強く、なんとか今回の方法にたどり着きました。

 

この記事では、2つのパターンについて順番に説明します!

 

 

ピックアップ3記事の背景を消す(単色で塗りつぶす)方法

 

ここでは、背景画像を単色で塗りつぶす方法を紹介します。

 

次のコードを追加CSSの欄に追加することで変更ができます。

 

/*--- pickup3 ---*/
.pickup3{ 
 background-color: #FFF; 
 } 

.heading-main {
 color:#000000 !important; 
}

.heading-main span {
 color: #000000 !important;
 }
/*--- end ---*/

 

.pickup3の部分の説明

背景画像を塗りつぶすコードです。

#FFFを変更すれば好みの色で塗りつぶすことができます。

ブログの背景色を変えている場合は、ここを変更して色を合わせないと違和感が出ます。

 

.heading-main の部分の説明 

ピックアップ3記事のメインタイトルの部分の文字色を指定しています。

元々の文字色が白のため、背景を白にすると見えなくなります。

ここでは黒色で指定しています。

 

 

.heading-main span の部分の説明 

ピックアップ3記事のサブタイトルの部分の文字色を指定しています。

元々の文字色が白のため、背景を白にすると見えなくなります。

ここでは黒色で指定しています。

 

※もしかすると他の全く関係ない部分のタイトル色も変わってしまうかもしれません。当コードを張り付ける場合はご注意願います。

 

 

完成後のイメージは次の通りです。

 

けっこうシンプルですが、記事を目立たせるという意味では悪くはないかと思います。

 

ピックアップ3記事の背景をおしゃれに装飾する方法

 

単色で塗りつぶすだけでは物足りないという方向けに、背景をおしゃれな柄にする方法を紹介します。

完成後のイメージはこんな感じです。

 

 

 

追加CSSに張り付けるコードは次の通りです。

 

/*--- pickup3 ---*/
.pickup3{
background-color: #ECECEC;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #F9F9F9), color-stop(.5, transparent), to(transparent));
-webkit-background-size: 10px;!important;
 }

.heading-main {
color:#000000!important;
}

.heading-main span {
color: #000000!important;
}
/*--- end ---*/

 

.pickup3の部分の説明

背景画像の代わりに、柄を指定しているコードです。

ここではCSSでグレーのストライプを指定しています。

 

今回のストライプ柄のCSSは『RAD.ブログ』さんの記事を参考にさせていただきました。ありがとうございます!

RAD.ブログ

みなさんはCSS3での装飾はどれくらいしていますか? 僕はモダンブラウザのシェアが最近上がってきているので、P……

 

.heading-main の部分の説明 

1つ目の方法で説明した内容と同じです。

 

.heading-main span の部分の説明 

1つ目の方法で説明した内容と同じです。

 

※もしかすると他の全く関係ない部分のタイトル色も変わってしまうかもしれません。
 当コードを張り付ける場合はご注意願います。

 

 

 

『RAD.ブログ』さんの記事には他にもにもいろいろな背景デザインのCSSが紹介されています。

上記コードを変更すれば下記のようなPOPな背景にもできます。

 

※.pickup3{ここのカッコ内を好みのコードに変える}

 

好みに合わせて変更してみてください。
THE THORはポップというよりクールなデザインのため、個人的にはシンプルめの方が合う気はします。

ピックアップ3記事のカスタマイズまとめ

 

 

最後に今回のカスタマイズについて整理します。

 

 

 この方法の利点
 どんなアイキャッチ画像を使っても違和感をなくせる
 ストライプなどのおしゃれ背景も設定可能

 

 

 この方法の留意点
 追加CSSの編集を行うため、自己責任での対応が必要(カスタマイズ前に必ずバックアップを!)
 今後どこかのタイミング(アップデートなど)でレイアウトが崩れる可能性あり
 HTML・CSS初心者が作ったため正しいコードではない可能性あり

 

以上、ピックアップ3記事のカスタマイズについてでした!

この記事以外にもTHE THORのカスタマイズを紹介しています!

ぜひあわせてご覧ください!

 

関連記事

       こんなあなたにおすすめ! なんでサブタイトルボーダーボックスが1種類しか使えないんだ!! ボックスで記事をおしゃれ[…]

関連記事

    グローバルメニューにカテゴリーなどを表示する際、文字だけだと物足りないと感じる方は多いと思います。 アイコンを表示するとサイトのイメージが大きく変わります。 Before […]

 

それではまたのご愛読、よろしくお願いいたします!