【コピペ可】WordPressのSiteOrigin Unwindをおしゃれにカスタマイズ【CSS】

CSSがわからない方でもコピペで実装してみてください。

[imgad]

WordPressのUnwindをおしゃれにカスタマイズ【CSS】

マウスオーバー(マウスが乗る)すると記事が浮き上がったり、記事を二つに並べたりしてみましょう。
コピペだけなのでCSSがわからない方でも大丈夫です。

CSSというのを「追加CSS」というところに記述するのでわからない方は下記を参照してください。

マウスオーバーすると浮き上がるCSS

まずは、↓のような感じでUnwindのデザインを変えます。
マウスが乗ると浮き出てくるようにします。

以下のものを[追加CSS]に貼り付けてください。

@media screen and (min-width:786px){
	.blog-layout-grid .archive-entry {
		padding: 1%;
		transition: .5s;
	}
	.blog-layout-grid .archive-entry:hover {
		transition: .5s;
		transform: translateY(-5px);
	 	box-shadow: 0 5px 5px #ccc;
	}
}

もう少し細かく設定したい方

記事の一覧表示のレイアウト変更やナビゲーションなどUnwindではユーザーが簡単に触りやすい仕様になっています。

下記の記事でまとめましたので参考にしてください。

【WordPress】SiteOrigin Unwindの使い方とカスタマイズ【無料テーマ】

SiteOrigin Unwindのカスタマイズのまとめ

Unwindはカスタマイズが簡単にできるのが強みですので、CSSですることといえばこのくらいしか思いつかないですが随時更新していきます。

ぜひお試しください。

SiteOrigin Unwindカスタマイズ

【WordPress】SiteOrigin Unwindの使い方とカスタマイズ【無料テーマ】

カスタマイズが終わったら記事を書いていこう

ブログの記事タイトルの作り方【アクセスアップする3つの方法】

ブログでペルソナ設定する時の書き方

ブログをするならどこがいい？アフィリエイトで稼ぐなら一択

人気記事WEB制作を独学するための勉強法とおすすめサービス・本【初心者向け】
人気記事WordPressを自作するために勉強すべきもの２つ【これだけでいい】

『いつかは仕事を辞めたい』なら今すぐやっておくべきたった1つのこと

あなたに向いてる仕事がすぐにわかるたった1つの方法