検索エンジンとアフィリエイトに強い無料テンプレート【AFFINGER】のサイドバーの矢印を消して、リンクに装飾をつけるCSSの編集方法です。同じテンプレートを使っているサイトとの差別化することで集客アップにつながります。
検索エンジンとアフィリエイトに強いと評判のENJIさんが無料配布しているWordPressのテンプレートですが、人気のテンプレートですからそのまま使用すると他人のサイトとの差別化が難しくなる可能性があります。
そんな理由で、せっかく綺麗につけていただいているサイドバーの矢印を非表示にして、リンクに装飾をつけるカスタマイズを施します。
ENJIさんごめんなさい...
注意点
テーマファイルのソースを改変しますので、失敗するとサイトが表示されなくなる可能性があります。
必ず、ファイルのバックアップを取っておきましょう。
▼バックアップに必要なファイル
- style.css
環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。
▼この記事の環境
- WordPress 4.3-ja
- STINGER 5、AFFINGER
- Google Chrom
※追記:AFFINGERは有料になり、無料ダウンロードは終了したようです。
AFFINGER PACK3(WING対応)
ボタンの装飾を外す
[外観]→[テーマの編集]で「スタイルシート(style.css)」の編集画面を開く。
キーボードで「command+F」を押すと検索フィールドが表示されます。
※Windowsの場合は「ctr + F」だそうです。
フィールドに「#side aside ul li ul li」と入力してするとそのソースがマーキングされて表示されます。
このソースの「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です。
編集したら[ファイルを更新]をクリック。
▼変更前
#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; }
これで、矢印が綺麗に消えました。
次に、リンクをボタン風に装飾します。
サイドバーのリンクをボタン風に装飾するCSS
今回は、ボタン風の装飾を固定ページや投稿ページ内でも使いたいので、リンクマネージャーを使わずに装飾するソースを紹介します。
リンクにマウスオーバーすると色が変わる単純なボタン風の装飾をつけます。
▼リンクボタンの装飾表示サンプル(1行表示)
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; }
- 9行目:「#999」で、普段のボタン色(濃い灰色)を指定。
- 10行目:「#fff」で、文字色(白色)を指定。
- 18行目:「#ccc」で、マウスオーバーした場合のボタン色(薄い灰色)を指定。
HTMLの追加
サイドバーウィジェットに「テキストボックス」を追加して、内容に下記のソースを貼り付けます。
▼リンクボタンの装飾表示HTMLソース(1行表示)
<ul class="ulButton"> <li><a href="リンク先URL" target="_blank">リンク先タイトル</a></li> </ul>
行(リンク)を増やす場合は「<li><a href="リンク先URL" target="_blank">リンク先タイトル</a></li>」の部分を「<ul class="ulButton">」から「</ul>」の間に増やします。
▼リンクボタンの装飾表示サンプル(2行表示)
▼リンクボタンの装飾表示HTMLソース(2行表示)
<ul class="ulButton"> <li><a href="リンク先URL" target="_blank">リンク先タイトル</a></li> <li><a href="リンク先URL" target="_blank">リンク先タイトル</a></li> </ul>
綺麗にできましたね。
めでたしめでたし。
このHTMLソースは、固定ページや投稿ページでも同じソースで貼り付けできます。
いろんな場所でお使いください。
ボタンの装飾のカスタマイズについては、また改めて記事を書きたいと思います。