アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん

初心者でもかんたんに取り組めるアメブロカスタマイズ方法や正攻法でブログの読者を増やす運営方法などを紹介しています。

NEW !
テーマ:

アメブロをGoogleウェブマスターツールに登録するとこんなことがわかります



アメブロカスタマイズの松本です。

こんにちは。

先日、アメブロをGoogleウェブマスターツールに登録できるようになったことを書かせてもらいましたが、今回は、これでどういうことがわかるのかを少しだけ詳しく書いてみますね。

基本的には前の記事でも書かせてもらったとおり、検索された情報被リンクがわかります。


Googleウェブマスターツールでアメブロが検索されたキーワードを分析する



まずは、検索キーワードです。

QLOOKなどの普通のアクセス解析でもわかると思われるかもしれませんが、ウェブマスターツールでわかるのはアクセス解析でわかるものとは違います。

アクセス解析の場合は、アメブロを訪問してくれた人が使ったキーワードだけがわかるんですが・・・、

ウェブマスターツールの場合は、どんなキーワードで検索された時に・・・、

Googleの検索結果に何回表示されたか?

表示された順位は平均何位だったか?

表示された時に何回(何%)クリック、つまり訪問されたか?

がわかります。

例えば、下の画像のような情報が見れます(画像内に伏せ字が多くてすみません)。



数字が見えているのは、クリック数つまりブログへの訪問回数がほぼ同じキーワード3つです。

アクセス解析ではどれもおなじに見えるわけですが、ウェブマスターツールで見るとそれぞれ全く異なる特徴があることがわかります。

1つめは、平均1位表示で、クリック率も高いのでとても良いです。

2つめは、順位は1つめとほぼ同じで、概ね1位表示されていますが、クリック率が半分くらいですね。

3つめは、表示回数が多いですが、他の2つよりも順位が低いためか、クリック率が大幅に下がってしまっていますね。

これだけでも、

■2つめの検索結果で表示される記事は、タイトルをクリックしたくなるような魅力的なものに変える。

■3つめの検索結果で表示される記事は、検索順位が上がるよう記事内での検索キーワードの出現率や他ページからのリンク文字を見直す。

と言った対策をすると効果がありそうだとわかります

(グラフは日毎の検索結果に表示された回数とクリック数(全キーワードの合計)で、例えば何曜日によく検索されるのかなどを見る指標になります。


Googleウェブマスターツールで検索されたページを分析する



次は、検索されたページですが、これは、キーワードは関係なくアメブロのページごとに、

Googleの検索結果に何回表示されたか?

表示された順位は平均何位だったか?

表示された時に何回(何%)クリック、つまり訪問されたか?

を見ることができます。

次の画像のような感じです。



検索キーワードの時と同様、同じくらいの訪問回数の記事3つに注目してみましたが、それぞれ特徴が出てますよね。

1つめの記事は表示順位が約5位なのに、2つめの4位の記事よりもクリック率が大幅に上回り、3つめの3位の記事と同じクリック率になっています。

なので、この中では、1つめの記事の記事タイトルがクリックされやすい魅力的な記事タイトルになっていると思われます。

これに比べて、特に2つめは、改善の余地がありそうですね。


Googleウェブマスターツールでアメブロがどこからリンクされているかを知る



あと、もう一つが被リンクからです。

自分のアメブロが、他サイトからどのようにリンクされているのかを詳細に見ることができます。



ただし、Googleは基本的に「1つのドメインは1つのサイト」という動作をするため、「http://ameblo.jp」を一つのサイトと見ます。

なので、アメブロ内の他ブログからの被リンク状況などは、残念ながらちょっと見にくいです。



ちなみに、Googleウェブマスターツールは、利用を始めてから情報を蓄積していくようですので、いざ欲しい時に情報を得られるよう、登録だけでも早めにしておかれたほうがいいと思います。

以上、アメブロをGoogleウェブマスターツールに登録すると何がわかるのかについてご紹介しました。

ぜひ、Googleウェブマスターツールをご自身のアメブロ運営に役立てくださいね。



アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



いいね!した人  |  コメント(0)

テーマ:

囲み枠(飾り枠)テンプレート ワッペン風(リネン調) アメブロ記事・カスタマイズ向け



アメブロカスタマイズの松本です。

こんにちは。

またまた、アメブロ用の囲み枠(飾り枠)を作りました

ワッペン風(デニム調)から、「デニム地」や「糸」の部分を変更したものです。

Photoshopでリネン(麻)生地っぽい画像を自作して設定してみました(あまり質感をうまく表現できてないかもしれませんが^^;)。

今回も、タグを一緒に書いておきますので、よかったらコピペ用でご利用下さい。

【注意】新エディタをお使いの場合は、直接コピペすると文字化けしておかしくなるようです。その場合、一度メモ帳などにコピペしたものを、再度新エディタにコピペするとうまくいくようです。

タグはアメブロ専用です。

もしもそのまま他のブログ等で利用されると画像が表示されませんので、その場合は、画像をダウンロードして別サーバーにアップロードしたものをご利用下さいね。


囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その1)



■囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その1)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141029/18/wazameba/0a/9b/p/o0300030013113018867.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #e6e3e0;border-radius:5px;padding:10px">★<br><br><br></div></div></div></div>
素材画像のダウンロードはこちらからどうぞ


囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その2)



■囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その2)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141029/18/wazameba/e8/9d/p/o0300030013113018873.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #545454;border-radius:5px;padding:10px">★<br><br><br></div></div></div></div>
素材画像のダウンロードはこちらからどうぞ


囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その3)



■囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その3)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141029/18/wazameba/41/e4/p/o0300030013113018919.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #d9d9b5;border-radius:5px;padding:10px">★<br><br><br></div></div></div></div>
素材画像のダウンロードはこちらからどうぞ


囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その4)



■囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その4)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141029/18/wazameba/21/21/p/o0300030013113018942.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #cbdcf6;border-radius:5px;padding:10px">★<br><br><br></div></div></div></div>
素材画像のダウンロードはこちらからどうぞ


囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その5)



■囲み枠(飾り枠)テンプレート:ワッペン風(リネン調 その5)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141029/18/wazameba/37/f1/p/o0300030013113018948.png);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #f9d6e8;border-radius:5px;padding:10px">★<br><br><br></div></div></div></div>
素材画像のダウンロードはこちらからどうぞ


横幅や背景を変更して好みの囲み枠にするには



なお、上記タグを変更して、お好みの囲み枠にカスタマイズすることもできます。

例えば、赤文字(400px)部分を変更すると、ワッペンの横幅を調整できます。

また、緑文字部分を変更すると、囲み枠の背景になっている麻生地調の画像を好みの画像に変更することも可能です(囲み枠の背景としてタイル状に敷き詰められます)。

以上、もしよかったら使ってみてくださいね。



アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



いいね!した人  |  コメント(16)

テーマ:

11月27日(木)大阪でアメブロカスタマイズの勉強会



アメブロカスタマイズの松本です。

こんにちは。

11月27日(木)、大阪で勉強会をやらせてもらうことになりました。

僕はこれまで、コメントやメールで多くの読者さんから何が必要とされているのかを教えて頂いたおかげで、たくさんのアメブロカスタマイズ手法を見つけ出して記事に書くことができました。

僕が思いつくアイディアだけでは、絶対に不可能だったと思います。

本当にありがとうございます。

ですが、今まで、恐らくただの一度も良いお返事ができなかったコメントやメールがあります。

それは、

■ アメブロカスタマイズを自分でできるようになりたい
■ アメブロのカスタマイズを仕事にできるテクニックを身に付けたい

という内容のもの。

アメブロのカスタマイズは、普通のホームページやワードプレスとは全くやり方が異なりますので、ウェブ制作のプロの方でもなかなか難しい部分が多いです。

