---
title: "Flarum Adsプラグインを使ってウェブサイトの友好リンクサイドバーを作成する - 憂いを忘れる一枚"
description: まずはデモ画像で仕上がりを確認してみましょう。以下で操作方法を説明します。
canonical_url: "https://www.ikxin.com/ja/article/flarum-ads-links-sidebar"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": まずはデモ画像で仕上がりを確認してみましょう。以下で操作方法を説明します。
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIEFkc-ODl-ODqeOCsOOCpOODs-OCkuS9v-OBo-OBpuOCpuOCp-ODluOCteOCpOODiOOBruWPi-WlveODquODs-OCr-OCteOCpOODieODkOODvOOCkuS9nOaIkOOBmeOCiyAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~RmxhcnVtIEFkc-ODl-ODqeOCsOOCpOODs-OCkuS9v-OBo-OBpuOCpuOCp-ODluOCteOCpOODiOOBruWPi-WlveODquODs-OCr-OCteOCpOODieODkOODvOOCkuS9nOaIkOOBmeOCiw%2Cdescription_~44G-44Ga44Gv44OH44Oi55S75YOP44Gn5LuV5LiK44GM44KK44KS56K66KqN44GX44Gm44G~44G-44GX44KH44GG44CC5Lul5LiL44Gn5pON5L2c5pa55rOV44KS6Kqs5piO44GX44G-44GZ44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS1hZHMtbGlua3Mtc2lkZWJhciI%2Cs_W66Cw4ih-HXafC7T.png"
  "og:image:alt": "Flarum Adsプラグインを使ってウェブサイトの友好リンクサイドバーを作成する - 憂いを忘れる一枚"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Flarum Adsプラグインを使ってウェブサイトの友好リンクサイドバーを作成する"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIEFkc-ODl-ODqeOCsOOCpOODs-OCkuS9v-OBo-OBpuOCpuOCp-ODluOCteOCpOODiOOBruWPi-WlveODquODs-OCr-OCteOCpOODieODkOODvOOCkuS9nOaIkOOBmeOCiyAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~RmxhcnVtIEFkc-ODl-ODqeOCsOOCpOODs-OCkuS9v-OBo-OBpuOCpuOCp-ODluOCteOCpOODiOOBruWPi-WlveODquODs-OCr-OCteOCpOODieODkOODvOOCkuS9nOaIkOOBmeOCiw%2Cdescription_~44G-44Ga44Gv44OH44Oi55S75YOP44Gn5LuV5LiK44GM44KK44KS56K66KqN44GX44Gm44G~44G-44GX44KH44GG44CC5Lul5LiL44Gn5pON5L2c5pa55rOV44KS6Kqs5piO44GX44G-44GZ44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2ZsYXJ1bS1hZHMtbGlua3Mtc2lkZWJhciI%2Cs_W66Cw4ih-HXafC7T.png"
  "twitter:image:alt": "Flarum Adsプラグインを使ってウェブサイトの友好リンクサイドバーを作成する - 憂いを忘れる一枚"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **Flarum Adsプラグインを使ってウェブサイトの友好リンクサイドバーを作成する**

2018.07.29 4,590  0

まずはデモ画像で仕上がりを確認してみましょう。以下で操作方法を説明します。

![デモ画像](https://www.ikxin.com/_ipx/animated_true&w_1734&f_webp/https://img.8b5.cn/2019/06/27/5d14610643f8d.png)

1. 管理画面で Ads プラグインを有効にします（何？アンインストールした？それなら、さようならです）。
2. Ads 設定ページの「ホーム左側のノード欄下の広告位置」の下にあるコード入力欄に、以下のサンプルコードを入力します。

 HTML

```
<div class="sideNav links">
  <a>
    <i class="fa fa-link Button-icon"></i>
    <span class="Button-label">友情链接</span>
  </a>
  <li class="Dropdown-separator"></li>
  <ul class="links-list">
    <li>
      <img src="" width="16" height="16" />
      <a href="https://www.baidu.com/" target="_blank">百度</a>
    </li>
    <li>
      <img src="" width="16" height="16" />
      <a href="http://www.163.com" target="_blank">网易</a>
    </li>
    <li>
      <img src="" width="16" height="16" />
      <a href="http://music.163.com" target="_blank">网易云音乐</a>
    </li>
  </ul>
</div>
```

サンプルには3つのURLが追加されています。各URLについて変更する必要があるのは3か所で、URLリンクが2つ、アイコンリンクが1つ、そしてサイト名です。百度のリンクを当サイトに変更する例を見てみましょう。

変更前：

 HTML

```
<li><img src="https://a.5e.cx/getFavicon/?url=https://www.baidu.com/" width="16" height="16" /><a href="https://www.baidu.com/" target="_blank">百度</a></li>
```

変更後：

 HTML

```
<li><img src="https://a.5e.cx/getFavicon/?url=https://www.ikxin.com/" width="16" height="16" /><a href="https://www.ikxin.com/" target="_blank">Notte博客</a></li>
```

注意：最初のリンク位置を変更する際は、`https://a.5e.cx/getFavicon/?url=` の後ろの部分を変更します。このリンクはウェブサイトのアイコンを取得するためのものなので、誤って削除しないでください。また、HTMLの基礎知識がない場合は、各ウェブサイトの完全なコードが `<li>` で始まり、`</li>` で終わることに注意してください。

友好リンクが3つでは少ないと感じる場合は、上記の方法（テキスト編集ツールの使用をおすすめします）でコードを書き終えたら、コード全体の最後にある `</li>这里</ul></div>`（つまり、1つ追加するごとに `</ul>` の前に入れればよいです）に貼り付けます。

3. とても重要な手順です。2つ目の手順が完了したら、管理画面の「外観設定」-「カスタムスタイル」でボタンをクリックし、以下のコードを入力して保存します。

 CSS

```
.links {margin-top: 10px;}
.links .links-list {margin-top: 10px;}
.links .links-list a {position: absolute; margin-left: 10px; line-height: 16px;}
```

これでチュートリアルは完了です。

何？友好リンクを配置した後に広告画像も配置したい？広告画像のコードを私のこのコードの後ろに貼り付ければいいだけではありませんか？

補足として、カスタムスタイルを1つ紹介します。スマートフォンで閲覧すると、この友好リンクモジュールがホームページの上部に直接表示されて少し目障りなので、以下のCSSを追加してスマートフォンで閲覧した際に非表示にします。

 CSS

```
@media (max-width: 995px) {
  .item-flagrow-ad .sideNav {display: none !important;}
}
```

## **コメント**

(0)

まだコメントはありません

## **コメントを投稿**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/flarum-ads-links-sidebar#webpage","@type":"WebPage","description":"まずはデモ画像で仕上がりを確認してみましょう。以下で操作方法を説明します。","name":"Flarum Adsプラグインを使ってウェブサイトの友好リンクサイドバーを作成する","url":"https://www.ikxin.com/ja/article/flarum-ads-links-sidebar","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/flarum-ads-links-sidebar"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.