こんにちは、るんです。
ふと、自分のブログ内のリンクをバナーで出してみたいなぁと思ったため、やってみることにしました。
今回は覚え書きということで、やり方を記事に残しておこうと思います。
目的
固定ページのプロフィールをもっとアピールしたい！ということで、サイドバーのプロフィールのところに、バナーを設置して固定ページで作ったプロフィールページのリンクを目立たせることにしました。
バナーとして使う画像の準備
画像を作る
まずは、バナーとして利用する画像を作成しました。
↑これはただの画像です。
画像の追加
これをWordPress側で利用できるように画像の追加を行いました。
メディア ＞ 新規追加 で画像の追加ができます。
画像情報の取得
このあと、この画像のリンクが必要となるので、リンクをコピーします。
メディア ＞ ライブラリ を確認すると画像一覧が表示されているので、バナーで使用する画像をクリックすると上の画像のような情報が出てきます。
この情報のリンクをコピーの部分をコピーします。
サイドバーにバナー表示
今回はサイドバーにカスタムHTMLを設置して、バナーを表示することにしました。
サイドバーにカスタムHTML設置
外観 ＞ ウィジェット からサイドバーの設定を行います。
私はサイドバーのプロフィールの下に今回のバナーを表示したかったので、そこにカスタムHTMLを設置しました。
今回は２つのHTMLの構文を使ってバナーを表示することにしました。
リンクの設定 a要素
HTMLでは、a要素でリンクの設定ができます。
<a href"sample.html">リンクの文字列</a>上記の文が基本の書式で、「 sample.html 」の部分にリンク先情報を記述します。「リンクの文字列」はリンクとして表示される文字を記述します。
画像の挿入 img要素
HTMLでは、img要素で画像の挿入を行います。
<img src="img/sample.png" width="320" height="150" alt="sample">上記の文では、src、width、height、altと４つの項目が設定されています。
srcに画像のパスの設定。
widthとheightは、幅と高さ。
altは、画像が表示できなかった時に代わりに表示する文字。
となっております。
実際にHTMLを書いてみる
HTMLを学んでない人からすると、ちんぷんかんぷんだと思いますが、大丈夫です。
次に書く文を調整するだけでできますよ！
<a href="リンク先のアドレス"><img src=" ここに画像の情報のリンクのコピーを張る " alt="プロフィールページへ"></a>↑この文の
「リンク先のアドレス」の部分をリンクさせたいページのアドレスに変更、
「 ここに画像の情報のリンクのコピーを張る 」の部分に、画像を追加した際にコピーしたリンクを張ってください。
入力が終わったら保存を押してください。
そうするとバナーが表示されると思います。
表示されない場合は、打ち間違いなど、どこかしら間違っているので見直しましょう。
バナーが表示されました。
↓こんな感じでバナーが表示されるようになりました！
まとめ
HTMLを少し勉強したおかげで、やりたかった表示ができました！
もしかしたら他にもっといいやり方があるかもしれませんが、自分で試行錯誤して挑戦してみた結果なので、私にとってはプラスかなと思っております。
プログラムは実際に自分で組んでみないと身につかないので、また勉強して自分なりにまとめていって、知識を深めていきたいなぁと思ってます。
それでは、今回はこの辺で。
またお会いしましょう♪
コメント