なので、一般のスクールなどに通って学んでも、アメブロのカスタマイズが自由にできるようになるとは限らないんですね。

だから、どう返事をしていいのかわからず、何となくお茶を濁したような回答しかできなかったんです。

「やはり、ブログでの情報提供では限界があるなぁ」と感じていました。

そこで、今後は、ちょっと形を変えた情報提供をしていくことにしました。

その一環として、このたび、

■ アメブロカスタマイズを自分でできるようになりたい
■ アメブロのカスタマイズを仕事にできるテクニックを身に付けたい

という思いをお持ちの方向けに直接お話できる勉強会を開催させてもらうことにしました

この勉強会で、アメブロカスタマイズの基本的なところから、まだ誰にも公開していないマル秘テクニックまで、僕が知っていることは包み隠さずシェアします。

ちなみに、初心者さんにも優しいカスタマイズレッスンを提供されているキョロちゃんがお手伝いしてくれますので、初心者さんも大歓迎です^^

勉強会では、今のところどこにも売ってない(笑)「特製アメブロカスタマイズマニュアル」を用意しますので、それを見ながら、僕と一緒にアメロカスタマイズのお勉強しませんか?

自分でできる!仕事にできる!アメブロカスタマイズ勉強会

【日時】
 平成26年11月27日(木)
 13:00~16:00

【場所】
 ピギーバックスソーシャルルーム
 大阪府大阪市西区新町1-2-13
 新町ビル9F

【募集人数】
 10名 13名

【参加費】
 12,000円


お申し込み方法等、詳しくはこちらにあります。もし興味を持っていただけたら是非ご覧ください。

会場スペースにまだ少し余裕があることが確認できましたので少し増席しました。よろしくお願いします。




アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



いいね!した人  |  コメント(6)

テーマ:

サムネイル付き記事紹介タグを簡単に作成



アメブロカスタマイズの松本です。

こんにちは。

実は、先日、ある方の記事のコメントさせてもらった時にそれらしいことを書いたんですが、アメブロでお気に入りの記事やサイトを紹介したい時に便利な、サムネイル画像付きの記事紹介タグを簡単に作成できる機能を作りました。

ちなみに↓そのコメントはこちらの記事にしました^^


で、実際に作ってみたところ、なかなかおもしろい感じに仕上がったと思いますので、よかったら試しに使ってみてください。

タグの作成は簡単で、こちらのページを開き、紹介したい記事のURLを入力して「タグ作成」を押すだけです。

「お気に入りや」「ブックマーク」に保存してブックマークレットとして使って頂ければなお便利だと思います(ブックマークレットとして使うやり方はこちらのページに書いてあります)。

タグ作成を実行すると、「表示サンプル」と「記事紹介用のタグ」が表示されますので、表示の確認をして紹介用のタグをアメブロの記事にコピペすればOKです。

ちなみに、作成されたタグの下の「アメブロ記事作成」というリンクをクリックすると、その紹介タグが既に記述された状態でアメブロの記事エディタが開くようになっています。

なお、利用させてもらっているシステム(HeartRails Capture)の都合で表示サンプルの画像は正常表示されるまで時間がかかる場合がありますが、どうぞご了承下さい。

他にも、既に色んな機能を盛り込んでしまっていますが、基本的な使い方はとても簡単だと思いますので、もしよかったらどうぞご利用下さい。

アメブロ記事紹介タグ作成

↓使い方まるわかり記事を書いてくださいました。



なお、ご感想やご要望、バグ報告なども受け付けていますので、本記事のコメントででもお気軽にどうぞ。

よろしくお願いします。



アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



いいね!した人  |  コメント(4)

テーマ:

大阪でランチ会&交流会♪



松本です。

こんにちは。

ここのところ、僕のまわりでランチ会や交流会といったイベントをされる方がすごく増えてきました。

関西だと、やっぱり大阪での開催が多い感じですね。

