最新記事を久々に書きました
最新記事を久々に書きました
副業アフィリエイトで給料以上稼げるようになった4つのコツを暴露します(2017年最新版)
副業アフィリエイターがアフィリエイトでサラリーマン収入以上を稼ぐ秘密を、全て暴露します。 副業アフィリエイトで...

4.4 サイドバーをHTMLを使ってカスタマイズする方法

本記事ではHTMLコードを利用してサイドバーをカスタマイズする方法を説明し,本サイトの追従領域をどのように作成しているかを紹介します.

サイドバーを自由にカスタマイズする方法

WordPressやSimplicity2の場合,記事を書く画面ではビジュアルモードがあるため,文字の色を変えたりといった複雑な設定を簡単に行なうことができます.

ビジュアルモードはHTMLコードでいちいち書かないといけないところを,ボタンで一発で実現できるようにしてくれているます.

しかし,サイドバーの場合は記事のようにビジュアルモードがなく,ボタンでHTMLを設定することができないため,複雑なことをするには自分でHTMLコードを書いてあげる必要があります.

ですが心配しないでください.難しくはありません.

最初はとっつきづらいのですが,その最初の導入のところを本記事で丁寧に説明するので,読み終わるころには自分でいろいろできるようになっていると思います.

サイドバーに新たな見出しを設定する方法

本記事では追従領域をいろいろとカスタマイズしていきます.追従領域とは画面をスクロールしても付いてくる領域で,いつも表示しておきたいパーツを設置しておく場所です.

注意ですが,追従領域にGoogle Adsenseを貼り付けるのは違反なので気をつけてください.

本サイトの以下の部分を作成する方法を説明します.

161020_side9

①管理画面から「外観→ウィジェット」を選択します.

161107_1

②画面左部の下の方に「テキスト」というパーツをクリックし,「スクロール追従領域」を選択して,下にある「ウィジェットを追加」をクリックします.

161107_2

③画面右側のスクロール追従領域の中に「テキスト」ができるのでそれを一番上に配置し,クリックして編集枠を表示させます.テキストの場合は「タイトル」という設定項目がありますのでここに文章を書けば見出しが作成できるのですが,タイトルがないパーツもあるので,HTMLコードで見出しを作成する方法を紹介します.

161107_3

④追従領域の冒頭に「初心者におすすめ」という見出しを作成します.Simplicity2ではサイドバーの見出しはh3タグで囲まれています.h3とはHTMLコードで見出しの種類を表すもので,h1は記事タイトルに使用されています.「内容」の部分にHTMLコードで設定を書きます.見出しとして,

と書きます.この<h3>で囲むことで,囲まれた文字が見出しに設定されます.

161020_sidee8

⑤次に通常の文章と改行が書かれています.通常の文字はそのまま入力すれば良いのですが,改行するにはHTMLコードの改行コードである<br>を入力してあげます.breakの略語です.

⑥最後に画像リンクを入れます.以下のように書かれています.前半の href=で書かれた部分がリンク先となり,src=で書かれた部分が画像のURLです.

画像のURLは管理画面から「メディア→ライブラリ」を選択肢,挿入したい画像をクリックすれば右側に表示されます.

161020_side10

サイドバーの見出しデザインを編集する方法

見出し部分の見た目を変えるには,スタイルシートから変更します.

①管理画面から「外観→テーマの編集」を選択します.

②そしてスタイルシートに以下のコードを書き足します.

以上により,見出しの背後に薄い丸四角をつけることができます.このコードをいろいろいじれば,様々な見出しのデザインが実現できます.

以上により本サイトの追従画面の上側部分を再現することができます.

サイドバーに広告を自由に貼り付ける方法

次にサイドバーに自由に広告を貼り付ける方法を説明します.

本サイトでは小さな広告2つを横にならべて貼り付けています.Simplicity2のウィジェットのパーツにはこのような設定をすることはできないため,これも自分でHTMLコードを自分で書いて実現します.以下の図のような画面を作成する方法を説明します.

161020_side11

①管理画面から「外観→ウィジェット」を選択します.

161107_1

②画面左部の下の方に「[S]パソコン用広告ユニット」というパーツをクリックし,「スクロール追従領域」を選択して,下にある「ウィジェットを追加」をクリックします.

161107_4

③画面右側のスクロール追従領域の中に「[S]パソコン用広告ユニット」ができるのでそれをクリックして編集枠を表示させます.

161107_5

④まず文章を以下のように入力します.

⑤次にASPの広告のHTMLを2つ貼り付けます.2つが横に並ぶようにサイズに注意してください.この場合,幅が125pxのものを使用しています.

以上で広告部分を作成することができました.

最後に同様に「[S]パソコン用広告ユニット」をもうひとつ用意してアマゾンアソシエイトの広告HTMLを貼り付ければ本サイトの追従領域が完成します.

HTMLコードを書くのはとっつきづらいですが,やってみるといろいろ簡単ですし,ネット上にもたくさん情報があるので,検索すればどんなコードを貼りつければ良いかすぐに分かります.

以上でサイドバーの設定は終了です.本サイトのサイドバーと同じものが作成できるようになったと思います.

次回はサイトのサイドバー以外の部分,記事中に広告を挿入する方法を説明します.

4.5 サイト内に広告を配置する方法 | Simplicity2の場合
本記事ではサイト内全体に広告を配置する方法について説明します.配置場所としてサイドバーの最上部,追従領域,記事下,記事中に配置する方...

スポンサーリンク