コラム・ゲーム・プロレス記事のブログです。

スポンサーリンク


【ブログ】1ページで帰られても、滞在率が長ければ「求める情報」には達したことになる理由


      [ 2014/08/20] PC・ネット・ブログ ブログ 編集

ブログやサイトのアクセスを伸ばすには「ジャンル特化型」が良いと言われています。あるひとつのジャンル絞ったサイトをつくるほうが、訪問者が目的のものを探しやすいからです。

私は、このブログを「おもちゃ箱のようになんでもあるブログ」にしたいと思ってきました。しかし、記事を多く書いていると、ある程度の問題は出てくるものです。

それが「おもちゃ箱ブログの弊害」です。

なんでも見て欲しいからゲームや不思議関係の記事を書く。そして趣味のプロレスの記事も書く。それは結果的にジャンル特化とは真逆の方向へ進むこととなりました。
【ブログ】1ページで帰られても、滞在率が長ければ「求める情報」には達したことになる理由の続きを読む


ブログへのソーシャルボタン設置なら、現状では「忍者おまとめボタン」以上のものはないと思ったワケ、そしてIE表示崩れの修正報告


      [ 2014/08/03] PC・ネット・ブログ ブログ 編集

DSNAVI 1数々のソーシャルボタンをどうにかしてブログに設置できないかと思ってきましたが、使い勝手やデザインを考慮した結果、「忍者おまとめボタン」を超えるサービスは、現状ないと思いました。

↑に設置してあるボタンたちがそうです。

ブログへのソーシャルボタン設置なら、現状では「忍者おまとめボタン」以上のものはないと思ったワケ、そしてIE表示崩れの修正報告の続きを読む


【ブログ】ようやくフォント等が落ち着きました。


      [ 2014/08/02] PC・ネット・ブログ ブログ 編集

いまどきブログスタイルココ数日、イマドキのブログスタイルにするべく、フォントを変え、文字サイズを変え、行間を変えてきましたが、なんとか「これだ!」というものに落ち着きました。

皆様にはご迷惑をおかけしました。

念頭に置いたことは「真夜中に見ても目が疲れない配色」


私が今回念頭に置いたのは、「真夜中に見ても目が疲れない配色」ということです。
白地に黒だとどうしても深夜に見ると目が疲れますので、そうならないように極力配慮しました。
これまでも疲れない配色ではあったんですが、フォントがMSPゴシックだったので、縮小率によっては線がとても細く見えてしまい、非常に見づらいという欠点がありました。

また、メイリオがWindowsの基本フォントになったことで、こちらに準拠させるべきだと判断しました。

【現在のフォント関係スタイル】

本文フォント:メイリオ
人気記事ランキング等:Meiryo UI

フォントサイズ:基本のスタイルシートにて「body」部分を「font-size:small;」に指定後、記事部分のフォントサイズを「font-size:100%;」と指定

フォントカラー:#333
行間:1.6em(1em=その時点での1文字分の大きさの行間)


これで背景に最も合った文字サイズと文字色になりました。
若干文字は小さめですが、このサイズぐらいのほうが読みやすいと判断しました。

というか、FC2ブログのテンプレートを漁っていたんですが、イマドキってだいたいこういう感じなんですよね。フォントはメイリオで、文字サイズは100%(12~13px)。

背景が当ブログのように「efefef」のようなグレー系の場合、フォントカラーは「#333」や「#666」のような少し濃い目の灰色が多いということがわかりました。

いろいろなテンプレートを見てみたんですが、最近のウェブデザインはフォントがメイリオで背景が灰色か白、文字色が「#333」や「#666」などにしているテンプレートが多かったですね。


たぶん、この組みあわせが最も目に優しいと思いますので、しばらくこれでいきます。


ここ1ヶ月の訪問者ブラウザ使用率を見てみると面白いことがわかった


      [ 2014/07/31] PC・ネット・ブログ ブログ 編集

Google Analyticsでここ1ヶ月の当ブログの訪問者の方々のブラウザ使用率を見てみて、非常に面白いことがわかりましたのでご報告いたします。

ちなみに私が使っているブラウザは「Firefox」です。
ここ1ヶ月の訪問者ブラウザ使用率を見てみると面白いことがわかったの続きを読む


試験的にフォントを「メイリオ」に変更しました(PC版)


      [ 2014/07/09] PC・ネット・ブログ ブログ 編集

今やネットのコンテンツは「メイリオ」フォントであふれていると言っても過言ではありません。

このフォントは画面上で見ても印刷しても明瞭に見えるという特徴を持つことから、さまざまなサイトやブログで使われています。

「メイリオ」フォントはWindows7から搭載されたフォントであり、これまでのフォントよりも綺麗に表示され、特に日本語が綺麗に見えるということで、現在、ほとんどのウェブサイトでこのフォントが使われています。


当ブログも流行りに乗り、フォントを「メイリオ」にしてみました。しばらく使ってみようと思います。文字サイズなどは現在調整中です。いろいろ手直しをしていきながら最適なものを見つけていきますので、ご了承ください。

【現在のフォント】

記事本文:メイリオ
サイドバーの人気記事ランキングやヘッドライン:Meiryo UI


