SEO

【初心者ブロガー】あわせて読みたいタグの設置方法と色の変更

 

ブログをはじめて数週間、もしくは数日で自分のブログをカスタマイズしたいと思い始めたとき、直面する「あわせて読みたい」タグの設置。CSSをいじったことがないしプログラミングの知識もない初心者でも安心して使えるようにタグの設置方法から色の変更方法まで解説していきます。

 

あわせて読みたいタグの設置方法【事前準備編】

始める前にここで解説する方法に使用するプラグイン「AddQuicktag」を有効化しておきましょう。このプラグインは記事投稿画面上で超簡単に『あわせて読みたいタグ』を呼び出せるプラグインです。後半で解説していきます。

 

あわせて読みたいタグの設置方法【CSS編】

ここではCSSにタグを入れることで簡単に設置できる方法を解説していきます。まずはwordpressのダッシュボードからCSS編集をクリック。

CSS編集をクリックした後は「追加CSS」という画面に映ります。見出しタグの設定をしたことがある人なら少し馴染みがあるかもしれませんね。追加CSS空欄内の一番下にタグを貼り付けていく作業です。

ここに貼り付けるタグはこちらです。

【完成イメージ】

 

.entry-content .emphasize-link {
  position: relative;
  margin: 36px 0 16px;
  padding: 16px 10px;
  border: 2px solid #df8182;
  background-color: #fffbf5;
}
.entry-content .emphasize-link p:last-child {
  margin-bottom: 0;
}
.entry-content .emphasize-link::before {
  position: absolute;
  top: -12px;
  left: 10px;
  padding: 0 10px 0 26px;
  content: "あわせて読みたい";
  background-color: #df8182;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}
.entry-content .emphasize-link::after {
  position: absolute;
  top: -16px;
  left: 4px;
  width: 28px;
  height: 28px;
  background-color: #df8182;
  border-radius: 14px;
  line-height: 25px;
  text-align: center;
  content: "\f010";
  font-size: 18px;
  font-family: "blogicon";
  color: #fff;
}

引用元:https://www.notitle-weblog.com/entry/2017/01/16/205403

これができたら上の「公開」を押して設定を保存しましょう。第一段階クリアです。おめでとうございます。

 

あわせて読みたいタグの設置方法【プラグイン編】

CSSの編集ができたら次は簡単に使えるようにするために冒頭でご紹介した「AddQuicktag」の設定をしていきます。『設定』からAddQuicktagを選択してください。

選択するとこのような画面が出てくるので画像を参照して打ち込んでいきましょう。

以下が「タグの設置」の欄に埋め込むタグです。コピペで大丈夫です。開始タグのところに『…………..”>タイトル』までを入れて、終了タグのところに以降の『</a></p>』を入れます。

 

<p class=“emphasize-link”><a href=“リンクのURL”>タイトル</a></p>

 

呼び出すボタンの名前は自由に決めていただいて大丈夫です。「関連記事」や「あわせ読み」などでいいと思います。チェックを入れるところまで済めばほぼ完成間近です。あと3分で完成しますよ!!

 

あわせて読みたいタグの設置方法【呼び出し編】

あとは投稿画面にわくわくしながら行ってみましょう。するとこんなボタンが追加されています。

先ほど自分できめた名前のボタンが追加されています。テキスト画面に切り替えて<p class=“emphasize-link”><a href=“リンクのURL”>タイトル</a></p>』のURLとタイトルを入れてプレビューしてみるとこんなかんじになります。

 

 

これでひとまず完成ですね。一息ついて茶菓子でも頬張りましょう。

 

あわせて読みたいタグの設置方法【色の部位ごとの変更編】

先ほどCSS側で設定したタグを見てみましょう。この中で色に関係している部分を違う色のタグ(カラーコード)に変えることで自分好みにアレンジすることができます。タグ内の『back ground -color』という文字の後ろについてある『#fffbf5』みたいな部分がカラーコードです。先ほどのタグでは部位ごとに色が変えられる仕様になっているので解説していきます。

まずはじめにこちらのサイトから好きなカラーを選んで、カラーコードをゲットしましょう。

色見本と配色サイト

赤矢印がカラーコードになります。コピーして自分のwordpressダッシュボードに戻ってきてください。先ほどの手順と同じで『外観』→『CSS編集』をクリックし、編集画面にいきましょう。いま設定してあるタグには『back ground -color』が3つほどあり、部位ごとに変更できる色が違います。

わかりやすく黒でいきましょう。コードは「#000000」です。

1番上の『back ground-color』を変更してみる

背景が真っ黒ですね!!!つまり一番上のback ground -colorは「背景の色の変更」ということがわかりました。お次はその下にあるback ground -colorを変更してみましょう。

 

2番目の『back ground-color』を変更してみる

2つ目は『あわせて読みたい』の字のまわりが黒くなりましたね!では一番最後のback ground -colorを変えてみましょう。

 

3番目の『back ground-color』を変更してみる

アイコンが黒く変わりました。3つ目はアイコンを指定するタグです。