Ameblo Hacks2～ユニークなアメブロカスタマイズをあなたに～ -2ページ目

「ブログチャート」でブログのレベルを測ってみる

ボクのお気に入りブログ、独学者のひとりごとさまで随分前に紹介されていた「blog chart」なるものをやってみました。
これはアクセス数、話題性、RSSをどれだけ読まれているか、どれだけソーシャルブックマークされているかなどの複数のファクターからブログのレベルを判定するものです。
ウチのブログはレベル4でした。
ドラクエに例えると、ラダトームから旅立てるかどうかの微妙なレベルって感じですｗ

blog chartはこちら。

ついでに、アメブロの有名ブログさまのレベルをリサーチしてみました！
まずはカスタマイズといえばこちら。アメブロ向上企画書さま。

レベル34！さすがです。レベル高し！

では次に、アメブロ芸能人ブログ殿堂入りのこの方のブログ。

さすがに高いですが、アクセス数の多さにしてはそれほどでもないという印象です。

最後に、アメブロ総合ランキング1位の、晴れ時々俺のブログさま

な、なんとまさかのレベル1！
どうやらRSSやクリップ数が皆無なのが原因のようです。

このブログチャートではブログパーツも発行しており、ブログに貼り付けることでブログのレベルを測定する要素の一つである「アクセス数」を反映させることが出来ます。
うちのブログでもさっそく設置してみました。
レベル上げにご協力お願いします！ｗ

ブログのネタにどうぞ！

photo by Eivind Z. Molvær

今日はカスタマイズではなく、ブログでの話のネタに最近のお気に入り動画をいくつかご紹介します。
youtubeにニコニコ動画に、オンデマンドでいろんな動画が楽しめるという、ホントにいい時代になったもんですね。

超有名ソーシャルサービスで、日本の飼い猫「マルちゃん」が大人気

「らばQ」や「gigazine」などの人気サイトの記事のネタ元としても知られる海外の超有名ソーシャルサービス「digg」で紹介された猫の動画が閲覧者たちにものすごい人気を博し、youtubeに投稿された動画は10日も経たずに40万再生を突破しています。
何の変哲もない動画なんですが、猫の動きがとても可愛く、「diggのマスコットにしたい」というユーザーも居るほどです。
動画はこちら。

古館伊知郎さん、マリオブラザーズを実況！

あの古館伊知郎さんが、超難度に改造された「マリオブラザーズ」をSASUKEに見立てて実況するという動画がニコニコ動画で人気になっています。
実際に実況しているわけではなく、いろんな実況から継ぎ接ぎにしてそれっぽくしているだけなんですが、芸術的なほど実況がピッタリ合っています。
ボクも半月ほど前に初めて見て以来、毎日見てしまうほど面白いです。
動画はこちら。※コメントをオフにした方が楽しめます

サッカー選手は演技力が最重要という動画

これもニコニコ動画から。
サッカーではわざとファウルを受けたように見せかけて倒れることを「シミュレーション」と言いますが、この動画はそのシミュレーションの中でも特に酷いものを集めたものです。
思わず声を出してツッコミたくなるようなものばかりで楽しめます。
動画はこちら

今日はこのブログを開設してちょうど10日目ですが、おかげさまで楽しく書かせていただいています。
これからも、当ブログをよろしくお願いします！

フリーのアイコンを利用した「ページトップへ」ボタン

今回は、当ブログ左下に設置している矢印ボタンについてお話したいと思います。
クリックすると、IEはスクロールで、それ以外はフェードイン・アウトでページ上部に移動します。
長い記事を読み終えた後、閲覧者をスムーズにページ上部のメニューバーに誘導することができます。

では早速、作り方いってみましょ～

ブログに合ったアイコンを探そう！

まずは、自分のブログにあったアイコンを探す旅に出ましょう。
少し前に書いたフリーアイコン紹介サイトの記事を参考にしてください。
きれいなアイコンが多すぎて困るかもしれませんが・・・ｗ

アイコンを決めたら、あとはアメーバの画像フォルダか自分で用意したサーバーにアップロードして、URLをメモします。

フリープラグインにスクリプトを書く

次は、フリープラグインにスクリプトを書きます。

アイコンの座標はleftやbottomの後の数値を変えてやればOKです。
吹き出しをつけたい方は、こちらの記事を参考にしてトライしてみてください！

小さな配慮ですが、閲覧者には非常に便利ですので、アクセスの上昇にも期待できるかもしれません。
気になった方は、簡単ですので、ぜひトライしてみてください！