また、スマホ版はなぜかメイリオに設定してもゴシック体に戻ってしまうようなので、仕方ないので原因がわかるまでこのままにしておきます。

まだ試験的なので、管理人が見にくいと感じたり、調整の結果、ゴシックのほうがよかったという判断をした場合、またフォントを戻すかもしれませんのでご了承ください。


文字の見えやすさは個人で違うため、画面の拡大・縮小を行なう場合には、以下の操作で行ってください。

「Ctrl」+「+」もしくは「Ctrl」+「マウスホイール↑」:拡大
「Ctrl」+「-」もしくは「Ctrl」+「マウスホイール↓」:縮小



【ネット】FC2ブログで記事投稿時に自動で「はてなブックマーク」に登録する方法


      [ 2014/07/03] PC・ネット・ブログ ブログ 編集

b.jpgはてなブックマークでツイッター連携をし、記事を投稿したら自分のアカウントのはてブに自動で記事が登録される方法を解説していきます。


【ネット】FC2ブログで記事投稿時に自動で「はてなブックマーク」に登録する方法の続きを読む


【FC2ブログ】ソーシャルボタンを横並びに揃えるためのHTMLとCSS


      [ 2014/06/12] PC・ネット・ブログ ブログ 編集

ブログに設置するソーシャルボタンを横並びにできたので、備忘録的に記録します。

sb.jpg

ブログ個別記事の下部に、↑のようなソーシャルボタンを横並びにして置けないかといろいろ試行錯誤して、やっと形にできました。

一番頭をひねったのは「Pocketボタン」の設置位置でした
私だけかもしれませんが、なぜかInternet Explorer11では、画像の上にカウント数が表示される「Vertical」タイプのボタンが消えてしまいました。

さらに不思議なことに、画像横にカウント数がある「horizontal」タイプのボタンはIEでも他のブラウザでも表示できました。原因はサッパリわかりませんが、とりあえず画像が表示されて動いているのでいいかと思いました。

そして、

ソーシャルボタンをキレイに並べる : Main's


こちらのサイトを参考に、ソーシャルボタンを横並びにすることに成功しました。

ただ、全ブラウザで共通の幅に調整することはできませんでした。FirefoxやChrome、Safariでは幅は同じなのにIEになると少しだけ幅が離れていたりするので、このあたりの違いは適宜調整をお願いします。ウチのブログではとりあえず利用者が多いSafariやChrome、Firefoxで正常に幅が表示されるように調整しました。
【FC2ブログ】ソーシャルボタンを横並びに揃えるためのHTMLとCSSの続きを読む


ブログでもっとも人気が出るのは「自分だけの体験記」


      [ 2014/06/05] PC・ネット・ブログ ブログ 編集

ノートこれ、本当にそうなんですよね。当ブログの人気記事ランキング(右側)を見ても、上位に来ているのは私が生活の中で体験した体験記ばかり。

情報のまとめや役に立つ記事も上位に来ていますが、ブログで人気が出るのはやはり「自分だけの体験記」が人気あるんじゃないかなと思ったわけです。

ブログでもっとも人気が出るのは「自分だけの体験記」の続きを読む


【FC2ブログ】記事を更新したらTwitterに通知をするときや、Twitterのウィジェットを設置するときに覚えておきたい大切なこと


      [ 2014/05/07] PC・ネット・ブログ ブログ 編集

Twitterは本当に便利なツールで、ブログ運営者にとっては更新をお知らせするためのツールでもあります。当ブログでも右サイドバーに「Twitterの反応」というウィジェットを設置しております。

さて、このウィジェットを設置するためには、ブログサービス側で設定を行わなければいけないのですが、設定を間違うと記事を更新してもこのウィジェットに載らなくなるので注意して下さい。そのために覚えておきたいことをいくつか書きます。

【FC2ブログ】記事を更新したらTwitterに通知をするときや、Twitterのウィジェットを設置するときに覚えておきたい大切なことの続きを読む


【ブログ】文章を画像の横に回りこませるために必要なcss


      [ 2014/04/29] PC・ネット・ブログ ブログ 編集

今回の記事はこちらの記事のご紹介です。

【CSS 初級】 ブログの記事で使いやすい 「画像の回り込み」 サンプルCSS : サブカルシート


結論から言うと、画像の横に文章を回りこませるのはこのタグでOKです。

<div class="hiro-left">
画像
文章
</div>


これで画像の下に書いた文章が、画像の左側に回りこみます。


そして、このタグを使うためには、css欄にあらかじめ、このcssを記述しておく必要があります。

.hiro-left,
.hiro-right {
overflow: hidden;
height: auto;
}

.hiro-left img {
float: left;
margin: 0 15px 0 0 !important;
padding: 0 !important;
border: 0 !important;
}

.hiro-right img {
float: right;
margin: 0 0 0 15px !important;
padding: 0 !important;
border: 0 !important;
}

.hiro-left p,
.hiro-right p {
overflow: hidden;
height: auto;
}


こちらを、お持ちのブログのcss欄に記載してください。
ちなみに、画像の右側に文字を回りこませたい場合には、以下の記述をしてください。

<div class="hiro-right">
画像
文章
</div>


leftがrightになっただけです。簡単ですね。




タグcloud
リンク