【THE THOR 】クルッと回転するアーカイブ記事のエフェクト!

みなさんこんにちは。

サイトデザインをカスタマイズしてると遊び心が出ちゃう JonyとAi(@10to1_travel)です。

カスタマイズの魅力は

・他のサイトデザインと差をつける
・個性のあるサイトになる
・ブログを運営してて楽しい

ですよね。

THE THOR(ザ・トール)のカスタマイズが大好きで、前回も記事一覧をフワッと浮かせるカスタマイズをしました。

その時つい遊び心が出て「あれ?これってクルッと回転させたら面白いんじゃないか!?」となりました。

と言うことで今回はアーカイブ記事一覧リストをクルッと回転させるカスタマイズを紹介します。

方法はとても簡単でコピペだけ 1分で終わります。

関連記事

みなさんこんにちは。 ONE PIECEのボスキャラ"フワフワの実"の金獅子のシキが大好きな JonyとAi(@10to1_JonyAi)です。 声優が竹中直人さんなのが最高にかっこいいですよね! さて、シキのフ[…]

関連記事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

クルッと回転するアーカイブ記事のエフェクト

クルッと回転する記事一覧リストのカスタマイズ

さっそく THE THOR(ザ・トール)の記事一覧リストをクルッと回転するカスタマイズを紹介します。

と言ってもとても簡単です。
コピペだけなので手順にそって進めてください。

手順1:CSSをコピー

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

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

/*記事をクルッと回転する*/
.archive__item:hover{
transition: 0.5s;
transform: rotateY(365deg);
}

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

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

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

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

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

関連記事

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

以上で記事がクルッと回転します。
お疲れ様でした。

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

CSSでもっと斬新なカスタマイズをしたいあなたへ

ブログのデザインを自由にカスタマイズできるととても楽しいです。

周りのサイトと差を付けれるし、読者さんから「とてもおしゃれなサイトですね!」とか「どうやってデザインしてるんですか?」と言われるととても嬉しいです。

とは言ってもさすがに HTMLと CSSの知識ゼロではどうしようもありません。

必要最低限の基礎は必要です。

もしあなたがブログを自由にカスタマイズしたいと本気で考えているならまずは書籍で勉強してみてください。

続けるかどうかは読んだ後でも問題ありません。

以下に私たちが勉強してる書籍を紹介してますのでご覧ください。

CSSのことだけでなく、サイトデザインの基礎知識やコツが紹介されています。
ブログのカラーを決めるのにも役立つ本です。

まとめ:クルッと回転するアーカイブ記事のエフェクト

今回は THE THOR(ザ・トール)の記事一覧リストをクルッと回転するカスタマイズを紹介しました。

いかがでしたか?
楽しんでいただけましたか?

他にも THE THOR(ザ・トール)のカスタマイズを紹介してるのでぜひご覧ください。

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

Twitterでリクエストする

お待ちしております。

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

おわり