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

Image

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

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

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

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

Image

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

Image

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

Image

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

Image

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

Image

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

Image

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

Image

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

Image

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

Image

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

Image

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

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

Image

ソースはこんな感じ

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

Image

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

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

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

追加した部分ですが、

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

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

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

これで表示したのが、

Image

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

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. […] 情報源: WordPressサイトにサイドバナーを貼り付ける | RYUS blog […]

  2. hammerbeat6 より:

    参考になりました!
    ありがとうございました!

    • 兎本 美佳 より:

      hammerbeat6さん、こんにちは(^^)/。参考になったということおしえていただき、ありがとうございます!はげみになります♪

  3. hayashida より:

    初めてワードプレスで仕事をすることになり困っていました。
    とても参考になりました。ありがとうございます。

    • 兎本 美佳 より:

      hayashidaさん、こんばんは!何かの役に立ったようで嬉しいです(^-^)/。コメントありがとうございました!

  4. […] WordPressサイトにサイドバナーを貼り付ける […]

トップへ戻る