僕も、気持ち的にはもれなく参加したいところなんですが、地理的なこととか、まぁ色々ありまして、たまぁ~~~~にしか参加できてません^^;

例えば、近々予定されてるイベントだと、



■11月3日(月) 文化の日
西川さんと花梨さんのコラボ
アメブロの悩みを打ち明け隊のランチ会


■11月18日(火)
キョロちゃん主催
ブログの悩み相談交流会


が、とっても気になります。

きっと参加したら楽しめるんだろうなぁ。

都合のつく方は、是非参加されてみてはいかがでしょう?

きっと楽しめると思いますよ~^^

あ、もう直前なので、既に満席だったらごめんなさい(_ _)



アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



いいね!した人  |  コメント(8)

テーマ:

囲み枠(飾り枠)テンプレート ワッペン風(デニム調) アメブロ記事・カスタマイズ向け



アメブロカスタマイズの松本です。

こんにちは。

黒板風付箋紙風に続き、またまた、アメブロ用の囲み枠(飾り枠)です。

(最近、こればっかりですね、なんかすみません^^;)

今回は、自作のデニム調の背景用画像を利用したワッペン風の囲み枠(飾り枠)になります。

やはり、タグも一緒に書いておきますので、よかったらコピペ用でご利用下さい。

【注意】新エディタをお使いの場合は、直接コピペすると文字化けしておかしくなるようです。その場合、一度メモ帳などにコピペしたものを、再度新エディタにコピペするとうまくいくようです。

タグはアメブロ専用です。

そのまま他のブログ等で利用されると画像が表示されませんので、その場合は、画像をダウンロードして別サーバーにアップロードしたものをご利用下さい。


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その1)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その1)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/5f/19/j/o0148014813106372667.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その2)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その2)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/55/9b/j/o0148014813106372670.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その3)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その3)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/fa/43/j/o0148014813106372674.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その4)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その4)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/b0/6d/j/o0148014813106372677.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その5)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その5)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/50/cb/j/o0148014813106372681.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その6)



■囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その6)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。
<div style="width:400px;"><div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,0,0.3);background:url(http://stat.ameba.jp/user_images/20141022/23/wazameba/d4/d9/j/o0148014813106372728.jpg);border-radius:10px;"><div style="background:rgba(255,255,255,0.85);padding:5px;border-radius:5px;"><div style="border:2px dashed #c60;border-radius:5px;padding:10px">★</div></div></div></div>


横幅や背景を変更して好みの囲み枠にするには



なお、上記タグを変更して囲み枠をカスタマイズすることもできます。

例えば、赤文字(400px)部分を変更すると、ワッペンの横幅を調整できます。

また、緑文字部分を変更すると、囲み枠の背景になっているデニム調の画像を好みの画像に変更することも可能です(囲み枠の背景としてタイル状に敷き詰められます)。

以上、もしよかったら使ってみてくださいね。



アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



いいね!した人  |  コメント(16)

テーマ:

無料で使えるデニム調の背景用画像(テクスチャ)を作りました



アメブロカスタマイズの松本です。

こんにちは。

ちょっと画像素材作成の必要に迫られまして、デニム調の背景用画像(テクスチャ)を作ってみました。

せっかく作りましたので、配布させていただきますね。

こんなのでも「まぁいいよ!」という方がおられましたら、カスタマイズ用などにご利用下さい^^

使用、改変、再配布、何れも無料で自由にお使いいただけます。

アメブロ内でしたら、URLをコピペしてそのまま使えますが、その場合、万が一(無いことを祈りたいですが^^;)本ブログが削除されたらリンク切れになりますのでご了承下さい。


デニム調画像 その1




URLは↓こちらです。
http://stat.ameba.jp/user_images/20141020/16/wazameba/1c/db/p/o0148014813103976245.png


デニム調画像 その2




URLは↓こちらです。
http://stat.ameba.jp/user_images/20141020/16/wazameba/c7/f8/p/o0148014813103976258.png


デニム調画像 その3




URLは↓こちらです。
http://stat.ameba.jp/user_images/20141020/16/wazameba/07/b2/p/o0148014813103976261.png


デニム調画像 その4




URLは↓こちらです。
http://stat.ameba.jp/user_images/20141020/16/wazameba/7a/ce/p/o0148014813103976263.png


デニム調画像 その5




URLは↓こちらです。
http://stat.ameba.jp/user_images/20141020/16/wazameba/0a/87/p/o0148014813103976264.png


デニム調画像 その6




URLは↓こちらです。
http://stat.ameba.jp/user_images/20141020/16/wazameba/7f/1c/p/o0148014813103976267.png



実は、これらの画像は、↓こんな感じの囲み枠(飾り枠)のために作成しました。



無料素材も探したんですが、再配布のライセンスがよくわからない物が多かったので結局作成することにしました。

囲み枠の方は、また後日紹介させていただきますね。



アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



いいね!した人  |  コメント(8)

テーマ:

囲み枠(飾り枠)テンプレート 付箋紙風 アメブロ記事・カスタマイズ向け



アメブロカスタマイズの松本です。

こんにちは。

先日の、黒板風の囲み枠(飾り枠)テンプレートに続き、今度は付箋紙風を作ってみました。

付箋紙風の枠のみのシンプルなタイプと、テープで貼り付けたような効果を追加したタイプの2種類作りました。

テープ無しはもちろん、テープ付きも全て画像を使わずにCSSのみで作ってありますので、色や大きさなどは自由に変えられます。

前回同様、タグも一緒に書いておきますので、よかったらコピペ用でご利用下さい♪

【注意】新エディタをお使いの場合は、直接コピペすると文字化けしておかしくなるようです。その場合、一度メモ帳などにコピペしたものを、再度新エディタにコピペするとうまくいくようです。


囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・黄色)



■囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・黄色)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffffcc;">★</div></div>


囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・ピンク)



■囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・ピンク)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffdddd;">★</div></div>


囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・青)



■囲み枠(飾り枠)テンプレート:付箋紙風(シンプル・青)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ddeeff;">★</div></div>


囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・黄色)



■囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・黄色)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffffcc;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>


囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・ピンク)



■囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・ピンク)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ffdddd;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>


囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・青)



■囲み枠(飾り枠)テンプレート:付箋紙風(テープ付・青)■




↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:10px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:300px;transform:rotate(2deg);background:#ddeeff;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>


好みの付箋紙風の囲み枠(飾り枠)にカスタマイズしてみる



なお、もし、もっと好みの付箋紙風にしたいという場合は、上記タグ内の色付き文字で書いてある部分を変更すると、囲み枠をカスタマイズできます。

紫文字(例:10px)・・・付箋紙の左端の位置調整
橙文字(例:300px)・・・付箋紙の横幅調整
緑文字(例:2deg)・・・付箋紙の傾き(2degは2度のことです)
赤文字(例:#ffdddd)・・・付箋紙の色


◆例えば・・・

 こんな感じです!
 v(^^)



ちなみに↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="margin-left:50px;"><div style="margin:20px 10px 10px;padding:15px;word-break:break-all;color:#333;box-shadow:4px 4px 4px rgba(0,0,0,0.05);width:200px;transform:rotate(-30deg);background:#bbf0dd;"><div style="width:45%;height:35px;opacity:0.15;margin:-35px auto 10px 25%;background:#ccb;transform:rotate(-5deg)"></div>★</div></div>



あと、今回の枠はCSS3を多用していますのでIE8以前の古いブラウザで見ると残念な感じになってしまいますが、一応読むことはできます^^

さぁ、次は何にしましょう?^^



アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



いいね!した人  |  コメント(40)

アメブロが検索されるキーワードや被リンク情報などを詳細に知る方法



アメブロカスタマイズの松本です。

こんにちは。

2014年10月16日のアメブロスタッフのブログ記事で、アメブロをGoogleウェブマスターツールに登録できるようになったことが報じられました。

ご自身のアメブロをGoogleウェブマスターツールに登録すると、そのブログがあなたが所有者あるいは管理人であることがGoogleに登録され、

・どんなキーワードで検索されているか?
・どんなキーワードで何位で表示されるか?
・検索結果がどのくらいクリックされているか?
・どんなサイトからどのくらいリンクされているか?

など、非常に多くの有用な情報を知ることが出来ます。

個人的に、これらの情報は、検索からのアクセスアップ対策を行うためには無くてはならないと言っても良いと思います。

料金も一切かかりませんので、ぜひ登録されることをお薦めします。

なお、アメブロをGoogleウェブマスターツールに登録する簡単な手順を書いてみましたので、よかったら参考になさって下さい。



アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



いいね!した人  |  コメント(21)

テーマ:

囲み枠(飾り枠)テンプレート 黒板風 アメブロ記事・カスタマイズ向け



アメブロカスタマイズの松本です。

こんにちは。

最近、アメブロ記事内で利用できる飾り枠を配布するのが流行ってるみたいなので、僕も作ってみました!

「あまり他の人が作ってなさそうなのを」と思って、とりあえず黒板風にしてみました(暗色系は需要がないかな?とも思いながらも^^;)。

タグも一緒に書いておきますので、よかったらコピペ用にご利用下さい。

【注意】新エディタをお使いの場合は、直接コピペすると文字化けしておかしくなるようです。その場合、一度メモ帳などにコピペしたものを、再度新エディタにコピペするとうまくいくようです。


囲み枠(飾り枠)テンプレート:黒板風(木枠・緑)



■囲み枠(飾り枠)テンプレート:黒板風(木枠・緑)■






↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。

<div style="word-break:break-all;color:#fff;background-color:#140;margin:10px 5px;padding:15px;border:8px solid #a60;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #020 inset;text-shadow:0px 0px 2px #000">★</div>


囲み枠(飾り枠)テンプレート:黒板風(木枠・黒)



■囲み枠(飾り枠)テンプレート:黒板風(木枠・黒)■






↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)

