【THE THOR 】フワッと浮く記事一覧リストのカスタマイズ

みなさんこんにちは。

ONE PIECEのボスキャラ“フワフワの実”の金獅子のシキが大好きな JonyとAi(@10to1_JonyAi)です。

声優が竹中直人さんなのが最高にかっこいいですよね!

さて、シキのフワフワの実からヒントを得て私たちも THE THOR(ザ・トール)の記事一覧リストをフワッと浮かせたくなりました。

完成図はこんな感じです。
ちょっと分かりにくいですが浮いてますね。

THE THOR フワッと浮く記事一覧カスタマイズ

他の有料テーマではよくあるエフェクトですが、THE THOR(ザ・トール)にはその機能がありません。

ですので今回は CSSでカスタマイズします。
初心者でもコピペだけなので簡単 1分でできます。

関連記事

みなさんこんにちは。 HTML・CSSを使って、周りのブログと差を付けたオリジナルデザインのサイトを作りたいあなたへ。 ユーザーの滞在時間の増減や、リピート率の向上には「ブログデザイン」が大きく関わっていま[…]

記事一覧のレイアウト設定

記事一覧のレイアウト設定

まず始めに、記事一覧リストのレイアウトの設定方法を説明しておきます。

外観 → カスタマイズ → アーカイブページ設定[THE] → コントローラー設定

と進み、一番下にある「レイアウト切替ボタンの設定」を設定します。

■レイアウト切替ボタンを表示するか選択

レイアウト切替ボタンはあまり意味がないので非表示がオススメです。

■レイアウト切替ボタンの初期checkedを選択

ここで好きなレイアウトを選びます。

  • ワイドレイアウト:画面いっぱいに表示
  • カードレイアウト:2カラムでカード表示
  • ノーマルレイアウト:横長でシンプル表示

基本的に好みで大丈夫です。

記事を大きく分かりやすく見せたいならワイドレイアウト、2列でなるべく多くの記事を見てもらいたいならカードレイアウト、両方をこなすスタンダードならノーマルレイアウトがオススメですね。

 
Ai
次は THE THOR(ザ・トール)の追加CSSを使ってカスタマイズしていきます。

フワッと浮く記事一覧のカスタマイズ方法

フワッと浮く記事一覧のカスタマイズ方法

それではアーカイブページの記事一覧をフワッと浮かせます。
浮かせるには”フワフワの実”ではなく CSSを使います。

と言ってもフワフワの実を探すより簡単です。
手順は 2つ、コピペだけ。

手順1:CSSをコピー

以下の CSSコードをコピーします。

CSSをコピペ
/*TOPアーカイブ記事のカスタマイズ*/
.archive__item{
transition-duration: 0.4s;
}

/*アーカイブをフワッと浮かす*/
.archive__item:hover{
transition-duration: 0.4s;
-webkit-transform: translateY(-3px); /*浮かす*/
-ms-transform: translateY(-3px); /*浮かす*/
transform: translateY(-3px); /*浮かす*/
box-shadow: 6px 6px 6px rgba(0,0,0,0.2)!important; /*浮かした時のシャドー(影)*/
}

手順2:追加CSSに貼り付け

THE THOR(ザ・トール)の「追加CSS」に貼り付けます。

手順2:追加CSSに貼り付け
外観 → カスタマイズ → 追加CSS

と進み、先ほどコピーした CSSを貼り付けます。

ちなみに THE THOR(ザ・トール)の「追加CSS」をもっと詳しく知りたい人は簡単!THE THOR「追加 CSS」でカスタマイズする方法をご覧ください。

関連記事

みなさんこんにちは。 THE THORのデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ!】ってタイトルありますよね。 でも コピペってどこに?追加 CSSって何?どうやって[…]

以上で記事がフワッと浮きます。
お疲れ様でした。

※カスタマイズは自己責任でお願いします。

カスタマイズをフワッと説明

と言っても今回のカスタマイズはあまりいじるところがありません。

フワッと浮かすだけなのでフワッと説明します。

/*TOPアーカイブ記事のカスタマイズ*/
.archive__item{
transition-duration: 0.4s;
}

/*アーカイブをフワッと浮かす*/
.archive__item:hover{
transition-duration: 0.4s;
-webkit-transform: translateY(-3px); /*浮かす*/
-ms-transform: translateY(-3px); /*浮かす*/
transform: translateY(-3px); /*浮かす*/
box-shadow: 6px 6px 6px rgba(0,0,0,0.2)!important; /*浮かした時のシャドー(影)*/
}

浮くスピードを調節

transition-durationは要素が浮くスピードです。

0.4sは 0.4秒と言う意味です。
必要なら希望の速度に変えてください。

影の調節

今回のカスタマイズで浮いた要素に影を付けています。
カゲカゲの実ですね笑

boc-shadowが影をつけるコードなので不要なら消去してください。

まとめ:THE THOR フワッと浮く記事一覧のカスタマイズ

今回は THE THOR(ザ・トール)の記事一覧をフワッと浮かせるカスタマイズを紹介しました。

WordPressの有料テーマ SANGOや AFFINGER5のようなオシャレなアニメーションになりましたね。

他にも記事一覧をクルッと回転させるカスタマイズも紹介してるのでご覧ください。

関連記事

みなさんこんにちは。 サイトデザインをカスタマイズしてると遊び心が出ちゃう JonyとAi(@10to1_travel)です。 カスタマイズの魅力は ・他のサイトデザインと差をつける・個性のあるサイトになる・ブロ[…]

もし何かカスタマイズのリクエストがありましたら Twitterにてメッセージください。

Twitterでリクエストする

お待ちしております。

最後まで読んでいただきありがとうございます。

おわり

 PS. ちなみに今回のカスタマイズのヒントをくれた”フワフワの能力者” シキが登場する映画「STRONG WORLD」はAmazonプライムで観ることができます。

ロジャーと互角に戦えただけあってかなり強くてカッコいいのでオススメです。

カスタマイズの息抜きに映画を観て、モチベーションを上げましょう。

Amazonプライムでフワフワの能力者シキを観る