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

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


テーマ:

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



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

こんにちは。

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

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

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

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

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



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



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

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



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



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

テーマ:

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



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

こんにちは。

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

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

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



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



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

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



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

こんにちは。

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

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

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

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

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

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

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



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



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

テーマ:

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



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

こんにちは。

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

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

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


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



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






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

<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>



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

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



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



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

テーマ:

アメブロでGoogleアナリティクスが動作しない問題と動作させる方法



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

こんにちは。

アメブロ標準のアクセス解析が、残念ながらあまり使いものにならないため、アメブロに他社のアクセス解析を導入している人は多いですね。

その中で、Googleアナリティクス(Analytics)という、Google社が提供している人気のアクセス解析があります。

もちろんアメブロでの利用者も多いのですが、現在、このGoogleアナリティクスが、一部のアメブロで数日前から動作しない問題が出ています。



Googleアナリティクスを利用中の方は、ぜひ一度確認してみてください。(動作している場合は対策不要です)

また、フリープラグインに、新たに作成したGoogleアナリティクスのタグを貼り付けても動作しなくなってしまいました。

ですが、実は、今現在も、一応アメブロでGoogleアナリティクス使用することは可能ですので、その方法をご紹介しますね。

---- 2014/10/16追記: -----
こちらによると、本記事の方法は動作はするが推奨されない(本来は行うべきでない)方法だと思われます。また、ある時期が来ると、最終的には本記事の方法でも情報は収集されなくなるようです。
---------------------------


---- 2014/10/17追記: -----
こちらによると、この方法では「データ収集、データ処理、レポート生成が正しく実行されない可能性があります」と記されています。元来、旧タイプのタグは同様の問題があったと推測できますので新タイプ登場以前のリスクに戻ったと考えていますが、やはり全機能の完璧な動作までは期待できないようです。
---------------------------


アメブロでGoogleアナリティクスを使用する方法



アメブロで、Googleアナリティクスを使用したい場合、タグを旧タイプに変更することで対応可能です。

現在の動作しなくなってしまった新タイプのタグは・・・、

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-00000000-0', 'auto');
  ga('send', 'pageview');

</script>


のようになっています。

この中の、「UA」と「数字」が「-」で繋がったコード(トラッキングID/数字は実際には0ばかりではありません)をどこかに控えて下さい。

そして、以下の様なタグを作成します。

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-00000000-0']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>


もちろん、UA-00000000-0の部分は、上で控えたコードに書き換えます。

そして、出来上がったタグを、フリープラグインに貼ってあるGoogleアナリティクスの新タイプのタグと入れ替える形で貼り付けて保存すればOKです。

以上、アメブロでGoogleアナリティクスが動作しなくなってしまった件と、Googleアナリティクスを再度使用できるようにする方法をご紹介しました。

よかったら参考にしてくださいね。



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



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