AFFINGER5 ブログ

【AFFINGER5】超初心者でも簡単!自分好みのバナーを作成する方法

2020年2月16日

バナーを作って、好きなサイトに誘導したいだけど、

バナーの作り方がわからないよ~

僕はバナーを作って、Twitterへの誘導を図りました!

そのやり方を教えましょう!

 

本記事の内容

  • バナーの作り方
  • 作ったバナーを反映させる方法

記事を読んでくれた人が、自分で作ったバナーから別のサイトに飛んでくれて

 

さらにいいサイトを紹介できたら嬉しいですよね!

 

今回はそんなバナーを使った方法を紹介します。

 

本記事の信憑性

ブログ開設1か月の僕が作れたので、誰でも簡単に作れると思います!

 

バナーの作り方

まずはバナーを作っていきましょう。

バナーの作り方は、前回紹介した、ロゴの作り方と似ているのでそちらの記事を参考にしてみてください。

読んでね!
ロゴ作成
【画像付き】【初心者必見!】おしゃれなロゴを作成する方法

ブログを始めたのはいいけど、ロゴの作り方がわからないよ~ 今回はそんなブログ超初心者でも簡単に、ロゴを作成できるやりかた ...

続きを見る

 

僕が作ったバナーがこちらです。

 

僕は自分のブログからTwitterへのリンクバナーが作りたいと思い、こちらのバナーを作りました。

プロフィールにもTwitterのリンクはありますがどこか物足りない感じがあったので、

自分で作っちゃいました!

バナーの反映方法

 

「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」を選択してください。

すると、コードが出てくるのでそこを編集していきます。

メモ

僕を始め、初心者の方は今までコードを触ってきたことがない方も多いと思います。

コードを見ただけでわからん!!と投げ出したくなりますが、1つずつ見ていくと、

なんだ!そんなもんか!と思えるので、ゆっくり見ていきましょう!

 

初心者がコードを1つずつ解説

st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]

[/st-flexbox

※上記コードの始めと終わりに[]が付きます。

僕のTwitterバナーの場合、編集するコードの部分は

最初のst-flexbox url=""backgroud_image=""の2か所だけです!

st-flexbox url=""には、訪問者に飛んでほしいサイトのURL

st-flexbox url=""の部分にはサイトのURLを貼りつけましょう。

僕の場合、Twitterなので、僕のTwitterのプロフィールのURLをコピペしました。

backgroud_image=""にはバナーの背景にしたい画像のURL

続いてはバナー内の背景画像を決めましょう。

僕の場合はあらかじめ、画像に入力したい文字を入れていたので、そのまま貼るだけでした。

「メディア」から自分が背景にしたい画像をUPします。
そして右側にある、「ファイルのURL」にあるURLを全てコピーします。

そのURLを上記の「""」の中に画像のURLを貼り付けます。

注意ポイント

画像URLを貼り付ける際は、ビジュアルではなく、テキストで貼り付けましょう!

 

すると、バナーが完成します。

プレビューで確認しましょう!

確認した、コードができていれば、問題ありません!

そのコードがをコピペして自分が貼りつけたい箇所に挿入し完成です!

 

お疲れ様でした!

-AFFINGER5, ブログ
-, ,

Copyright© 旦那は専業主夫になりたい , 2020 All Rights Reserved Powered by AFFINGER5.