【Stork】自作バナーをサイト下部に表示させる簡単な方法【ウィジェットを利用】

こんにちは〜!傘フォトグラファーのKamitani(@umbrellaly)です。

自作バナーがサイトの下部に表示できたら、少し印象も変わっていいかなと思い、バナーを作成し、ソロを表示させる方法を試しました。

  • プラグインなしで表示したい
  • コードとかわからない
  • Stork使ってる!!

こういった方に向けた記事内容になっています。

今回の方法は、記事ページで画像を挿入し、そこで生成されたコードをコピーして、ウィジェットの該当のスペースに貼り付けるやり方です。

プログラミングスキルや、コードに関しての知識がなくとも、非常に簡単に作成することができますので、初心者の方でもやりやすいかと思います。参考になれば幸いです。

スポンサーリンク

自作バナーをサイト下部に表示させる簡単な方法

今回自分で作成したバナーが下記のもの。

センスは置いといて、こんな感じのものを、AdobeのIllustratorで自作しました。笑
こういったデザインは難しいですね笑

このバナーをクリックすると、自分のTwitterページに飛べるように設定を行なっていきます。

手順を先にまとめると、下記のものです

  • 新規投稿ページを開く
  • メディア追加ボタンから、設定したいバナー画像を選択
  • 画像に、リンク先を指定する
  • 記事ページに戻り、テキストエディッタでコードをコピー
  • ウィジェットから、PC下部欄にコードを挿入

それぞれ実際の画像を元に説明していきます!

新規投稿ページを開く

まずは、新規投稿ページを開きます。

左上の「メディアを追加」ボタンをクリックして、画像ギャラリーを表示します。

バナー画像を選択

まだ、自分の設定したいバナー画像をワードプレス内へアップロードしていない人は、左上にある「ファイルをアップロード」からアップロードしてください。

アップロードができたら、設定したい画像をクリックして、右側の「添付ファイルの詳細」欄から設定をしていきます。

  • リンク先:カスタムURL
  • その下の空欄:リンク先URLを入力

今回の場合は、空欄の部分に、Twitterアカウントの自分のページのURLを入力します。

入力が完了したら、右下の「投稿に挿入」と書かれた緑のボタンをクリックして、完了します。

テキストエディッタでコードをコピー

挿入が無事完了すると下記の画面になります。

次に、右上のテキストボタンを押して、テキストエディターを表示します。

表示されたコードを全てコピーします。

ウィジェットを開く

ウィジェットを開き、「カスタムHTML」を選択します。

今回はトップページの下に表示させるので、「トップページ下部」選択して、「ウィジェットを追加をクリックします。

コードを貼り付ける

右端の「PC:トプページ下部」を洗濯して、先ほど追加した「カスタムHTML」に、テキストエディッターでコピーしたコードを、下記画像のように貼り付けます。

タイトルは、実際にページで表示されるタイトルになるので、表示させたいタイトルのものをきちんと入力してあげてください。

全て入力できたら。右下の保存をクリックします。

反映されているかを確認

保存できたら、トップページに行って、実際に挿入ができたかを確認してみましょう。
挿入がきちんと成功していたら、下記のようにきちんと表示されます。

ウィジェットの部分で、「PC:トップページ下部」を選択しましたが、「SP:トップページ下部にも同じ内容を記述して追加をすると、スマホ表示にも対応できます。

こんな感じで、スマホのトップページ下にもきちんと表示することができました。

非常に簡単にできますので、自分のブログのデザインやスタイルに独自性をもっと見出したい方は、ぜひお試しください!

Twitterアカウント始動

降り頻るNews・情報の雨 良くも悪くも明日は我が身!我が身を守るもまた我自身。
『貴方は傘をお持ちですか?』

いま、はじめよう。

最新情報をチェックしよう!