わたしゃのぉ、古の時代にブログをやっていたんじゃ(黒歴史)
で、その際にサイドバーにベタベタと「リンク集」なるものを作成して、友人のブログリンクを貼ったものじゃよ(懐古終了)。
ところで・・、
「Classic Widgets」プラグインを適用していない方は、若干表記した項目が違うかもしれない。悪しからず。
その他の導入プラグイン内容を知りたい方は、こちらの記事をご覧ください。
追記:長くなったから2つに分けますわ。 WordPressの機能拡張・補助編はこちらからどうぞ。 このサイ [?]…
サイドバーエリアにウィジェットを追加
WordPress左側ダッシュボードの🖌外観 >ウィジェット
>カスタムHTML(またはテキスト)の設置位置をサイドバーエリアに選択し、ウィジェットを追加
追加したら、サイドバーエリアを展開し、カスタムHTMLを展開する。
このようなウィジェットが追加された。ここで、「タイトル」と「リンクを貼りたい内容」を記載していく。
タイトルは普通に「リンク」でよいと思う。
内容はHTMLコードを書かなければならない。
このページを見ているのが古の時代を生きたオタクならば、そう難しくないだろう。
イテテテテテ
9999の タ”メーシ”を うけた! ▼
テキストの場合は、「ビジュアル」「テキスト」と選択できると思うので、「テキスト」で内容を入力して、「ビジュアル」で内容プレビューができる。
プレビューできるテキストの方が初心者には使いやすいかと思う。
(カスタムHTMLで紹介しててごめん)
ウィジェットの内容部分にHTMLコードを書く
主に使うタグを4つ記載しよう。
aタグ <a>
imgタグ <img>
フォントタグ <font>
改行タグ <br>
段落タグ <p>を使った方が綺麗なんだろうな~。まあいいや。
上に挙げたHTMLタグのうち、<img>、<br>に終了タグは要らない(特殊)。
通常読みではないものだと思ってください。
「HTML」について他サイトで調べればわかりやすい解説がいくらでも出てくる。
なのでここでは「コピペして中身を改変して使え」という感じでしか書きません。
はい。
<a href=”リンクしたいサイトのアドレス(URL)をここに入れる”><font size=”4″>リンク先のサイト名を入れる</font></a>
<a href=”リンクしたいサイトのアドレス(URL)をここに入れる”><img src=”リンク用の画像を用意して入れる”><font size=”4″>リンク先のサイト名を入れる</font></a>
?
意味不明だぞ。
「リンク用の画像」ってなんだよ。
ごめん。
リンク用の画像は、「OGP画像」にすればいいから。
???
全然わからないぞ。
Facebook、Twitter、LINEなどのSNSでシェアした際に、タイトルと画像とリンクのカードのようなものがペーストされる。
その「カードのようなもの」のこと。
小難しく言うんじゃねェェ~!(#^ω^)
で、OGP画像とやらはどこで取得すればいいんだ?
「ogp画像 確認」で検索。
出てきたツール自体に大差はないので、どれを使ってもよろし。
URLを入力すると各SNS(facebook・twitter・はてなブックマーク・LINE)でページをシェアした際のOG…
OGP画像を取得する
「URL」欄にリンクしたいサイトのアドレス(URL)を貼り付ける。
程なくして様々なSNSでシェアした際の結果が表示される。
で、SNSの種類はどうでもいいので、「リンクしたいサイトのアドレス(URL)」と「リンク用の画像(OGP)」をコピーする。
さっきの「コピペすればいける」ようにしておいた、画像入りでリンクを作成するに入れる。
こんな感じ。
これをカスタムHTMLウィジェットの「内容」に入れて、保存を押せば出来上がり。
(作業終了)
サイトを表示して確認する。
はい。画像付きリンクができました。ちょっとアレンジを入れました。
他に、「リンク文字色の変更」や、「紹介する文書を入れたい」場合は、<br>タグを使ったり、タグの組み合わせ位置を変えるなりすれば良い。