初マタさん必見!ベビー用品最大10%OFFにする方法 チェック

【SWELL】もしもアフィのHTML&CSSパーツを掲載する方法

もしもアフィリエイトのHTML&CSSパーツをブログに掲載したいけど、やり方がわからない!

こんにちは。1児のママのにこです。誰かが配布しているHTML&CSSパーツをブログ(SWELL/Wordpress)に追加・掲載する方法を紹介します。

▼たとえば、こういうやつを追加できます!もしもアフィリエイトの「生協」のパーツを追加してみました。

目次

HTML&CSSパーツを掲載する方法

にこ

すでに誰かが配布しているHTML&CSSパーツをブログ(SWELL)に反映する方法です。HTMLやCSSを知らなくてもコピペでできますよ!

準備:<head>内にタグを追加

挿入するタグのイメージ
挿入するタグのイメージ

HTMLをただしく表示するために、<head>内にタグの追加が必要な場合があります。

外観>カスタマイズ>高度な設定>「headタグ終了直前に出力するコード」を選択

まずは外観から「カスタマイズ」を選択
まずは外観から「カスタマイズ」を選択
カスタマイズから「高度な設定」を選択
カスタマイズから「高度な設定」を選択
タグをheadに挿入し、公開を押す。

headタグ終了直前に出力するコードの箇所に、必要なタグをコピペします。忘れずに「公開」を押しましょう。

CSSをコピペする

次に、CSSをブログ記事ページに設定します。CSSは、記事編集ページの下部にあります。そのボックスに必要なCSSをコピペしましょう。

CSSコードをCSSエリアに貼り付けます

HTMLを挿入する

最後にHTMLを、パーツを表示させたい場所に「カスタムHTML」で挿入します。

STEP
HTMLをコピペしておく

最初に貼り付けたいHTMLをコピペしておくと便利です。

STEP
挿入したい場所にカスタムHTMLを設置

HTMLは、記事本文にそのまま貼り付けても、HTMLとしては表示されません。

記事の中にHTMLを設置したい場合は「カスタムHTML」を利用します。

SWELLなら 新しい段落で 「/html」 と入力すると、カスタムHTMLが挿入できます。

カスタムHTMLを表示させる方法
HTMLフォームが表示されます
STEP
HTMLを貼り付ける

さきほどコピペしたHTMLを「カスタムHTML」のフォームに貼り付けます。

HTMLを貼り付けたイメージ
にこ

これで、HTML&CSSパーツが表示されるはずです。

ちなみにちなみに。「カスタムHTML」はプレビューも可能です!

おわりに

もしもアフィリエイトのHTML&CSSパーツをブログに掲載したいけど、やり方がわからない!と思ったので、調べた内容をまとめました。ニッチな記事ですが、誰かの役に立てば幸いです。

↓ポチッとしてもらえると嬉しいです♪

にほんブログ村 にほんブログ村へ
ブログ村
あわせて読みたい
【SWELL】画像付き解説!トップにピックアップバナー設置方法 SWELLでブログのトップページにピックアップバナーを設定する方法を超丁寧に画像付きで解説します。
あわせて読みたい
【画像付】Google Adsenseで8,000円超え!収益の受け取り方は? Google Adsenseで収益が8,000円を超えたら、収益を受け取るための銀行口座を設定しましょう。銀行口座を設定から、収益を受け取るまでの設定方法がわかります。
よかったらシェアしてね!

コメント

コメントする

CAPTCHA

目次
閉じる