hamlでリンク先に飛べるボックスを作る方法

はじめに

今回は、railsにてhamlを用いてXのリンク先に飛べるボタンを作り方を簡単にまとめたいと思います。

１.HAMLでのリンク生成

まず、HAMLファイルでリンクを生成する方法についてです。
以下のコードでXとInstagramとTikTokリンクに飛べる箱ができます。

= link_to 'X', '<XのURL>', target: '_blank', class: 'box', rel: 'noopener'

簡単な説明

• link toヘルパーで指定したテキストが表示されます。上記の場合「X」のテキストで表示されます。
• link toの隣にリンク先のURLを記入します。（直接記入する場合）
• target: '_blank'　で新しくタブを開いて表示してくれます。
• class　でcssを適応させるようにします。
• rel: 'noopener'　も追加することでセキュリティを向上させることができます。

２. コントローラー設定

hamlで直接リンクを挿入した場合、コントーラーファイルに以下のコードを設定する必要があります。

@talent.x_url = '<XのURL>'

３. cssでスタイルの定義

以下のcssは基本的なスタイルになります。
あとは好みで追加してください！

.box {
  padding: 10px 20px;
  border: 1px solid #777;
  text-align: center;
  color: #333;
  padding: 8px;
}

まとめ

この記事では、Ruby on Railsを使用して、リンク先に飛べるものを作成する方法をご紹介しました。簡単なコードですが、実際のプロジェクトで多様に応用できる要素です。ぜひ使ってみてください。