【修正済み】プラグインの文字数制限をなんとかする2つの方法

追記：不安定な動きをしていたのをいろいろ修正しました。

前々回の記事でモコモコツールズさんというブログパーツ配布サイトの「マイフェチ」というブログパーツを紹介したのですが、思いのほかプラグインの文字数が多くて「制限にひっかかるのですが、なんとかできますか？」という質問をいただきました。
そこで今回は、プラグインの文字数制限をなんとかする方法をいくつかご紹介します！

※紹介する方法を実行する前に、ミスって消えてしまっても大丈夫なようにメモ帳にプラグインなどのバックアップを保存しておくようにしてください。
間違えて全部消しちゃっても責任は取れません！

javascriptをもっと書きたい場合

1…まず、フリースペースでも記事の中でも良いので、

</div>こんな感じで、プラグイン代わりに使うスペースを確保します。
idは何でもいいですが、ここでは仮にexjavascriptにしておきます。

2…次に、この中にjavascriptのコードを書きます。例えば、

<div id="exjavascript" style="display:none;">
alert("success");
</div>

successというメッセージをダイアログで表示するシンプルなコードを書いてみました。
もちろん、もっと長いコードでも大丈夫です。
書き終わったら、改行をすべて無くします。

<div id="exjavascript" style="display:none;">alert("success");</div>

こんな感じです。

3…このままでは何も起きませんので、フリープラグインに以下のようなコードを追加します。

これで実行することができます。

※追記＆修正
もしコード内に「document.write」がある場合、次のようにします。

本アカウント

<div id="exp"></div>
<script type="text/javascript">
jQuery.ajax({type:"GET",dataType:"text",url:"あなたのブログのURL(※1で記事内に書いた場合はその記事のURL)",success:function(data){
eval(jQuery("#exjavascript",jQuery(data)).get(0).innerHTML);
}});
</script>

別アカウント…document.writeを全て、jQuery("#exp").appendに変更する

直接フリープラグインにjavascriptのコードを書いている方は、これで文字数が節約できますが、他のページを読み込んでから実行するのでどうしても実行開始速度は遅めになります。

iframeなどの禁止タグを含むプラグインの場合

1…別のアカウントを取得します。
これは文字通りそのままなんですが、プラグインの文字数に余裕がある別アカウントをすでに持っている方は特に新しく取得する必要はありません。

2…1で取得した別アカウントのフリープラグインに、貼り付けたいプラグインを以下のように貼り付けます。

<div id="explugin" style="display:none;">
ここにプラグインを貼り付ける
</div>

ここではidをexpluginとして説明しますが、何でもかまいません。
貼り付けたいプラグインの名前に関するIDがわかりやすいと思います。

3…元のアカウントでログインし、フリープラグインに以下のように貼り付けます。
※不安定でしたので修正しました

<div id="exp"></div>
<script type="text/javascript">
jQuery.ajax({type:"GET",dataType:"text",url:"1で取得したアカウントのブログのURL",success:function(data){
jQuery("#exp").append(jQuery("#explugin",jQuery(data)).get(0).innerHTML);
}});
</script>

これで貼り付けることができます。
これはscriptタグを含むプラグインも貼れるのですが、中には上手く動作しないものがあります。
例えば、冒頭でお話したモコモコツールズさんの「マイフェチ」も実はそうです。

「マイフェチ」のコードは、最初に1つだけscriptタグがあります。
その<script　～　</script>までの部分だけ、元の貼りたいブログのプラグインに普通に直接貼ります。
これだけなら文字数は少ないですよね。
その直後の<noscript>のところから最後までは、別アカウントのプラグインに2の方法で貼ります。
つまり、こんな感じになります。

別アカウントのフリープラグイン

<div id="myfechi" style="display:none;">
ここに<noscript>以降のプラグインを貼り付ける
</div>

本アカウントのフリープラグイン

これで貼り付けることができます。

大抵のプラグインはどちらかの方法でうまく動作すると思いますので、文字数の多いプラグインでお悩みの方は是非トライしてみてくださいね。

本当は外部サーバーにスクリプトを書くのが一番良いのですが、それができない人は、このような方法で文字数制限に挑戦することが可能です。
デメリットもありますが、是非挑戦してみてください！

ブログを工事してみました

photo by terinea

ブログをちょっと工事しましたのでお知らせします。

