Seesaaブログでサイドバーにリンクを貼る方法

Seesaaブログではサイドバーにリンクを貼る仕組みが用意されていませんので、自分で作る必要があります。

まず、管理画面から「デザイン」→「PC」→「コンテンツ」と進みます。

左端に「自由形式」というパーツがあるので、これをリンクを貼りたい場所にドラッグ&ドロップで持って行きます。右のサイドバーでも左のサイドバーでも、あるいは、奇想天外な記事下でもいいです(笑)。

歯車マークをクリックすると、パーツの中に表示したいコードが書けるエリアが「自由形式」という名称で出ますので、そこにHTMLで書きます。実際にリンクだけ書くと、みっともない形になりますので、自分でCSSを書いて調整するのも一手です。しかし、面倒なので、すでにテンプレートの中に書かれているCSSをそのまま利用するのが最善です。保証の限りではありませんが、これならテンプレートを変えても大丈夫かもしれません。

具体的にはこんな感じです。

<div class="sidetitle">リンク</div>
<div class="side"><a href="https://hotaruweblog.com/" target="_blank">ほたるのブログ</a></div>

「名前」の所に「リンク」などと書いておきます。これは表には出ませんので、わかりやすい名称を入れておけばいいです。表に出るのは、自由形式内に書かれたものだけです。

ポイントは、パーツの名称部分のクラスが「sidetitle」でパーツのコンテンツ部分が「side」ということです。

なお、リンクを記事下に載せたい場合は、上記のクラスは使えませんので、自分で適当なCSSを書いて調整することになります。

やってみるとおもしろいかもしれません。

なお、スマホやフィーチャーフォンの方にも同様にリンクを貼ることを忘れないようにしましょう。「デザイン」→「スマートフォン」→「コンテンツ」などと進みます。場所は記事下やヘッダーがよいと思います。

フォントサイズを指定しないと文字が小さくなる様です。remで指定します。別にpxやem等でもいいのですが、どうやらSeesaaブログではremを使っている様なので、rem(「root em」の略)にしておけばわかりやすいかもしれません。

スマートフォンの場合のコードの例

<div style="margin-top:20px;margin-bottom:20px;font-size:16rem;">リンク</div>
<div style="margin-top:0px;margin-bottom:20px;font-size:25rem;"><a href="https://hotaruweblog.com/" target="_blank">ほたるのブログ</a></div>

フィーチャーフォンの方は動作確認を行う環境を持っていないため、ここに掲載できません。個人的にはスマートフォンと同じコードにしています。

なお、こんなことを教えると、リンクを貼りまくりたくなるかもしれませんが、検索エンジンによりペナルティーが課せられる場合がありますので、御注意下さい。昔と違って、今時サイドバーにリンクを貼りまくる人はいません。

「リンクなんて貼らない方がいいよ。」

・・・と言うのが、ウェブ制作のプロの間では常識となっています。

もちろん、サイドバーにリンクを貼ることが、訪問者にとって有益であれば、ぜひ貼るべきです。