<div style="word-break:break-all;color:#fff;background-color:#191919;margin:10px 5px;padding:15px;border:8px solid #a60;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #000 inset;text-shadow:0px 0px 2px #000">★</div>


囲み枠(飾り枠)テンプレート:黒板風(木枠・青)



■囲み枠(飾り枠)テンプレート:黒板風(木枠・青)■






↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)

<div style="word-break:break-all;color:#fff;background-color:#246;margin:10px 5px;padding:15px;border:8px solid #a60;border-radius:3px;box-shadow:2px 2px 4px #999,2px 2px 2px #124 inset;text-shadow:0px 0px 2px #000">★</div>


囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・緑)



■囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・緑)■






↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)

<div style="word-break:break-all;color:#fff;background-color:#140;margin:10px 5px;padding:15px;border:4px solid #bbb;box-shadow:2px 2px 4px #ccc,1px 1px 1px #020 inset;text-shadow:0px 0px 2px #000">★</div>


囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・黒)



■囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・黒)■






↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)

<div style="word-break:break-all;color:#fff;background-color:#191919;margin:10px 5px;padding:15px;border:4px solid #bbb;box-shadow:2px 2px 4px #ccc,1px 1px 1px #000 inset;text-shadow:0px 0px 2px #000">★</div>


囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・青)



■囲み枠(飾り枠)テンプレート:黒板風(アルミ枠・青)■






↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)

<div style="word-break:break-all;color:#fff;background-color:#246;margin:10px 5px;padding:15px;border:4px solid #bbb;box-shadow:2px 2px 4px #ccc,1px 1px 1px #124 inset;text-shadow:0px 0px 2px #000">★</div>



なんか、これ作ってると楽しいので、また作ります!

今度は何風にしましょうかねぇ^^



アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん



いいね!した人  |  コメント(46)