トップページからは記事を消し、記事へのリンクを多めに貼っています。
カテゴリー別記事は見やすいように一度に10記事まで表示にし、「続きをよむ」でショートカットしています。
左下には、ページの上部にワープできるボタンを設置しました。

果たして見やすくなったかどうか・・・というわけで、ご意見お待ちしています！

クールで軽い吹き出しプラグイン「vtip」を使ってみよう

旧ブログで一度ご紹介した吹き出しプラグイン「vtip」ですが、とても好評で「教えてほしい」というコメントを複数件いただきましたので、もう一度記事にしてみたいと思います。
当ブログでは、ヘッダーのメニューバーとコメント欄に使用しています。

では、さっそく導入方法いってみましょう。

ダウンロード

http://www.vertigo-project.com/projects/vtip
ここからダウンロードして解凍してください。

準備してみる

サーバーにアップロードする方法と、アメーバの画像フォルダとCSSを使う方法があります。

・サーバーにアップロードする場合
中にあるvtip.jsとimagesフォルダとCSSフォルダをサーバーにアップロードします。
まず先にimagesフォルダとCSSフォルダをアップロード。
アップロード先のURLをメモしておきます

・アメーバの画像フォルダとCSSを使う場合
imagesフォルダ内にあるvtip_arrow.pngを画像フォルダにアップロードし、アップロードしたURLをメモします。
次に、CSSフォルダ内のvtip.cssをテキストエディタ(メモ帳など)で開き、中身を丸々コピーしてCSSの最後に貼りつけます。

準備してみる　その2

vtip.jsをテキストエディタ(メモ帳など)で開き、中身をメモ帳で開きちょっと書き換えます。
$('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png');
↑ここのimages/vtip_arrow.pngの部分を、先ほどアップロードしたimagesフォルダ内にあるvtip_arrow.pngのURL、に書き換えてください。
例) $('p#vtip #vtipArrow').attr("src", 'http://example.com/vtip/images/vtip_arrow.png');
できたら上書き保存してください。

導入する

・サーバーにアップロードする場合
vtip.jsをサーバーにアップロードしてURLをメモします。
フリープラグインにスクリプトタグを書きます。
srcの部分はvtip.jsをアップロードした先のURLにします。
例) <script type="text/javascript" src="http://example.com/vtip/vtip.js"></script>
アップロードしたCSSフォルダ内のvtip.cssもインポートします。
例) <link rel="stylesheet" type="text/css" href="http://example.com/vtip/css/vtip.css" />

・アメーバの画像フォルダとCSSを使う場合
vtip.jsをテキストエディタ(メモ帳など)で開き、中身を丸々コピーします。
フリープラグインにスクリプトタグを書き、その中に先程コピーしたvtip.jsの中身を貼りつけます。
<script type="text/javascript">
ここにvtip.jsの中身を貼り付ける
</script>

適用する

吹き出しを適用したい要素にvtipクラスを付け、title属性の中に吹き出し内に表示させたい文字列を記述します。

例) <img src="test.jpg" class="vtip" title="吹き出しテスト">

↑この例だと、画像にマウスが乗ると「吹き出しテスト」という吹き出しが出現します。
うまくいきましたでしょうか？

応用編

これだけでも使い道がたくさんある素晴らしいモノなんですが、コメント欄のコメント主の名前にマウスカーゾルを合わせたときに、そのリンク先のサムネイルを表示するというテクニックもご紹介します。
いろいろと準備が必要ですので、一つ一つ説明したいと思います。

vtip.jsに変更を加える

vtip.jpをメモ帳などのテキストエディタで開いてください。
いくつか書き換える場所があります。

