無料テンプレ【AFFINGER】サイドバーの矢印の非表示とリンクの装飾：CSS編集

検索エンジンとアフィリエイトに強い無料テンプレート【AFFINGER】のサイドバーの矢印を消して、リンクに装飾をつけるCSSの編集方法です。同じテンプレートを使っているサイトとの差別化することで集客アップにつながります。

検索エンジンとアフィリエイトに強いと評判のENJIさんが無料配布しているWordPressのテンプレートですが、人気のテンプレートですからそのまま使用すると他人のサイトとの差別化が難しくなる可能性があります。

AFFINGER、サイドバー矢印の表示

そんな理由で、せっかく綺麗につけていただいているサイドバーの矢印を非表示にして、リンクに装飾をつけるカスタマイズを施します。

ENJIさんごめんなさい...

注意点

テーマファイルのソースを改変しますので、失敗するとサイトが表示されなくなる可能性があります。

必ず、ファイルのバックアップを取っておきましょう。

▼バックアップに必要なファイル

style.css

環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。

▼この記事の環境

WordPress 4.3-ja
STINGER 5、AFFINGER
Google Chrom

※追記：AFFINGERは有料になり、無料ダウンロードは終了したようです。
AFFINGER PACK3（WING対応）

ボタンの装飾を外す

［外観］→［テーマの編集］で「スタイルシート（style.css）」の編集画面を開く。

AFFINGER、CSS編集画面

キーボードで「command＋F」を押すと検索フィールドが表示されます。
※Windowsの場合は「ctr + F」だそうです。

AFFINGER、CSS編集画面、検索窓表示

フィールドに「#side aside ul li ul li」と入力してするとそのソースがマーキングされて表示されます。

AFFINGER、CSS編集、ソース検索結果

このソースの「padding-left: 30px;」でイメージを挿入するスペースを空けて「background-image: url(images/arrow_gray.png);」で矢印のイメージを表示させています。

padding-left: 30px;
background-image: url(images/arrow_gray.png);

矢印のイメージを非表示にするには「images/arrow_gray.png」を削除。

左のスペースを消すには「padding-left: 30px;」を「padding-left: 0px;」にするとOKです。

編集したら［ファイルを更新］をクリック。

AFFINGER、CSS編集、編集の保存

▼変更前

#side aside ul li ul li{
	list-style-type: none;
	margin: 0px;
	padding-left: 30px;
	background-image: url(images/arrow_gray.png);
	background-repeat: no-repeat;
	background-position: left middle;
}

▼変更後

#side aside ul li ul li{
	list-style-type: none;
	margin: 0px;
	padding-left: 0px;
	background-image: url();
	background-repeat: no-repeat;
	background-position: left middle;
}

これで、矢印が綺麗に消えました。

AFFINGER、サイドバー矢印の非表示画面

次に、リンクをボタン風に装飾します。

サイドバーのリンクをボタン風に装飾するCSS

今回は、ボタン風の装飾を固定ページや投稿ページ内でも使いたいので、リンクマネージャーを使わずに装飾するソースを紹介します。

リンクにマウスオーバーすると色が変わる単純なボタン風の装飾をつけます。

▼リンクボタンの装飾表示サンプル（１行表示）

金儲け情報

CSSの編集

下記のソースをCSSに追加します。

▼リンクボタンの装飾CSSソース

/* サイドバーリストボタンの装飾
-----------------------------------------------------------------------*/
.ulButton ul {
	list-style-type: none;
}
.ulButton li {
	list-style: none;
	border-bottom: solid 1px #fff;
}
.ulButton a {
	background-color: #999;
	color: #fff;
	font-size: 16px;
	display: block;
	width: 93%;
	padding: 10px 10px;
	text-decoration: none;
}
.ulButton a:hover {
	background-color:#ccc;
}

９行目：「#999」で、普段のボタン色（濃い灰色）を指定。
10行目：「#fff」で、文字色（白色）を指定。
18行目：「#ccc」で、マウスオーバーした場合のボタン色（薄い灰色）を指定。

HTMLの追加

サイドバーウィジェットに「テキストボックス」を追加して、内容に下記のソースを貼り付けます。

AFFINGER、サイドバー装飾付きリンクボタンのHTMLソース貼り付け

▼リンクボタンの装飾表示HTMLソース（１行表示）

<ul class="ulButton">
<li><a href="リンク先URL" target="_blank">リンク先タイトル</a></li>
</ul>

行（リンク）を増やす場合は「<li><a href="リンク先URL" target="_blank">リンク先タイトル</a></li>」の部分を「<ul class="ulButton">」から「</ul>」の間に増やします。

▼リンクボタンの装飾表示サンプル（２行表示）

▼リンクボタンの装飾表示HTMLソース（２行表示）

<ul class="ulButton">
<li><a href="リンク先URL" target="_blank">リンク先タイトル</a></li>
<li><a href="リンク先URL" target="_blank">リンク先タイトル</a></li>
</ul>

綺麗にできましたね。

めでたしめでたし。

AFFINGER、サイドバー、ボタン風リンク装飾設置完了

このHTMLソースは、固定ページや投稿ページでも同じソースで貼り付けできます。

いろんな場所でお使いください。

ボタンの装飾のカスタマイズについては、また改めて記事を書きたいと思います。