アメブロの各記事に「この記事を書いた人」を貼る方法【動画とコピペ可能コード付き♪】

ABOUTこの記事をかいた人

倉地加奈子

習い事心理アドバイザーとして習い事の講師の方を中心にビジネスを教えています。特に営業を長らくしてきた経験からセールス力が女性相手のビジネスをする上でいかに大事かということをお伝えしています。女性らしい自立を目指したい方を本気で応援したくて。ブログを楽しんでいって下さいね♪ 特技:クライアントさんの教室の高収益化。

私はクライアントさんが女性の習い事の講師の方ばかり
なのでアメブロを使っている方が非常に多いのですが、
アメブロにwordpressブログであるような、
記事の最初と最後に、

「この記事を書いた人」

というプロフィール欄をつける方法を解説してみました。

ほぼコピペで実装可能なので使ってみて下さい。

出来上がりはこちら

文章を読むのも面倒な方は動画で確認してみて下さい^^

アメブロに「この記事を書いた人」を貼ろうと思った理由

アメブロはカスタマイズが可能なので、
このように自分好みのデザインにカスタマイズできます。

しかしせっかくカスタマイズして、
メニューバーを作ったりヘッダー(メインの画像)を
おしゃれにしてもスマホで見ると、

・・・

全部同じデザインになってしまいます。

それなら各記事の先頭や文末に「この記事を書いた人」をつくって、
筆者のプロフィールだけでも読んでもらえるようにして、
クライアントさんのアメブロの反応率を上げれないか?

そんな思いから今回、

「この記事を書いた人」

を実装しようと思ったわけです。

設置は簡単♪記事の上下にこれを貼るだけ

まずは以下のコードを記事を書く前に
貼り付けてください。

以下をコピーしてください↓

これをアメブロのブログを書くに行き、HTML表示にして貼り付けます。

通常表示で確認するとこんな感じになっていると思います。

貼り付けたら、このページを開いたままにして
新しいページを立ち上げ、新規のブログを書くページを開きます。

画像のアップロードから自分の写真をアップロードします。(正方形の画像推奨)

次にアップロードした自分の画像を記事に配置します。

配置したらHTML表示に切り替え、以下の画像のように、
src=”●●●”の●●●のみコピーします。

コピーしたら別ウィンドウの一番最初にコピーしたコードの中にある、
ここにプロフィール画像のURL を先ほどコピーしたURLに置き換えます。

通常表示で確認するとプロフィール画像が
変わっているのが確認できたらオッケーです。

次に自分のfacebookに飛ばすためのfacebookアイコンを作ります。

まず以下からfacebookのアイコンの上で右クリック→名前をつけて画像を保存を選び
facebook用のアイコンをダウンロードしてください。

ダウンロードしたら先ほどプロフィール画像をアップロードした手順で、
facebookアイコン画像もアップロードします。

アップロードしたらプロフィール画像と同じ手順で、
記事に張り付けて下さい。

そうしたら先ほどの手順と同じです。

src=”●●●”の●●●のみコピーします。

コピーしたら別ウィンドウにある、
ここにfacebookのアイコン画像のURL にペースト。

こうなります。

通常表示にしてみてfacebookのアイコンが表示されていればオッケーです。

同じ手順でホームページ用の地球儀もアイコンも
以下の画像の上で右クリックしてダウンロード。

facebookアイコン画像と同じ手順で画像のURLをコピーしたら、
ここにfacebookの地球儀画像のURL という部分を置き換えます。

通常表示に戻して、地球儀アイコンが表示されていればオッケーです。

あとは自分のfacebookのURL、ホームページのURLを
以下の画像を参考に置き換えてみて下さい。

名前と文章も好きなように変えてくださいね。

最後に、プロフィール記事のURL の部分に、
別に用意した詳しいプロフィールが書いてある記事のURLを張り付けて完成です。

コードができたらこのコードを全部コピーして、
過去に書いたブログ記事に貼ります。

コピーしたコードは画像の下に貼り付けるようにしてください。

アメブロはトップページのサムネイルが、記事内の一番最初の画像が
自動で選択される仕組み
になっていて、
記事の一番最初に「この記事を書いた人」のコードを貼ってしまうと
トップページのサムネイル表示が全部、プロフィール写真になってしまいます。

このように記事の最初に画像を用意して、
その画像の下に作ったコードを貼り付けます。

そうすると記事の一番最初に何かしらの画像が来て、
すぐその下に「この記事を書いた人」が表示されます。

記事を書き終えた一番下にも貼っておくと良いですね。

スマホでもしっかりと表示されます。

※備考

facebookとホームページの部分が必要ない方は、
以下の画像を参考に青い部分を取り除いて下さい。

まとめ

さていかがでしたでしょうか?

アメブロの記事に「この記事を書いた人」の欄を設ける。

これならスマフォで皆同じデザインで表示になってしまうことを防ぎ、
差別化が図れるのではないでしょうか?

参考にしてみて下さいね。

切り返しトーク集無料プレゼント中!

今まで100人以上の習い事の講師の方を指導してきた中で、生徒さんに言われて答えにくい質問にうまく切り返すトーク集を無料で公開しています。是非この機会にトーク集とトーク力を手に入れてみて下さい。"無料" ですのでお気軽にご登録下さい。

倉地加奈子のメールマガジン「女性らしい自立のトビラ」

3 件のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    倉地加奈子

    習い事心理アドバイザーとして習い事の講師の方を中心にビジネスを教えています。特に営業を長らくしてきた経験からセールス力が女性相手のビジネスをする上でいかに大事かということをお伝えしています。女性らしい自立を目指したい方を本気で応援したくて。ブログを楽しんでいって下さいね♪ 特技:クライアントさんの教室の高収益化。