●その1
まず、$を全てjQueryと書き換えます。
例）$(".vtip").unbind().hover( ←これを　jQuery(".vtip").unbind().hover( ←こうする

●その2
this.yOffset = 10; // y distance from mouse
コレを
this.yOffset = 30; // y distance from mouse
こうします。

●その3
this.t = this.title;
コレを、
this.t = this.title;
this.t = String(this.t).replace(/img\$/g,"<img class='blothum' src='");
this.t = String(this.t).replace(/\$img/g,"' alt='' width='128' height='128'/>");
こうします。

●その4
最後に一番下の
jQuery(document).ready(function($){vtip();});
コレを
//jQuery(document).ready(function($){vtip();});
こうします。(要するに、コメントアウトするだけです)

これでvtipの準備は終わりです。

サムネイル取得サービスにリンクを貼る

今回は、http://hinadoll.net/さんの「サムネイル取得サービス」を利用させていただいております。
規約上、リンクを必ず貼らなければいけません。
これはどこでもいいんですが、必ず見えるようにhttp://hinadoll.net/へのリンクを貼ってください。
リンクには「サムネイル取得サービス」という文字列が含まれていないといけません。

追加のプラグインを貼る

修正したvtip.jsを通常のvtip.jsに上書きしてアップロード、もしくはプラグインに上書きしてください。
それができましたら、このサムネイル表示のためにスクリプトを書きましたので、それも導入します。
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/27/2a/10015027244.css"></script>
とフリープラグインに貼ってください。

これで使えるようになるはずです！

ちょっと手順が長くなりますが、一つ一つこなせば決して難しくはありません。
全くの初心者には難しいと思いますが、脱カスタマイズ初心者をされた方にはとてもオススメですよ！

ある意味画期的なアクセスアップ対策用ブログパーツ

おそらく最近できたサイトなのかと思いますが、「モコモコツールズ」さんというブログパーツ無料配布サイトさんを見かけました。
そこには、ちょっと恥ずかしい気分を他人と共有しつつもアクセスアップの効果も期待できるというある意味画期的なブログパーツがありましたので、紹介させていただきます。

そのブログパーツの名は「マイフェチ」。
80種類以上用意されている「フェチ」のなかから自分に合うものを選び、それをブログに貼り付け堂々と閲覧者にカミングアウトしてしまう、というもの。

うちのブログにも試しに貼りつけてみました。
こんな感じになります。

同じフェチの人とのリンクが表示されて、自動的に相互リンクされるような感じになるようです。
うちのブログはカスタマイズブログなんで外しちゃいましたが、こっそりやっている日記ブログの方で活躍しそうですｗ

ではそこのあなたも（恥ずかしがらずに）早速登録してみましょう！

モコモコツールズにアクセスして会員登録

まずはモコモコツールズにアクセスして会員登録しましょう。メールアドレス(捨てアドでもOK)を書くだけなので簡単です。
確認メールがすぐに届きますので、そこに記載されているURLをクリックすれば、登録完了です。

ブログプロフィールを編集する

まず、ブログパーツを貼るブログの情報を登録しましょう。
ログインしたら、左のメニューの中から「ブログプロフィールの編集」を選びます。
すると登録フォームが現れますので、ブログ名やURLを記入して「更新」ボタンを押しましょう。
ブログは3つまで登録することが可能です。

マイフェチ！を選択する

登録できたら、次に左メニューから「マイフェチ！」を選択します。
すると、このような画面が出てきます。

「新しいツールを作る」を選びます。
どうやら、登録したブログパーツをグループ分けする機能のようです。
複数のブログを登録するならありがたいですね！

適当な名前をつけます。
使うブログ名が一番わかり易いかな？と思います。

ツールができたら、ツール名をクリックします。

そしてあなたは何フェチかを選び、メッセージを書き、使うブログを選び、更新ボタンを押せばタグが発行されます。
あとはフリープラグインに貼りつけるだけ。
タグ内になぜか空白が多いので、サクサク空白を消してから貼り付けるといい感じになりますよ！

ボクはおっぱいが好きです！！！

他にもなにやら楽しげなツールがいくつかありましたので、気が向いたらチェクしてみます。
では、良い夏休みを！

よくある質問～youtubeの画面を表示せず、ボタンのみ表示する

動画を自動的に流す、というのは個人的には好きじゃないのと、それをするにはjavascriptを書く必要がありますので、今回はあくまでも単なるyoutubeの貼りつけです。
画面を隠して再生ボタンとシークバーだけを表示します。

埋め込みコードを取得する

まず、好きな動画のページに行き、埋め込みコードを取得します。

クリックすると埋め込みコードが現れます。

埋め込みコードは以下のようなコードです。

取得できたら、メモ帳にコピーして保存しましょう！

埋め込みコードを書き換える

これを好きな場所に貼り付けるのですが、その際に横幅を好きな広さに変え、高さを25にします。

二箇所ありますが、どちらも同じ数字にしてください。
幅を160にした場合、以下のような埋め込みコードになります。

実際に貼り付けると、以下のようになります。

↑コレですね。(動画はオフィスオーガスタの公式のモノを使っています)
これで完成です！

音楽や動画を流すのは本当はあまり良くないと言われていますが、アーティストのファンブログなど、使い方次第でもしかしたら効果はあるかもしれません。
ビックリする音量のものは、本当にやめてほしいですけどねｗ

超初心者のためのCSS入門「CSSを自分で書くには？」

ブログの見た目を決めるのはCSSです。
逆に言うと、CSSが上手く書けるかどうか、でブログの見た目は決まると言っていいでしょう。
今回は「CSSは自分で書けない」という方のために、CSSを自分で書くにはどうすればいいか、というのを記事にしてみたいと思います。

CSSの書式を理解する

CSSの書式は至ってシンプルです。

セレクター{
プロパティ名:値;
}

改行は無くても大丈夫ですが、見辛くなるので入れることをオススメします。
ちょっと専門用語が出てきたので解説しましょう。

「セレクター」の基本

右クリックでソースを見てみると、<div> ～ </div>だとか、<a href"～"> ～ </a>だとか、HTMLタグが沢山書かれているかと思います。
その各タグごとに見た目を設定するのがCSSです。
セレクターとは、どのタグを対象にするか、を指定するものです。

最も基本的なセレクターは3種類あります。

1…タグ名で指定する
これはdivとかaとかpとか、HTMLのタグ名そのものを指定するセレクターです。
例をあげるとこんな感じです。

div{
color:black;
}

このCSSは、全てのdivタグの文字色を黒にしますよ、という意味です。
タグ名で指定すると、全ての同じタグ名の要素に適用されます。

2…IDで指定する
右クリックでソースを見たときに、たまに<div id="～">というように、idが付けられている要素があるかと思います。
一番分かりやすいのはヘッダーの部分ではないでしょうか。
ベーシックスキンだと、
<div id="overHeader">　だとか、<div id="header">　と書かれている部分があるはずです。
通常は同じIDの要素は2つ以上書いてはいけないことになっています(アメブロのルームでは平気で同一IDの要素を沢山書いちゃってますが、ホントはよくない)ので、IDで指定すると、特定の一つの要素に対してCSSを書くことができます。
IDで指定するときは、ID名の前に「#」を付けます。
例をあげるとこんな感じです。

#header{
background-color:black;
}

このCSSは、IDがheaderの要素の背景色を黒にする、という意味です。

3…クラス名で指定する
ソースを見たときに、たまに<div class="～">というように、クラス名が付けられている要素があります。
クラス名はCSSのために定義するもので、例えばサイドバーのタイトル部分(「記事一覧」「アーカイブ」など)のように、同じ見た目の設定をする必要がある複数の要素があるときに、それらに同じクラス名をつけてクラス名でセレクターを指定してCSSを書く事で、一度に複数の要素に対して同じ設定を適用することができます。
一つの要素に複数のクラス名を付けることも可能で、その場合は<div class="a b">というように、半角スペースを間に入れます。
この要素は「a」というクラス名と「b」というクラス名を持つことになります。
セレクターをクラスで指定するときは、クラス名の前に「.」を付けます。
例をあげるとこんな感じです。

.menu_title{
background-color:black;
}

このCSSは、menu_titleというクラス名が付けられている要素の背景色を黒にする、という意味です。

以上が基本的な3つのセレクターです。
ここまで書いておいてアレなんですが、もっと砕いて書いた記事をみつけましたので、イマイチ解らないという方は
http://www.shoshinsha.com/hp/ref/css/css_selecter.html
こちらもごらんください。

「セレクター」の応用

特定の要素一つだけのスタイルを決めたい！という時はidを設定してあげれば楽なんですが、アメブロではそう簡単にはいきません。
HTMLはアメブロ側が勝手に書いちゃうので、自分でIDを設定することはできませんから・・・。
そこで、IDが付けられていない要素を絞り込むためには、覚えておきたい2つの基本テクニックがあります。

1…複数のセレクターを使う
基本の項目でお話したセレクターを同時に2つ使います。例えば

h4.menu_title{
background-color:black;
}

こうすると、h4タグのなかでクラス名がmenu_titleのものに絞られます。
divタグでクラス名にmenu_titleが付けられている要素があっても適用されません。
さらにクラス名を2つ指定することもできます。

h4.menu_title.new{
background-color:black;
}

こうすると、h4タグのなかで、menu_titleとnewの両方のクラスを持った要素だけ指定することができます。

2…親子関係を指定する
HTMLソースを見ると、要素の中に要素が入っていて、さらにその中にまた要素が入っていることがわかります。
例えば分かりやすい例で言うと、ヘッダーのブログ名が書かれている場所は、

という構造になっています。
つまり、#header要素の中にh1が入っている(ちなみにこれを「ネストされている」と言います)状態です。
この場合「h1は#headerの子供である」と言います。
この親子関係も、CSSのセレクターで指定することができます。
親子関係を指定する場合、親セレクターと子セレクターの間に半角スペースを入れます。

親セレクター子セレクター{
プロパティ名:値;
}

こんな感じです。
具体例としては、

#header h1{
display:none;
}

