アメブロdeアクセスアップ

アメブロ サイドバーに画像つきメールフォームを設置する。 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:メールフォーム

アメブロのサイドバーにメールフォームを設置する方法での、
ご質問をいただきましたので、解説していきますね。

 

このブログでは、メールフォームを設置する方法って、
以外に人気記事です。
簡単ですので、やってみて!!

 

以前の記事でも書きましたが、
アメブロのサイドバーのカスタマイズで、メールフォームを設置方法を、

書いています。人気記事でびっくりしています。
【アメブロ サイドバーにメールフォームを設置する】

 

 

これは、CSS・プラグインも使わずに、
フリースペースを利用して設置したんですね。
こんな感じね。

すごアメテン

 

画像にリンクがうまくいかないという、ご質問をいただきましたので、
解説していきますね。

 

これは、アメブロの記事投稿の部分を使います。

 

ゆっくり画像を見ながら操作してくださいね。

 

 

hana2操作方法

今回は、私が使っているフォームメーラーという、メールフォームを使っています。

すでにフォームメーラーのURLを取得した後で、行う操作方法です。

 

フォームメーラーに関しては、こちらに記載していますので、
よかったから、参考にしてくださいね。
【フォームメーラー カスタマイズ】

 

 

まず、【マイページ】の【ブログを書く】からアメブロの記事投稿欄に移ります。

 

メールフォームに使う画像をアップロードしていきます。
※新エディタを使いますので、こちらの方がより簡単です。

 

画像のアップロード

新エディタでは、こんな感じで、
ご自分で作成した画像をアップロードできます。

 

 

画像をアップロード

【画像をアップロードする】をクリックすると、
右のような画面が表示されますので、画像を選択して、タイトルを入力 ⇒ アップロードの順番で、操作してください。

 

画像がアップロードできたらば、サイドバーにアピールすることを、
記事に書いていきます。

 

その時に、メールフォームの画像と、
メールフォームのURLのリンクを貼っていきます。
手順は次の通りです。

 

 

① 好きな文言を入れる

② 画像を記事投稿部分に移動する。

③ フォームメーラーから取得したコードをリンク先のURLに入力。

 

 

まず、メールフォームへ誘導する言葉を、入力しましょう。
次に、アップロードした画像を記事投稿の部分にドラックしながら、移動させます。

 

ここで、体裁を整えます。

文字の配置ツールを使いましょう。

↓ これです。

配置ツール

 

文字や、画像をドラッグまたは、クリックすると
文字や画像の配置をすることができます。

文字のセンタリングと同じように、画像も真ん中に移動させます。

こんな感じね。

文字・画像の配置

 

上の図のように真ん中になれば、OKです。

 

次に画像をクリックして、リンクボタンをクリックすると、
リンク先の登録窓が表示されます。
こんな感じね。

 

画像にリンクを設定

 

図のように、ここで、メールフォームへのリンク先を入力します。
※URLの部分に、なにか入力してあったら control+A キーで全部選択して、
del キーで削除してから、リンク先のURLを貼ってくださいね。

 

メールフォームは別窓で開きたいので、
必ず、【リンクを新しいウィンドウで開く】にチェックを入れ
決定ボタンをクリックしてくださいね。

 

【通常表示】だと、見た目しかわからないので、【HTML表示】に切り替えます。

 

 

【HTML表示】に切り替えると、ソース(コード)がずらーっと並びます。
こんな感じね。

フリープラグインに貼るコード

 

 

これが、フリースペースに貼るコードということになります。

 

これを、すべて図のように全部コピーし、メモなどに貼っておきます。
コピーが完了したら、この記事はいらないので、削除します。

 

これを、フリースペースにはっていきます。

 

ポイント
フリースペースでは、空白(スペース)と<br>※改行タグが使えません。

 

 

文章などの改行したい場合は、<br>⇒ </br>に変更してください。

フリースペースにコードをはったら、スペースの削除はお忘れなく!!

 

フリースペースにソースを貼ったらば、一度プレビューで確認してくださいね。

 

 

私のサンプルブログで設置してみましたよ。
こんな感じね。

 

メールフォームの設置

 

 

 

 

 

※メニューの下の部分ね。

 

 

 

表示がうまくいったら、保存して、ブログを見てください。
メール画像をクリックして、メールフォームへ飛ぶか確認してくださいね。

 

ついでに、サイドメニューと同じデザインにしたかったので、
ソースを追加してみました。

こんな感じね。

 

メールフォーム設置完了

 

 

この方法も、以前の記事で公開していますが、
テンプレートによって多少違いがあると思いますので、
参考にしてみてくださいね。

【メールフォームのカスタマイズ】

 

以前の記事では、ちょっと解りずら勝ったかもしれませんが、
画像にリンクを設定する方法は、記事でも使えることがたくさんありますので、
ぜひ覚えて使ってみてくださいね。

 

 

カスタマイズのご質問は、随時受け付けています。
メールで解説できない場合は、ブログで解説していきますので、
遠慮なく、メール・コメントしてくださいね

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.