【SWELL】誰でも簡単！フッターのコピーライトをリンクにする方法

ケケンタ

こんにちは！　ケケンタです。

今回は

SWELLでフッターにあるコピーライトをリンクにする方法

をご紹介します。

コピーライトというと、通常はWebサイトの最下部に当たり前のように設置するイメージがあります。

今回は、このコピーライトにリンクを設定することで、別ページ（今回はトップページ）へのアクセスリンクの役割も持たせたいと思います。

ケケンタ

何気ない部分ではありますが、こうしたちょっとした工夫でサイト内の回遊率が上がったりするため、ご興味のある方はぜひお試しください！

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

SWELLでコピーライトを設定する方法

前提として、SWELLではどこでコピーライトを設定できるかご説明します。

SWELLでは「カスタマイズ」→「フッター」→「コピーライト設定」で簡単にコピーライトが設定可能です。

ケケンタ

このコピーライト、実はHTMLタグが使用可能です。

今回はHTMLタグを利用して、コピーライトにリンクを設定していきます。

【手順】コピーライトにリンクを設定する

STEPごとにコピーライトにリンクを設定する方法を解説していきます。

STEP

「カスタマイズ」→「フッター」→「コピーライト設定」を開く

まずは「コピーライト設定」を開きます。

STEP

「コピーライトのテキスト」にHTMLタグを記述する

次に、コピーライトのテキストに下記の内容を記述します。

任意のテキスト<a class="my-footer-copyright" href="トップページのリンク">任意のテキスト</a>

設定例

2023-2024 <a class="my-footer-copyright" href="https://kekenta-it-blog.com">ケケンタの独学ITブログ.</a>

ケケンタ

ただし、このままでは設定によってはリンク部分の色だけ変わってしまうため、最後にSTEP３で「追加CSS」でCSSを追記していきます。

STEP

「追加CSS」にCSSを記述する

もしSTEP２完了時点でのテキストカラーで問題無ければこのSTEP３は飛ばしてしまって大丈夫です。

「追加CSS」に以下のCSSを追記します。

.my-footer-copyright {
	text-decoration: none;
	color: カラーコード !important;
}

設定例

.my-footer-copyright {
	text-decoration: none;
	color: #fff !important;
}

「カラーコード」の部分は「カスタマイズ」→「フッター」→「フッター文字色」で設定しているカラーコードを記述して下さい。

カラーコードの確認箇所

ケケンタ

以上でコピーライトにリンクを設定することができました！

まとめ

今回はSWELLでコピーライトにリンクを設定する方法をご紹介しました。

何気ない部分ではありますが、こうした工夫がサイト内の回遊率を高めることに繋がります。

ケケンタ

この記事がお役に立ったなら何よりです。

最後までご覧いただきありがとうございました。

SWELLのその他の記事はこちら

 SWELL記事一覧

今回ご紹介した内容のテーマ 

SWELLを見てみる　>>