これは、IDがheaderの要素の中にあるh1タグを非表示にする、という意味です。
なんとなく解ってきましたでしょうか？

では引き続き、プロパティと値についてお話します。

プロパティと値

プロパティとは、わかりやすく言うと「設定項目」のことです。
例えば文字の色とか、縦と横の幅とか、隣の要素からどれくらい距離を離すとか、枠に線を入れるかどうかなど、本当にたくさんの設定項目が存在します。
これらを全て覚えるのはムリですので、
http://www.tagindex.com/stylesheet/properties/
ここを参考にしましょう。
セレクターを書いたら｛｝で閉じて、そのカッコの中に適用したい設定を書きます。
設定は、プロパティ名の後にコロン(「:」←これ。下にヒゲが無い方)を書き、続いて指定する値を書き、その後にセミコロン(「;」←これ。下にヒゲがある方)を書きます。
一度に複数の設定を書く事も可能です。例えば、

#header h1{
color:white;
background-color:black;
}

このように書くと、IDがheaderの要素の中にあるh1タグに対して、文字色を白に、背景色を黒に設定することができます。

プロパティと値に関しては、特にこれ以上の難しいことはありません。
プロパティは実際にCSSを書いてみて、それぞれのプロパティのクセというか特性に慣れてくれば、特に文法で難しい部分は一切ありません。

