Flarum Adsプラグインを使ってウェブサイトの友好リンクサイドバーを作成する
4,469 0
まずはデモ画像で仕上がりを確認してみましょう。以下で操作方法を説明します。
- 管理画面で Ads プラグインを有効にします（何？アンインストールした？それなら、さようならです）。
- Ads 設定ページの「ホーム左側のノード欄下の広告位置」の下にあるコード入力欄に、以下のサンプルコードを入力します。
HTML 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 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 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> の前に入れればよいです）に貼り付けます。
- とても重要な手順です。2つ目の手順が完了したら、管理画面の「外観設定」-「カスタムスタイル」でボタンをクリックし、以下のコードを入力して保存します。
CSS 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 CSS
@media (max-width: 995px) {
.item-flagrow-ad .sideNav {display: none !important;}
}
コメント
(0)まだコメントはありません