E002テンプレートの3つのボックス内にリンクを貼る方法

2015年2月24日 ()

目次

1.工夫次第でいろいろなリンク

E002テンプレートの3つのボックスは工夫次第でいろいろなものを記述できます ( ´∀`)
「オプション設定」にある、3つのボックスの各テキスト入力欄はHTMLコードが入力できるので、
wordpressのデフォルトにある、「テキスト」というウィジェットと同じような感覚で使用できます。
下の画像のように、CSSで作られたボタンを配置したり、テキストリンクを入れ込んだりお好きなものを挿入することが可能です。

Box_link_01

2.CSSボタンを表示させよう

上記の画像にある、左のボックスには「詳しくはこちら」と書かれた黄色のボタンが配置されています。
これは黄色のボタン用のCSSを新しく追加して、左のボックス用のテキスト入力欄にHTMLコードを入力しています。

追加したCSSは以下です。テンプレートのフォルダに入っている「style.css」に追加しています。

上記を追加したあとに、左ボックス専用のテキスト入力欄に以下を記述しました。

Box_link_02

上の画像の赤で囲ったテキスト欄に入力しています。

↑ で記載した部分がボタンのタグになっています。
そのボタンのタグをdivで囲み、そのdivに「style=”text-align:center”」を追加してボタンが中央に配置されるようにしています。

ボタンのCSSが作れるサイトなどもあります。
CSSボタンジェネレーター → http://www.bestcssbuttongenerator.com/
このようなサイトでをCSSを構成して、できたCSSを追加するとオリジナルのボタンを表示させることができます。

上記の黄色のボタンもcssジェネレーターでcssを作り、それを一部追加や変更してボタンを作りました。

3.テキストリンクを貼ろう

一番上の方で記載したとおり、3つのボックスのテキスト入力欄はHTMLタグが使用できます。

Box_link_03

↑ の真ん中のボックスと右のボックスは、テキスト入力欄にHTMLタグでテキストリンクが挿入されています。
リンクは下記のように、<a href= で始まるタグで構成されています。

リンクしたい文字を「<a href=」で始まるタグで挟むとリンクすることができます。
真ん中のボックスの入力欄に記述した内容は以下です。

右のボックスに入力したものは以下です。

「<a href=”リンクアドレス”>詳しくはこちら</a>」をdivで囲み、そのdivに「style=”text-align:right”」を追加して、
文字が右に配置されるようにしています。

テキスト入力欄にはHTMLが使えますが、wordpressは入力欄に記述されたものを
PHPでindex.phpなどのテンプレートファイルにそのまま反映しているので、
間違ったコードを記述するとサイトのレイアウトが崩れてしまいます。
よくあることは<div>タグの閉め忘れなどです。
間違って記述してしまい、レイアウトが崩れた場合はテキスト入力欄の中の記述を修正してください。