では最後に、実際にトライしてみましょう！

実際にやってみる

フリースペースを使って実際にCSSを書いてみましょう。
まず、練習用にHTML要素を作ってみます。次のようにフリースペースに書いてみてください。

作れたら保存して、「デザインの変更」から「CSSの編集」を選んでみましょう。
一番下にスクロールさせて、一番最後に書き加えてください。
では、この「テスト１」と書かれた部分の背景色を黒に、文字色を白にしてみましょう。

どうですか？

できましたか？

今回はここまでにして、答えは次回書くことにします。
次回の「超初心者のためのCSS入門」をお楽しみに！

記事を読む所要時間を表示すると、ブログの再訪問率まで上がるらしい

「ブログを書く人のアイディアノート」さまの記事でこのような面白い話題が取り上げられていたので、「パクってもいいですか？」とメッセージを送ったところ、なんと快諾いただきました！
というわけで、早速書かせてもらいます！感謝です！！

詳しくは「ブログを書く人のアイディアノート」さまの記事をみていただくとして、記事の参考元を遡ってみたところ、どうやらリピート率やツイッターのフォロー率まで劇的にアップするらしいとのことで（ウチのブログに効果があるかどうかは別として）これは地味ながらもすんばらしいですね。
もともとはワードプレス用のPHPで書かれたコードだったのですが、javascriptでもできそうなので、アイディアノートさまの記事を参考にアメブロのプラグイン用にサクっと移植してみました。
サクっとと言いながら、IE対策で若干ハマっていたのは内緒です。

1秒あたりに読める文字数と写真1枚あたり観るのに何秒かかるかを考える

これはブログによって少し異なってきます。写真が多めなのかテキスト中心かでも変わりますし、行間を取るようなスタイルだとまた変わってくるかと思います。

ではそれを決めたら、フリープラグインにこちらのコードを貼りましょう。

numCharsPerSecondとImgViewTimeの値には、先程決めた値を入れましょう！
次にCSS

p.readtime{/*時間を表示する場所のCSS*/
background-color:#414141;/*背景色*/
padding:0px 10px;
font-weight:bold;/*文字を太字に*/
color:#ffffff;/*文字色*/
}
.entry .contents{
position:relative;
}

コメントを付けていますので、それを参考にカスタマイズしてみてください。

成功するとこんな感じになります。

これであなたのブログもアクセスアップ間違いなし？
ぜひぜひトライしてみてください！

<< 前のページへ最新 | 1 | 2 | 3 | 最初次のページへ >>

ブログ画像一覧を見る

このブログをフォローする

アメブロカスタマイズのお役立ち情報を発信していきます！