当サイトには広告が含まれております

WordPressサイトにサイドバナーを貼り付ける

この記事は最終更新日から10年経過しています。内容が古い可能性があります。

Image

コワーキングスペース八王子 8Beat」はメンバー8人で運用しています。IT業者が多いのですが、日常的にWordPressを使っていない人も多く簡単なことでもマニュアル化しておいた方がいいのかと思いました。先日聞かれたサイドバナーの貼り方を書きます。

記事をざっと見る

Makuakeというクラウドファンディングサービスへのリンクをバナーで貼る

8Beatでは現在、Makuakeというクラウドファンディングサービスを利用して「八王子にこんな場所が出来るなんて!コワーキングスペースに新品モニタを入れて欲しい」という支援募集をしています。このページへのリンクをバナーで貼りたいと思います。

画像をアップしてリンクを付ける

Image

ダッシュボード メディア>新規追加 をクリック、

Image

ここから画像をアップします。

Image

外観>ウィジェット をクリック。

Image

利用できるウィジェットからテキストをクリックして、

Image

表示したい位置にドロップします。

Image

入力欄が開きますので、画像を貼り付けるソースを書きます。画像のurlは、

Image

メディア>ライブラリ で、

Image

表示された一覧から使いたい画像をクリック

Image

url欄をコピーしたものを使います。

Image

入力欄にこんな感じで画像を貼り付けます。ソースはこんな感じ、

<img src="コピーした画像のurl">

これで画像が貼れました。後はリンク先を指定します。

Image

ソースはこんな感じ

<a href="リンク先のurl" target="_blank">
<img src="コピーした画像のurl">
</a>

です。リンク先を別画面で開きたかったので target=”_blank” というターゲット指定をしました。この状態で表画面を見てみると、

Image

画像が貼られました。クリックすると該当のページにリンクします。

あとほんのちょっと手を加えてボタンっぽくしたり文章を追加してみました

これで機能は備わったのですが、バナーの背景色が白なのでどこがボタンなのかちょっとわかりにくいなと思いました。また、ちょっと説明する文章も入れてみました。

<a href="https://www.makuake.com/project/8beatcoworking/" target="_blank">
<div style="width:100%;text-align:center">
     <div style="padding:5px;border:solid #f3e631 1px;">
     <img src="http://8beat.tokyo/wp-content/uploads/2014/11/maku_logo.png">
     </div>
</div>
</a>

<div style="text-align:center">皆様のご支援で8Beatをもっと素敵に!</div>

追加した部分ですが、

<div style="width:100%;text-align:center">
…
</div>

で、幅を100%にして、中央寄せを指定します。

<div style="padding:5px;border:solid #f3e631 1px;">
…
</div>

で、枠線を黄色(#f3e631)の1px実線にして、5pxの内側の余白(padding)を指定しています。

<div style="text-align:center">皆様のご支援で8Beatをもっと素敵に!</div>

この部分で、バナーの下に1行文章をセンター寄せで入れました。

これで表示したのが、

Image

こんな感じでボタンっぽくなったようです!

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (6件)

コメントを残す

記事をざっと見る