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

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

NEW !
テーマ:

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



松本です。

こんにちは。

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

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

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

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



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


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


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

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

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

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

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



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



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

テーマ:

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



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

こんにちは。

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

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

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

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

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

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

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


囲み枠(飾り枠)テンプレート:ワッペン風(デニム調 その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)部分を変更すると、ワッペンの横幅を調整できます。

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

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



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



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

テーマ:

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



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

こんにちは。

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

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

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

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

アメブロ内でしたら、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



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



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

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



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



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

テーマ:

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



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

こんにちは。

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

付箋紙風の枠のみのシンプルなタイプと、テープで貼り付けたような効果を追加したタイプの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以前の古いブラウザで見ると残念な感じになってしまいますが、一応読むことはできます^^

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



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



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

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



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

こんにちは。

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

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

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

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

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

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

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



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



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