フッダーに挿入したメニューに動きをつけたい。 - CSSカスタマイズ相談

RE: フッダーに挿入したメニューに動きをつけたい。

わいひら — Tue, 05 Feb 2019 13:15:28 +0000

一応、完成形のキャプチャー。

2019-02-05_22h14_37.png

RE: フッダーに挿入したメニューに動きをつけたい。

Tue, 05 Feb 2019 08:23:12 +0000

ありがとうございます。

完全に理想通りのフッダーに仕上げることができました。

わいひらさん、かうたっくさんいつもありがとうございます。

RE: フッダーに挿入したメニューに動きをつけたい。

かうたっく — Mon, 04 Feb 2019 22:20:33 +0000

多分こんだけだと思うのですが、何か抜けてますか？

@media screen and (min-width: 769px) {
	.footer-left a:before {/* フッター左のリンク前 */
		font-family:Fontawesome;
		content:"\f138";
		color:#FFC14D;
		margin-right:6px;
	}
	.footer-left ul li a:hover {
		background: transparent; /* hover時背景透明 */
		margin-left: 5px; /* hover時5px左に余白 */
	}
	.footer-left h3:before {
		font-family: Fontawesome;
		content: "\f0ca";
		font-weight: normal;
		margin-right: 6px;
	}
}

フッダーの「サイト案内」の左側にもfontawsomeを入れる方法も知りたいです。

指定方法は色々ありますが、フッター左領域にあるh3タグ前と指定しました。　.footer-left h3:before

CSSの装飾内容は子テーマで適応されてたモノです。ご確認ください。

RE: フッダーに挿入したメニューに動きをつけたい。

Mon, 04 Feb 2019 19:09:34 +0000

あとは、フッダーの「サイト案内」の左側にもfontawsomeを入れる方法も知りたいです。

ウィジェットのタイトル欄のところにfontawsomeのコードやhtmlをいれてみたのですが、できませんでした。

要望が多くて申し訳ないのですが、ぜひよろしくお願いします。

RE: フッダーに挿入したメニューに動きをつけたい。

Mon, 04 Feb 2019 18:34:44 +0000

そこも記述すべきでした。

サイト案内には、「記事数」がなくて大丈夫です。「サイト案内」の各項目には、「カテゴリー」の各項目の左にあるものと同じフォントオウサムの黄色い矢印(\f138)とホバー時に右に動く機能をつけたいです。

背景を黄色にするわけではなく、背景が変化する機能をなくしてほしいです。

まとめると、

「サイト案内」にほしい機能
・各項目の最初に黄色いフォントオウサムの矢印(\f138)をつけたい
・ホバー時に右に動くようにしたい

「サイト案内」のなくしてほしい機能
・ホバー時に背景が変わるのをなくしたい

です。ぜひ、よろしくお願いします。

RE: フッダーに挿入したメニューに動きをつけたい。

わいひら — Mon, 04 Feb 2019 13:00:10 +0000

「サイト案内」部分は、「カテゴリー」部分のように「記事数」表示がありません。
「カテゴリー」部分は「記事数」のみの背景が黄色になりますが、「サイト案内」部分は、「項目全体の背景を黄色にする」ということでよろしいのでしょうか？

フッダーに挿入したメニューに動きをつけたい。

Mon, 04 Feb 2019 12:33:14 +0000

お世話になります。おかげさまで思ったようなブログの形に少しずつ近づいております。

今回はフッダーについてお聞かせください。

https://avilery.com/

フッダーの「サイト案内」のところなのですが、ここにホバーさせると真っ白になってしまいます。ここを右にある「カテゴリー」と同じような黄色のマーク、ホバー時の動きにしたいと考えています。

どのようにすればよいでしょうか？

「サイト案内」は＜外観＞→＜メニュー＞で表示されるメニューをつくったのち、＜ウィジェット＞→＜フッダー左＞に＜ナビゲーションメニュー＞を挿入してフッダーに表示させています。

「カテゴリー」は＜ウィジェット＞→＜フッダー中＞に＜カテゴリー＞を挿入しています。

カテゴリーに適用させているCSSは以下の通りです。（他のCSSも交じってしまってますがすみません）

.sidebar{
	background:transparent;
}
.widget-sidebar h3{
	background:transparent;
	font-size:1em;
	border-bottom:2px solid ;
	padding:5px 10px 0;
	margin-bottom:0;
}
.widget_popular_entries h3:before{
	font-family:Fontawesome;
	content:"\f06b";
	font-weight:normal;
	margin-right:6px;
}
.widget_categories h3:before{
	font-family:Fontawesome;
	content:"\f0ca";
	font-weight:normal;
	margin-right:6px;
}
.widget_archive h3:before{
	font-family:Fontawesome;
	content:"\f274";
	/*アイコン色*/
	font-weight:normal;
	margin-right:6px;
}
.widget_categories ul li,
.widget_archive ul li{
	padding-left:10px;
	border-bottom:1px dotted  rgba(125, 125, 125, 0.2);
}
.widget_categories ul li a,
.widget_archive ul li a{
	font-size:.95rem;
}
.widget_categories ul li a:before,
.widget_archive ul li a:before{
	font-family:Fontawesome;
	content:"\f138";
	color:#FFC14D;
	margin-right:6px;
}
.widget_categories ul .children li a:before{
	font-family:Fontawesome;
	content:"\f105";
	color:#FFC14D;
	font-weight:normal;
	margin-right:6px;
}
.widget_categories ul .children li{
	border-bottom:none;
}	
.widget_categories ul .children li a{
	padding:3px 10px;
	font-size:.85rem;
}
.widget_categories ul li a:hover,
.widget_archive ul li a:hover{
	background:transparent;
	color:#4e55b7;
	margin-left:5px;
}
.widget_categories ul li a .post-count,
.widget_archive ul li a  .post-count{
	border:1px solid rgba(221, 221, 221, 0.867);
	border-radius:5px;
	font-size:.8em;
	padding:1px 10px;
}
.widget_categories ul li a:hover .post-count,
.widget_archive ul li a:hover  .post-count{
	border-color:#FFC14D;
	background:#FFC14D;
	color:#fff;
	transition:.4s;
}