• 02 Apr
    • アメブロカスタマイズ目次【新】CSS編集用デザイン対応

      アメブロカスタマイズ目次【新】CSS編集用デザイン対応当目次のリンク先の記事は、2016年3月から利用できるようになった新しいタイプのCSS編集用デザイン(プロフィール画像が丸いタイプ)向けです。新旧のCSS編集用デザインに関する情報を同じブログで扱うと、読者様の困惑を招くと判断し、アメブロの新しいCSS編集用デザイン(2016/03~)対応のカスタマイズ記事は別ブログに書かせてもらうことにしました。当ブログでは、当記事で、目次のみ紹介させて頂きます。アメブロカスタマイズの基本・アメブロカスタマイズ用のデザイン「CSS編集用デザイン」に変更する方法・CSS(ブログデザインCSS)を利用してアメブロをカスタマイズする方法・アメブロの画像アップロード方法と画像URLの取得方法ヘッダーとその周辺のカスタマイズ・アメブロにヘッダー画像を表示するカスタマイズ方法・アメブロのブログタイトルやブログ説明文の位置を移動させる方法・アメブロのヘッダー下ナビゲーションバーを消す(表示しない)方法NEW!グローバルナビゲーションメニュー・アメブロにグローバルナビを設置・表示するカスタマイズ方法記事本文内のカスタマイズ・アメブロ記事内の見出し(h2,h3,h4)をカスタマイズする方法文字に関するカスタマイズ・アメブロをメイリオフォンで表示するカスタマイズ方法参考記事・CSS編集用デザイン レイアウト概要アメブロカスタマイズ 初心者にも簡単な方法を紹介!

      215
      テーマ:
  • 29 Mar
    • アメケアの有料版機能の一部を無料開放しました

      アメケアの有料版機能の一部を無料開放しましたこんにちは、松本です。先日、アメケアの有料版のみサポートしていた機能の一部が無料版でも使えるようになりました(バージョン1.0.5.0以降)。ちなみに、アメケアはGoogle Chromeでアメブロをもう少し便利に使えるようにする拡張機能です。アメケアを使うと、こんなことができます^^。アメケアの多くの機能は無料で使えますが、一部有料版でしか使えない機能があります。ちなみに、有料機能で一番利用が多いのはこの機能です。その有料版専用の機能の幾つかを、今回無料版で使えるようにしました。さて、今回無料で使えるようになった機能ですが・・・アップロード画像の縮小サイズ変更アメケアで画像をアップロードする時は、事前に設定しておいたサイズに自動的に縮小されますが、以前は、無料版では「横幅=400ピクセル」の設定しかできませんでした。これを、自由に設定変更できるようにしました。ただし、800ピクセルを超えるサイズに設定してもアメブロの方で800ピクセルに縮小されますので、実質800ピクセル以下ということになります。ページのスクリーンショットのキャプチャサイズ変更アメケアには、ブラウザで見ているページのスクリーンショット画像を作成する機能があります。この画像サイズも無料版では固定だったんですが、今回自由に設定変更できるようにしました。ただし、アメブロの画像フォルダにアップロードする場合は、やはり横幅800ピクセルの制限があります。囲み枠かんたん登録機能アメケアには、記事作成時に囲み枠を超簡単に使えるようになる機能があります。ただ、正直なところ事前に囲み枠を登録をするのが少し面倒なんですが、実は登録も超簡単にできる機能があります。これも有料版向けの機能だったんですが、無料で使えるようになりました(但し、設定画面で「 plus機能を使用可能にする」というチェックを入れる必要があります)。この機能を使うと、例えば、こちらの囲み枠などが、2クリックだけで登録できます^^まとめ以上、アメケアで無料化した機能について、簡単に紹介させて頂きました。アメケアをご利用でない方には何のことかわからない記事になってしまい申し訳ありませんでした。関連記事・囲み枠を超カンタンに付けられたりします^^・読者登録整理(マージパージ)を6分でやりました

      98
      テーマ:
  • 27 Mar
    • シンプルな見出し付き囲み枠の作成ツール(ジェネレーター)を作ってみました

      シンプルな見出し付き囲み枠の作成ツール(ジェネレーター)を作ってみましたこんにちは、松本です。昨日ご紹介したすっきりと見やすいシンプルな見出し(タイトル)付きの囲み枠のジェネレーターを作ってみました。すっきりと見やすいシンプルな見出し付き囲み枠ジェネレータージェネレーターというのは、作成ツールのようなものです。色をカラーピッカーで選べたり、実際の表示を確認しながら囲み枠の見出しや内容を編集できるので、「この方が便利かな?」と思って作ってみました。タグの編集ミスも防げますし^^なお、動作確認はGoogle Chromeで実施しましたが、最近のものなら他のブラウザでも動作すると思います。というわけで、よかったら使ってみてください。使い勝手の感想なども、もしいただけたらうれしいです^^すっきりと見やすいシンプルな見出し付き囲み枠ジェネレーター関連記事・すっきりと見やすいシンプルな見出し付き囲み枠ユーザー様の記事簡単にタイトル付きの囲み枠が作れるツール(わざめーば式)|ちょっとした「Webお役立ち情報」とかを主に書いてます。

      100
      2
      テーマ:
  • 26 Mar
    • すっきりと見やすいシンプルな見出し付き囲み枠

      すっきりと見やすいシンプルな見出し付き囲み枠2016/03/27 この囲み枠の作成ツール(ジェネレーター)を作ってみましたこんにちは、松本です。すっきりと見やすいシンプルな見出し(タイトル)付きの囲み枠を作ってみました。以下、色のバリエーションを幾つかご紹介します(と言っても見出しの上側の枠線の色が違うだけですが^^;)。タグも一緒にご紹介しますので、コピペで使って頂ければと思います。(【注意】記事エディタによっては直接コピペすると文字化けしておかしくなってしまいます。その場合、一度メモ帳などにコピペしたものを、再度エディタにコピペするとうまくいくようです。)シンプルな見出し付き囲み枠(赤)まず、赤です。本当の真っ赤(#FF0000)ではなく、少し濃い(暗めの)赤になっています。★タイトル★■囲み枠の中に書く内容■■囲み枠の中に書く内容■■囲み枠の中に書く内容■↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #cc0000;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>シンプルな見出し付き囲み枠(緑)次は、緑です。こちらも少し濃い緑になっています。★タイトル★■囲み枠の中に書く内容■■囲み枠の中に書く内容■■囲み枠の中に書く内容■↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #008800;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>シンプルな見出し付き囲み枠(青)次は、青です。やはり濃い青にしてあります。★タイトル★■囲み枠の中に書く内容■■囲み枠の中に書く内容■■囲み枠の中に書く内容■↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #0000aa;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>シンプルな見出し付き囲み枠(ピンク)そして、ピンクです。こちらは、蛍光ピンクのようなハッキリとした色です。★タイトル★■囲み枠の中に書く内容■■囲み枠の中に書く内容■■囲み枠の中に書く内容■↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #ff0066;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>シンプルな見出し付き囲み枠(その他の色)最後に、ご自分で好みの色にしたい場合のやり方をご紹介します。色コードを1か所変えるだけなので簡単だと思います。★タイトル★■囲み枠の中に書く内容■■囲み枠の中に書く内容■■囲み枠の中に書く内容■<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #000000;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>ご自分で色を決めたいときは、上記タグの「#000000」の部分を、希望の色の色コードに設定しなおしていただければOKです。色コードは、こちらのWEB色見本のサイト様が参考になると思います。また、400pxの部分を変更すると枠の幅も変更することができますので、こちらも合わせて設定してみてください。もちろん、★の部分に見出し、■の部分に囲み枠の中の内容を書くのは同じです。以上、コピペで使える、すっきりと見やすいシンプルな見出し付き囲み枠を紹介をさせて頂きました。もしよかったら試してみてくださいね。関連記事・シンプルな見出し付き囲み枠の作成ツール(ジェネレーター)を作ってみました・斜めストライプ模様の囲み枠・ワッペン風(デニム調)の囲み枠・ワッペン風(リネン調)の囲み枠・付箋風の囲み枠・黒板風の囲み枠

      126
      2
      テーマ:
  • 10 Mar
    • アメブロの「新」CSS編集用デザインでカスタマイズしなおしました

      アメブロの「新」CSS編集用デザインでカスタマイズしなおしましたこんにちは、松本です。先日、新しいタイプのCSS編集用デザインが使えるようになりましたので、早速、それを利用してカスタマイズしなおしてみました。HTML、CSSともに完全に別物になりましたので、頻繁に見に来てくださっている方ほど表示崩れすると思いますが、その場合は、お手数ですがキーボードの「F5」キーや、「Command+R」などで再読込して確認していただけたら嬉しいです。実際にやってみた印象としては、「旧タイプのCSS編集用デザインよりカスタマイズしやすいかも」と感じました。ベースのCSSで、IDやクラスではない何だか変わったセレクターで設定されている部分が多いので、そのあたりは慣れが必要な気もしますが、それ以外は前より楽かもしれません。とは言え、今まで蓄積されてきた、旧タイプのCSS編集用デザインのために考案されたCSSはほとんど使えません。また、プラグイン関係も、使えないものがかなりあります。僕が提供させてもらっているものも(アメピやアメリンクも含め)、かなり使えません(汗)ですが、アメブロですから、すぐにたくさんのアイディアが考案され、提案されて来るでしょう。僕も、外部の別ブログになりますが、できるだけ色々と考えていきたいと思いますので、もしよかったらまた覗いてみていただけたら嬉しいです。アメブロカスタマイズ 初心者にも簡単な方法を紹介!ちなみに、今日は↓こんな記事を書きました。CSS編集用デザイン レイアウト概要残念ながらカスタマイズの手法を書いた記事ではありませんが、「ヘッダー画像、フリースペースに設置するバナー、記事で使う画像などの横幅をどんなサイズにすればピッタリ収まるか?」などがわかると思いますので、もし興味を持っていただけたらご覧ください。それでは、また明日以降も記事を追加していきますので、当ブログともども、よろしくお願いします(_ _)追記:当アメブロにも目次だけ用意しました→「アメブロカスタマイズ目次【新】CSS編集用デザイン対応」

      140
      4
      テーマ:
  • 08 Mar
    • 新しい「CSS編集用デザイン」が追加されました

      新しい「CSS編集用デザイン」が追加されましたこんにちは、松本です。アメブロのカスタマイズ向けデザインテンプレート「CSS編集用デザイン」に、新しいタイプが追加されました。今回追加されたのは、昨年の秋ごろから採用されていた新しいタイプのデザインのカスタマイズ可能版です。このデザインは、名前は同じ「CSS編集用デザイン」でも全く別物で、残念ながら従来のタイプの「CSS編集用デザイン」で使っていた手法はほとんど使えません。というわけで、この新タイプの「CSS編集用デザイン」に対応したカスタマイズ手法を、今後、提案させていただこうと思います。ですが、当ブログに書いていくと、以前「【カスタム可能】ベーシック」が無くなった時のように、どれがどれに対応しているのかがわからなくなりそうですので、別ブログを立ち上げてそこに書いていく予定です。アメブロカスタマイズ 初心者にも簡単な方法を紹介!もしよかったら、こちらも時々覗いていただけたら嬉しいです。ちなみに、当記事の執筆時点では、従来のタイプの「CSS編集用デザイン」も残っていますので、今すぐに、これまで紹介されてきたカスタマイズ手法が使えなくなるというわけではないようです。(もちろん、今後使えなくなる可能性は十分に考えられますが)

      112
      テーマ:
  • 25 Feb
    • 斜めストライプ模様の囲み枠

      斜めストライプ模様の囲み枠2016/03/27 斜めストライプ模様の囲み枠の作成ツール(ジェネレーター)を作ってみましたこんにちは、松本です。先日、「CSS3:CSSのみで斜線背景を実装する」という記事に出会いまして、この記事で紹介されていたCSSを使った斜めストライプ模様がとても良い感じだったので、参考にさせてもらって囲み枠を作ってみましたので、紹介させてもらいます。いつものように、タグも一緒に書いておきますので、よかったらコピペでご利用下さい。(【注意】新エディタをお使いの場合は、直接コピペすると文字化けしておかしくなるようです。その場合、一度メモ帳などにコピペしたものを、再度新エディタにコピペするとうまくいくようです。)なお、こちらのタグは画像を使用していませんので、アメブロ以外でも使えると思います。斜めストライプ模様の囲み枠(ブルーグレー)まず、ブルーグレーっぽい色の斜めストライプ模様の囲み枠です。参考にさせてもらった記事で紹介されていたものに近い色にしてみました(同じ色ではありません^^)。斜めストライプの囲み枠↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。<div style="background-size:24px 24px;background-color:#456;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>斜めストライプ模様の囲み枠(赤)次は、赤い斜めストライプ模様の囲み枠です斜めストライプの囲み枠↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。<div style="background-size:24px 24px;background-color:#f00;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>斜めストライプ模様の囲み枠(赤)次に、オレンジ色の斜めストライプ模様の囲み枠です斜めストライプの囲み枠↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。<div style="background-size:24px 24px;background-color:#f90;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>斜めストライプ模様の囲み枠(ピンク)そして、ピンクの斜めストライプ模様の囲み枠です斜めストライプの囲み枠↑この囲み枠(飾り枠)のタグは次のようになります(★の部分に内容を書きます)。<div style="background-size:24px 24px;background-color:#f6c;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>自分で色を決めたい場合最後に、自分で色を決めたい場合について、やりかたを紹介します。簡単に色を変えられるように作りましたので、初心者でも大丈夫だと思います。<div style="background-size:24px 24px;background-color:#000000;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>自分で決めた色の囲み枠を作りたいときは、上記タグの「#000000」の部分を、希望の色の色コードに設定しなおして下さい。すると、「設定した色と、設定した色をもう少し明るくした色の2色」の斜めストライプ模様の囲み枠ができます。色コードは、こちらのWEB色見本のサイト様が参考になると思います。なお、当記事でご紹介したタグは、CSS3という比較的新しい技術を多用していて古いブラウザでは正常に表示できない可能性がありますのでご注意下さい(単色で表示されたり、角丸部分が直角になったりします)。以上、コピペで使える斜めストライプ模様の囲み枠の紹介をさせて頂きました。もしよかったら試してみてください。関連記事・ワッペン風(デニム調)の囲み枠・ワッペン風(リネン調)の囲み枠・付箋風の囲み枠・黒板風の囲み枠アメブロを仕事に活用するためのアイデアノート

      170
      6
      テーマ:
  • 17 Jan
    • 「アクセスしたウェブサイト上にある自分の全データの読み取りと変更」って個人情報を抜き取るの?

      「アクセスしたウェブサイト上にある自分の全データの読み取りと変更」って個人情報を抜き取るの?松本です、こんにちは。こんな質問を頂きました。最近アメケアにたどり着きまして、すごい便利な拡張機能だな!!と感動しました!もっと広がったら楽しいなと思って、お友達に講座を開いて色々教えたいと思ったのですが、拡張機能を入れる際に出てくる注意書きにびっくりして友達に広げていいものかどうか悩んでいます。次の権限にアクセス可能:・アクセスしたウエブサイト上にある自分の全データーの読み取りと変更↑これです。これは、いろんな個人情報を抜き取りますがいいですか?という意味なのでしょうか?アメケアを気に入ってくださったようで嬉しいです、ありがとうございます。で、ご質問への回答ですが、確かにそのように感じる方がいても不思議ではないメッセージですよね。正直に言います。そういうことはしませんが、そのように作ることも可能かもしれません。「かもしれません」というのは、抜き取るようなことをしようと思ったことがないので経験がないためわからないんです。特に、もしやったらセキュリティソフトに阻止されるのか?といったあたりがわかりません。ですので、もちろん、そんな作りにはなっていませんし、今後もしません。そもそも、仮にそんなふうに作ったとして、それを「僕が作りました」と言って嬉しげに公開する人は、よほどの間抜けか、相当肝の据わった「悪いヤツ」だと思います。ちなみに、この「『アクセスしたウェブサイト上にある自分の全データの読み取りと変更』にアクセス可能な権限」というのが何かと言うと・・・、Google Chromeでウェブページ開いた時に見れる情報の全てにアクセスできるというような意味です。つまり、悪意を持って作成すれば、パスワードも、アメンバー記事の内容も、メッセージの内容も、たぶん見れるでしょう。ですが、これはアメケアに限ったことではなく、同種の便利ツールがあれば、基本的には同様だと思って差し支え無いと思います。また、アメケアがこの権限を要求するのは、意味もなくメールアドレスへのアクセス権限を要求する怪しいFacebookアプリなどとは違うということはご理解ください。実際、こうでなければアメケアのほとんどの機能は実現できませんので、全く何の役にも立たない拡張機能になることでしょう。それに、このような情報にアクセスできるのはアメケアに限ったことではなく、他の多くの便利なChrome拡張機能やChromeアプリでも同じです。また、(Chrome上ではなく)PCに直接インストールするソフトウェアの場合は、もっと深い部分の情報まで見れます(たとえ個人が作ったフリーウェアやシェアウェアであっても)。つまり、作成者や提供者に悪意があれば、これらの配布物は何れも危険なものになり得ますが、悪意がなければ便利で有用なユーティリティになるわけです。実際、以前、ユーザーの入力内容を某隣国のサーバーへ勝手に送信するという、とあるAndroidアプリが問題になったこともあります。また、コンピューターウィルスのように、悪意のある第三者が、本来は安全なものを危険なものへと変貌させることもあります。ですから、セキュリティソフトを導入していないといったユーザーの使い方にもよりますし、また、アメケアを狙った悪意ある第三者が絶対に現れないとは言えませんので、残念ながら100%安心ですという保証はできません。でも、少なくともアメケアはそのような悪意を持って作ってはいませんので、基本的には、ほかの「ユーザーさんが便利に使ってくれたら嬉しい」という気持ちで作成されたユーティリティと同様と思っていただければ、僕もとても嬉しいです。

      130
      6
      テーマ:
  • 11 Jan
    • アメブロではできないこと?

      アメブロではできないこと?松本です。こんにちは。アメブロではできないと「言われている」こと、色々ありますね。例えば「商用利用」。聞く人にもよりますが、・完全に禁止・絶対できない・やったら消されるという人もいます。「Ameba利用規約の第13条(禁止事項)の(4)当社の承諾のない商業行為」の部分がそのように読み取れるからかな?と思いますが、これって本当でしょうか?気になるときは検索エンジンに聞いてみましょう。「アメブロ 商用利用」で検索してみると・・・、↓見つかりました。アメブロの商用利用は禁止なのか? 公式に確認してみた2012年の記事で、有り難いことに、実際に運営さんに聞いて回答をもらった内容を載せて下さってます。(そういえば、商用利用の禁止を声高に言っている人で、運営さんからそういう回答をもらったという人は見たことがありません)要約すると、真っ当にやってる商売の宣伝なら問題なしということみたいですね。ただし、真っ当かそうでないかは見方によるのがちょっと不安な部分ではあります。自分では真っ当だと思っていても、例えば扱っている商品の業界を全く知らない人から見ると、非常に怪しいもののように映ることって絶対にありますので。なので、扱っている商品が、また売り方が「全くの素人さんから見てどう映るか?」ということも考えて、アメブロでできるかどうかを考えてみるといいかもしれませんね。(個別の判断は僕にはできませんが^^;)また、個人情報のやりとりや、決済が絡む行為は、やはりアメブロ上ではやらないのが良さそうですね。でも、「商用利用は絶対できない」というわけではないと言えそうです。できないと思い込んでいるだけかも?ところで、先日、できないと思い込んでいたのに実はできることがわかって嬉しい経験をしました。あ、たいしたことではありません。もうすぐ有効期限が来て消えてしまう楽天ポイントを使って(間接的にですが)Amazonでお買い物をしたんです。楽天カードなどを持っている人はご存知だと思いますが、楽天のポイントってEdyという電子マネーに1:1で交換できます。そして、このEdyを使ってAmazonで支払いができます。知ってました?僕はこんなことできないと思ってたんですが、Googleでちょっと調べたらすぐにやり方が見つかりました。実は、できないと思っていることでもやり方を知らないだけで本当はできることも多いかもしれませんね。そう言えば、「アメブロにはGoogleアドセンス広告は貼り付けできない」って言われていますが、これも実は・・・(笑)

      177
      4
      テーマ:
  • 09 Jan
    • アメブロのアクセス解析はアクセス数が水増しされている?

      アメブロのアクセス解析はアクセス数が水増しされている?松本です。こんにちは。「アメブロのアクセス解析はアクセス数が水増しされているので使いものにならない」と、よく言われています。これって本当なんしょうか?確かにアメブロのアクセス解析と「Google Analytics」などの他社製のアクセス解析を比較すると、アクセス数にかなりの違いが出ます。これまでに何度か比べたことがありますが、いつ比較しても、必ずアメブロのアクセス解析のほうがアクセス数が多くなりました。でも、実はこれ、単にアクセスの数え方の違いだと思っています(絶対に水増しがないとまでは言い切れませんが。)。その数え方の違いは、見かたによっては確かにあまり喜ばしくない部分もあります。ですが、この水増しに見えるアクセスの一部は、実は、アメブロのアクセス解析でしか見れない情報です。ですので、できることなら活用していきたいですね。アメブロのアクセス解析でしか見れない情報では、アメブロのアクセス解析以外の、例えば「Google Analytics」などでは見ることができない情報にはどんなものがあるでしょうか。PC・スマートフォン・ガラケーのアクセス数の比率アメブロは、PC、スマホ、ガラケーで、全てページの見え方が全く異なります。例えば、PC向けのカスタマイズCSSやサイドバーの内容が、スマホやガラケーには反映されないのは有名ですよね。ですので、ほとんどのアクセスがスマホだったりする場合、PC向けのカスタマイズに費用をかけても費用対効果は期待できませんよね。しかし、一般的な社外製のアクセス解析ツールはアメブロのスマホ用画面やガラケー用画面では動作しません。ですので、これらの比率を知るためには、アメブロのアクセス解析を見る必要があるわけです。RSSリーダー(フィードリーダー)でどのくらい読まれているかまた、ブログがRSSリーダーからどのくらい読まれているかも知ることができます。ブログをRSSリーダーに登録して読んでいる読者が多い場合は、RSSリーダーで見た時に見やすいように記事を書くべきでしょう。ですが、スマホやガラケー同様、RSSリーダーを経由して記事が読まれる場合も、社外製のアクセス解析ツールでは基本的にアクセスを計測できません。アメブロのアクセス解析でも、あまり詳しい情報は取れませんが、RSSリーダーからのアクセスがどの程度あるのかはわかるようになっています。ちなみに、RSSリーダーというのは、ブログから取得できるRSSフィードという情報を使って、ブログを訪問することなくブログ記事を読めるツールです。有名どころでは、feedlyなどがありますね。もし、本ブログをfeedlyに登録して読みたい場合は、以下のURLにアクセすることで可能になります。feedlyに登録する記事以外のページのアクセスまた、他にも、画像拡大ページや画像一覧ページのアクセス数も表示されます。これらに関しては、下手にカウントされると迷惑と感じる方も多いと思いますが、ブログのジャンルによっては、どんな画像に読者が興味を示すのかを知る指標として利用することができるかもしれませんね。あと、僕は確認できていないんですが、プロフィールページのアクセス数も表示されると聞いています。せっかくなので有効利用をというわけで、最初から「使えない!!」と決めつけて無視してしまうにはちょっともったいない気がします。100%完璧で完全無欠の機能は、恐らくこの世に存在しませんし、せっかくある機能ですので、利用できる良い所をうまく使っていきたいものですね。

      219
      4
      テーマ:
  • 07 Jan
    • 適切な依怙贔屓(エコヒイキ)でリピーターが増える?

      適切な依怙贔屓(エコヒイキ)でリピーターが増える?松本です。こんにちは。通常のリアルなお店の場合に店主(売り手)とお客様(買い手)がいるように、ブログの場合もブログ管理人(書き手)と読者(読み手)がいます。どちらの場合もそうですが、基本的にはお互い持ちつ持たれつですよね。店主や管理人は、求める人(お客様や読者)がいるから提供を続けていけるわけですし、逆に、お客様や読者は、求めるものを提供する人(店主や管理人)がいるからある種の満足を得ることができます。最近、新規のお客様を獲得するための特典を強化しすぎたために、既存のお客様を蔑ろにしている酷い事例をよく目にします。わかりやすいところだと、携帯電話業界なんか、まさにそんな感じだと思いませんか?(どうやら今年から改善されていくらしいですがどうなるんでしょうね)会社を乗り換えて新規契約してくれる人へのサービスを異常に手厚くしつつ、長期利用者への割引サービスを削ったり・・・。逆に利用者の方も利用している携帯会社への愛など微塵もなくなって、会社乗り換えでいくらキャッシュバックを得られるのかに目の色を変える・・・。テレビ番組などで「美しい日本人の心」についての放送を見たあとで、こういう現実に戻った時は、なんだか悲しくなってしまいますね。ちなみに僕は、ある携帯電話会社を15年以上利用し続けていますが、さすがにもう嫌気が差してきています。「本当は、もっと既存のユーザーを大事に、エコヒイキと言われるくらいに大事にしたほうが、リピーターも増えて業績も上がるんじゃないのかなぁ?」と思ったりもしますが、素人考えなんでしょうかね。・・・ということを考えていて「はっ!」と思いました。「僕も似たようなことをしてるんじゃないだろうか?」「ブログで良くしてくれた読者さんに冷たくしなかっただろうか?」「商品を購入してくださってるお客様にちゃんと手厚くサービスしただろうか?」反省しながら、ブログを見直し、改善していきたいと思います。

      186
      2
      テーマ:
  • 19 Dec
    • アメブロのデザインで使われているWebフォントを調べてみました

      アメブロのデザインで使われているWebフォントを調べてみました松本です、こんにちは。最近、アメブロのPC向けやスマホ向けのデザインで、ウェブフォントがアイコンとして使われるようになりましたね。例えば、最近のアメブロ運営さんが用意しているデザインでも、ボタンのアイコンに使われたりしています。これらは画像ではなく文字なので、通常の文字と同様に・・・、小さくしたり・・・大きくしたり・・・色を変えたり・・・影をつけたり・・・と、CSSで色んな事ができます。ざっと見てみたところ、アメーバ運営さんが用意しているウェブフォントで、以下の様なアイコンが表示できるようです。ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!"#$%&()=-~^|{}[]:;+*@`<>,.?/_'GHbcfghilrsw12345689!"#$%&){+↑こちら、RSSフィードから見ている人など、ウェブフォントが見えない人には意味のわからない文字の羅列になっていると思いますが、ウェブフォントが見える人には、以下の画像のようにアイコンが並んで見えています。これらのアイコン、コピーしてメモ帳などに貼り付けてみるとわかると思いますが、実はどれも通常の文字です。例えばA(アメーバのロゴマーク)は、アルファベットの「A」です。「A」がA(アメーバのロゴマーク)として表示されるようにスタイル設定されているわけですが、この設定ができていないと、普通に「A」と表示されてしまいますので、記事内で使う絵文字の代わりとしては使いにくいですね。ですが、ページデザインでアイコンとして用いると、いちいち画像のURLを指定せずにアイコンを表示できますので、手軽で使いやすくなります。今後は、アメブロでも、これらのウェブフォントのアイコンを用いたカスタマイズ案がたくさん提案されるようになるのではないかと思っています。僕も機会があれば、何か提案させてもらいますね^^

      5
      テーマ:
  • 23 Nov
    • アメブロのテーマを削除できないという声に答えました

      アメブロのテーマを削除できないという声に答えました松本です、こんにちは。アメブロを使っていて、「記事数が0件になっているのにテーマを削除できないんです」という経験をした人や相談された人って多いんじゃないでしょうか?僕も、そんな相談を受けたことが何度もあります。アメブロの不要になった記事の削除やテーマの整理をして、記事数が(0)と表示されているのに、なぜかテーマを削除することができないんですよね。原因は、ご存じの方も多いと思いますが、下書き記事が残っているからです。テーマを削除したくても、そのテーマに属する下書き記事が残っていると、記事数は(0)なのに削除できないんですね。しかも、下書き記事を探すのって、予想以上にたいへんですよね。1000記事とか2000記事とかあるブログから、たったひとつの下書き記事を探すなんて、もう考えただけでも目眩がしそうです。・・・という声を聞いて、僕が作っているGoogle Chrome拡張機能のAmeCareに搭載した機能が、下書き記事一覧を表示という機能(有料版の機能です)。これを使うと、↓下書き保存した記事だけを、ずらずらっと一覧表示します。そう、たったこれだけ(笑)。この一覧の記事タイトルをクリックすると、その記事を編集する記事エディタの画面が開きますので、テーマを変えるのも、再公開するのも、コピペ元にするのも簡単です。また、日付の部分をクリックすると、↓下の画像のような、管理ページ内のその月の記事一覧が開きますので、削除したい場合はここから削除ボタンをクリックすればOKです。ちなみに、場所は↓ここにあります(すみません、AmeCareユーザーでない方には何のことかわかりませんね)。なお、その下に見えてる(マージパージ)という機能も好評で、たとえば↓こちらの方が使ってレポートしてくれました!最強タッグ Google Chrome と AmeCare|ブログは楽しく・面白くありがとうございまーす!時短に貢献できて嬉しいです^^!!

      8
      テーマ:
  • 22 Nov
    • アメブロのトップページの変更をGoogleの検索結果に素早く反映させる

      アメブロのトップページの変更をGoogleの検索結果に素早く反映させる松本です、こんにちは。通常、アメブロの記事の更新はPINGなどの方法を利用して積極的に検索エンジンに通知する仕組みを取り入れている方が多いと思いますが、トップページ(メッセージボードなど)を変更した場合は特に何もせず、Googleのクローラーの巡回に任せっきりという場合が多いのではないでしょうか?でも、それではいつ検索結果に反映されるかわかりません。特に、メッセージボードに重要な変更を加えた場合などは、出来る限り短時間で検索結果に反映されるようにしたいものです。実は昨日、本アメブロにメッセージボードを追加しました。メッセージボードは長い間表示していなかったのですが、ある理由から追加することにしました。その際、Googleにトップページの内容変更を通知する手続きを行ったところ、すぐに認識されて(インデックスされて)検索結果にも短時間で表示されるようになりましたので、そのやり方を紹介させてもらいたいと思います。Google Search Consoleに登録するまず、今回の操作を行うためには、前準備として、ご自身のアメブロをGoogle Search Console(旧ウェブマスターツール)に登録しておく必要があります。ですので、もしまだの場合は先にこちらをやっておいて下さい。Google Search Consoleへの登録をすると「このアメブロのオーナー(管理人)は私です!」とGoogleに伝える事ができ、今回の機能のほかにも様々な便利な機能が使えますので、ぜひ登録しておくことをお勧めします。Fetch as Googleを使ってトップページに変更があったことを伝えるアメブロをGoogle Search Consoleに登録すると、Fetch as Googleという機能を使ってページ内容の変更を通常よりも速くGoogleに知らせることができます。まず、Fetch as Google機能を利用するには、Google Search Consoleの左サイドバーメニューから[クロール]→[Fetch as Google]をクリックします。Fetch as Googleページが開いたら、まずは、アメブロのトップページのURLが表示されていることを確認してください。そして、[取得してレンダリング]ボタンをクリックします。すると、トップページの最新の状態がGoogleに読み込まれて、下のリスト部の一番上に読み込んだページ(つまりアメブロのトップページ)に関する行が追加されます。また、読み込みが正常に行われれば、その行に[インデックスに送信]というボタンが表示されますので、続けてその[インデックスに送信]ボタンをクリックします。これでトップページへの変更がすぐにGoogleに認識されて、クローラーがすぐにアメブロのトップページを読みに来て、短時間でメッセージボードの内容がGoogle検索にヒットし検索結果に表示されるようになりました。日常的に利用する機能ではないちなみに、今回ご紹介した「Fetch as Google」機能を利用すると、通常よりも素早くGoogleにページの変更を伝えることができますが、基本的には日常的に利用する機能ではありません。利用回数の制限もありますし、「とにかく早く伝えないととても困ったことになる」ようなケースで利用すべきで、無闇に使うと逆にペナルティを受ける可能性もあると聞きますので注意すべきでしょう。ここぞという時に利用することをお勧めします。なお、Googleに知らせることはできても、検索結果に出るかどうかはGoogleのシステムの判定基準によりますので、100%表示されるとまでは言えません。以上、Google Search Console(旧ウェブマスターツール)のFetch as Google機能を使ってアメブロのトップページへの変更をGoogleの検索結果に素早く反映させる方法をご紹介しました。よかったら参考になさって下さい。

      4
      テーマ:
  • 20 Nov
    • カスタマイズやSEO等ブログ運営方法の本当の正解は?

      カスタマイズやSEO等ブログ運営方法の本当の正解は?松本です、こんにちは。ブログを書いている、特に仕事関係でブログを使っている方は、・もっとアクセスを増やしたい・もっと記事を読んでもらいたい・もっと新規顧客を集客したい・もっと売り上げを伸ばしたいなどと考えながら、日々、記事に書くネタを考えたり、記事の書き方を工夫してみたり、カスタマイズに頭を悩ませたりと苦労されている方が多いでしょう。僕も数年間、アメブロを続けながら、カスタマイズやSEOなど、色んなノウハウやテクニックやマインドを勉強してきました。でも、やればやるほど分かってくるのが・・・、正解はないということ。僕は理系脳だからか、「これが答です」と言える100%再現可能な正解がないのは気持ちが悪くて仕方がないので、常にそれを探して右往左往してしまいます。経営や経済、子育てや人間関係など、人の営みは基本的に正解のないものばかりなので、「正解がないって、最初からわかってたことでしょ?」とも思ったりもするんですが、それでも何かないものかと探してしまいます。でも、やっぱりそういうものはありませんね。つまり、全ては、やってみないとわからないということです。ただ、闇雲にジタバタと暴れまわるだけではますます正解らしきものは見えてきません。そこで、多くの人は、「先生」と呼ばれる人たち等に、・かつて誰かがやってうまく行ったこと・今後はこれがうまく行くんじゃないかと予想することなどを教えてもらうわけですが、提供できるのはあくまでもその程度のものですから、それが絶対に「正解」だと思っていると痛い思いをすることも多々あります。中には、痛い思いをさせられた!と、その「先生」を恨んだりする人も出てきます。基本的には、・天気予報で晴れと言っていたのを信じたけど雨に降られた・株価が上がるという情報を信じて買ったけど暴落した・白いんげんダイエットが良いと聞いてやってみたら体調を崩したといったことと同じで、リスクを考えずにあまり信用しすぎると、そういうことも起こり得るんですね。・SEOの先生が狙ったキーワードを10%記事に含めると検索で上位表示されると言った・ブログの先生が文字サイズを15ピクセルにカスタマイズするとよく読まれると言った・ライティングの先生が読者には「あなた」という主語を使うようにと言ったなども、実はそれが正解かどうかはわかりません(ちなみに僕が不正解だと思っていることばかり挙げました)。ではどうすればいいのか?というと、それは、トライ・アンド・エラー(ほんとは、「trial and error」らしいですね^^)つまり、試してみる→検証する→良いものだけ続ける(良くないものはやめる)を繰り返すということです(「試してみる」の前にシミュレーションができればもっといいですね)。なので、良いと言われていることは試してみるとして、その前に、試す内容の良し悪しを判断できる環境にしておくことが大切です。ちなみにブログの場合、その判断材料として重要なものの一つがアクセス解析になると思いますが、そういった意味では、アクセスに関する情報をきちんと取りにくいアメブロは、それを取れるシステムと比較して少し不利かもしれません。

      3
      テーマ:
  • 18 Nov
    • 読者登録整理(マージパージ)を6分でやりました

      読者登録整理(マージパージ)を6分でやりました松本です、こんにちは。昨日の夜中に、ちょっと久しぶりに、読者登録先の整理、いわゆるマージパージ(?)をしました。普通は、読者登録を1000人のアメブロのしてしまって、「もうこれ以上登録できませーーーん」となった時にやる作業だと思います。アメブロでは、相手に知らせての読者登録が1000人までしかできませんので、読者登録している意味があまりなくなってしまったブログへの読者登録を解除して、新たに別のブログに読者登録できるようにする作業です。まあ、僕は全然1000人も登録していませんが(汗)、そこそこ定期的にやってます。やり方は簡単ですが、一般的に作業量は膨大になるので、たいていは一日がかり、人によっては数日かかる場合もあるようです。ですので、これを「代行」する業者さんもちらほらいらっしゃいますね^^ちなみに僕は最近は、(1) 3ヶ月更新されていないブログは読者登録解除(2) 僕から一方的に読者登録している相手は読者登録解除(3) (1)や(2)に当てはまるブログでも、解除したくないブログは残すという基準でやります。・・・まず、(1)番はそんなに大変じゃない。読者登録先のブログを一つ一つ開いていって、最新更新日をチェックして、3ヶ月よりも前だったら読者登録を解除すればOKなので、概ね読者登録数のページを確認するだけです。でも、(2)番は大変です。こちらから読者登録してる人から、こちらへの読者登録があるかどうかを、読者の一覧から一つ一つチェックしていきます。・・・作業量が膨大すぎで・・・僕には無理です・・・。というわけで、もちろんもっと楽ちんな方法でやりました^^そしたら↓6分で終わりました\(^o^)/僕が作った機能なので手前ミソで申し訳ないですが、もうこれなしではできません^^ちなみにこの機能は有料版の機能なんですが、無料で使える機能はこの方が紹介してくれました!。

      30
      テーマ:
  • 17 Nov
    • 読者目線の記事の書き方

      読者目線の記事の書き方松本です、こんにちは。ネットで発信している人たちの「読者目線の記事の書き方」というものに対する考え方にちょっと興味があって、ググりつつ色んなブログやサイトをみてみたんですが、僕と同じ考えを書いている人が見つからなかったので記事にしてみることにしました。僕の妄想みたいなものなので、これが正しいだなんて口が裂けても言えませんが。僕が考える読者目線の記事の書き方は、大きく分けて2種類あります。一つは、現在の読者が求める記事を書く。もう一つは、未来の読者が求める記事を書く。現在の読者が求める記事を書くまず「現在の読者が求める記事を書く」ほうは、アメブロでもよく言われていると思いますが、・今どんな読者がいて・その読者が求めているのは何かを考え・その読者に喜んでもらえる工夫をしながら記事を書く。という、はじめに読者ありきで、その読者に向けて記事を書くというやり方です。これがうまく回ると、ほとんどの記事にたくさんのコメントがつき、一部の読者との交流が深まり、その読者の紹介で読者が増えていきます。未来の読者が求める記事を書くこれに対して「未来の読者が求めている記事を書く」ほうは、アメブロではあまり言われていない気がします。こちらは、・今どんな記事を書きたくて・その記事を求めている人はどんな人かを考え・その記事を求めている人に届く工夫を施しながら記事を書く。という、はじめに記事ありきで、その記事を必要としている未来の読者に届けようというやり方です。こちらは、アクセスの割にコメントはつかず、読者との交流も深まりにくいですが、多くの人に届き深く響く記事を書くと、突然どこからともなく読者がやって来ます。どちらの方がいいんでしょうか?で、結局のところ、どちらがいいのか。まあ、どちらもいいですよね。両方できるときっと一番いいんでしょう。でも、難易度は明らかに「現在」の方が低く「未来」が高いですよね。具体的にどうすればいいのかも、「現在」の方なら何となく説明できそうですが、「未来」の方は僕には無理な気がします。ですから、たぶん多くの人にとっては「現在」の方を勧めやすいですし、実際にこれまで勧めているのを目にする事が多かったです。まあ、僕も勧めたような記憶があります。ちなみに僕は、今は、断然「未来」の方に魅力を感じるんですが。

      13
      テーマ:
  • 19 Oct
    • アメブロのコメント内容をCSSだけで吹き出し風にする

      アメブロのコメント内容をCSSだけで吹き出し風にするわざめーば、こと松本です。こんにちは。アメブロの記事内で吹き出し風の囲み枠を使う方法を書いたあと、ちょっと変えるだけでコメントに使えそうだと思ったのでCSSを作ってみました。画像などは使わないので、色や角の丸みなど、好み応じて変更していただけます。設定は、次のコードをご自分のブログのCSSの最後に追加するだけでOKです(CSS編集用デザイン専用です)。/* コメント内容を吹き出し風に */.commentBody {  position: relative;  display: inline-block;  margin: 0 5px 0 0;  padding: 15px 10px;  vertical-align: top;  border-style: solid;  border-width: 1px;  border-color: #cccccc; /* 枠線の色 */  border-radius: 10px; /* 四隅の丸み */  background-color: #ffffff; /* 内側の背景色 */  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */  margin-bottom: 15px; /* ツノの突き出し量+余白5 */}.commentBody:before {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #cccccc; /* 枠線の色 */  border-width: 10px; /* ツノの突き出し量 */  left: 15px; /* ツノの位置(左から) */}.commentBody:after {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #ffffff; /* 内側の背景色 */  border-width: 9px; /* ツノの突き出し量-1 */  left: 16px; /* ツノの位置+1(左から) */}/* オーナーコメントの吹き出し */.ownerComment .commentBody {  background-color: #fff0f0; /* 内側の背景色 */}.ownerComment .commentBody:after {  border-top-color: #fff0f0; /* 内側の背景色 */}色など変更されたい場合は、注釈(/*と*/の間の文字)を参考にやってみてくださいね。以上、アメブロのコメント内容をCSSだけで吹き出し風にする方法をご紹介しました。もしよかったら試してみてください。なお、冒頭の画像は「なんしか、やってみたがりな方(笑)」のブログに適用した場合です^^勝手に使ってしまいすみません(_ _)ちなみに、当ブログはコメントを閉じているので、当ブログでのテストできませんでした(汗)

      1
      テーマ:
    • アメブロの記事内で会話を吹き出しで書いてみる

      アメブロの記事内で会話を吹き出しで書いてみるわざめーば、こと松本です。こんにちは。最近、SNSのボタンなどでよく見かけるCSSを使った吹き出しを参考にしてアメブロ記事内で試してみたので、無理やり会話風に書いてみます(汗)---松本さん!アメブロの記事を会話形式で書きたいんですが・・・、アメブロをカスタマイズして吹き出し風に表示することってできますか?はい、できますよ。そうなんですか?ぜひ教えて下さい。じゃ、まずは次のコードをご自分のブログのCSSの最後に追加して下さい。/* 吹き出し */.fukidashi {  position: relative;  display: inline-block;  margin: 0 5px;  padding: 15px 10px;  vertical-align: top;  border-style: solid;  border-width: 1px;  border-color: #cccccc; /* 枠線の色 */  border-radius: 10px; /* 四隅の丸み */  background-color: #fffff0; /* 内側の背景色 */  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */  margin-bottom: 15px; /* ツノの突き出し量 */}.fukidashi:before {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #cccccc; /* 枠線の色 */  border-width: 15px; /* ツノの突き出し量 */  left: 30px; /* ツノの位置(左から) */}.fukidashi:after {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #fffff0; /* 内側の背景色 */  border-width: 14px; /* ツノの突き出し量-1 */  left: 31px; /* ツノの位置+1(左から) */}/* 吹き出し2(右下に下向きツノ) */.fukidashi2 {  position: relative;  display: inline-block;  margin: 0 5px;  padding: 15px 10px;  vertical-align: top;  border-style: solid;  border-width: 1px;  border-color: #cccccc; /* 枠線の色 */  border-radius: 10px; /* 四隅の丸み */  background-color: #f0ffff; /* 内側の背景色 */  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */  margin-bottom: 15px; /* ツノの突き出し量 */}.fukidashi2:before {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #cccccc; /* 枠線の色 */  border-width: 15px; /* ツノの突き出し量 */  right: 30px; /* ツノの位置(右から) */}.fukidashi2:after {  position: absolute;  content: "";  width: 0;  height: 0;  top: 100%;  border-style: solid;  border-color: transparent;  border-top-color: #f0ffff; /* 内側の背景色 */  border-width: 14px; /* ツノの突き出し量-1 */  right: 31px; /* ツノの位置+1(右から) */}記事で使うときは、<div class="fukidashi">★</div>というタグで使います(黄色い方)。「★」の部分を吹き出し内に書きたい内容に変更して下さいね。青い方は、以下のようなタグになります。<div class="fukidashi2">★</div>あ、でも・・・、会話なら・・・、こんな形の方がいいかもしれませんね。これもCSSを書いときます。/* 吹き出し(左向きにツノ)*/.fukidashi_l {  position: relative;  display: inline-block;  margin: 0 5px;  padding: 15px 10px;  vertical-align: top;  border-style: solid;  border-width: 1px;  border-color: #cccccc; /* 枠線の色 */  border-radius: 10px; /* 四隅の丸み */  background-color: #fffff0; /* 内側の背景色 */  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */  margin-left: 15px; /* ツノの突き出し量 */}.fukidashi_l:before {  position: absolute;  content: "";  width: 0;  height: 0;  right: 100%;  border-style: solid;  border-color: transparent;  border-right-color: #cccccc; /* 枠線の色 */  border-width: 15px; /* ツノの突き出し量 */  top: 10px; /* ツノの位置(上から) */}.fukidashi_l:after {  position: absolute;  content: "";  width: 0;  height: 0;  right: 100%;  border-style: solid;  border-color: transparent;  border-right-color: #fffff0; /* 内側の背景色 */  border-width: 14px; /* ツノの突き出し量-1 */  top: 11px; /* ツノの位置+1(上から) */}/* 吹き出し(右向きにツノ)*/.fukidashi_r {  position: relative;  display: inline-block;  margin: 0 5px;  padding: 15px 10px;  vertical-align: top;  border-style: solid;  border-width: 1px;  border-color: #cccccc; /* 枠線の色 */  border-radius: 10px; /* 四隅の丸み */  background-color: #f0ffff; /* 内側の背景色 */  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */  margin-right: 15px; /* ツノの突き出し量 */}.fukidashi_r:before {  position: absolute;  content: "";  width: 0;  height: 0;  left: 100%;  border-style: solid;  border-color: transparent;  border-left-color: #cccccc; /* 枠線の色 */  border-width: 15px; /* ツノの突き出し量 */  top: 10px; /* ツノの位置(上から) */}.fukidashi_r:after {  position: absolute;  content: "";  width: 0;  height: 0;  left: 100%;  border-style: solid;  border-color: transparent;  border-left-color: #f0ffff; /* 内側の背景色 */  border-width: 14px; /* ツノの突き出し量-1 */  top: 11px; /* ツノの位置+1(上から) */}記事で使うときは、左にツノが出ている方が、<div class="fukidashi_l">★</div>というタグで使います。「★」の部分を吹き出し内に書きたい内容に変更するのは同じです。また、右にツノが出ている方は、以下のようなタグになります。<div class="fukidashi_r">★</div>ちなみに、これらのタグは吹き出し部分だけで、顔の画像は普通に横に置いただけです。はい。      あと、アメブロカスタマイズの常ですが、残念ながらスマホには(普通は)反映されませんので、うまく使おうと思うと、もう少し工夫が必要かもしれませんが、ひとまずご紹介です。よかったら試してみてくださいね。ありがとうございました^^

      7
      テーマ:
  • 19 Sep
    • 読まれるブログ、成果に繋がるブログのために知っておくべきことは?

      読まれるブログ、成果に繋がるブログのために知っておくべきことは?わざめーば、こと松本です。こんにちは。ブログで、集客や商品販売、アフィリエイトなど、ブログを訪れた人にクリック等の何かアクションをしてもらうことで成果をあげようと考えている人は少なくありません。そこで、ブログの訪問者にアクションすることを促すため、・見やすいブログ・読みやすい記事・わかりやすい動線などなど、いろんな工夫をするわけです。ところが、世に言われている通り一辺倒な通説だけを元にこれらの工夫をしても、「なかなかうまくいかない・・・」という人も多いのではないでしょうか?どこが見られているのかを見てみる僕は、訪問者にとっての見やすさ、読みやすさ、わかりやすさを考える時、まずはどこが実際に見られているのかを知って、それを元に方針を立てるのが良いと思っています。例えば、↓こういうものがあります。スクロールマップというもので、これを見ると、ページのどの部分がよく見られているのかが色の濃さで一目でわかります。上記の画像では、敢えて全く同じに見えるページを2つ並べてみたんですが、実は別のページです。左が記事ページで、右がトップページです。内容は全く同じなのに、見られ方が全然違うのが一目瞭然でわかると思いますが、いかがですか?もちろん、ページを訪れる人の目的はそれぞれではあるんですが、アクセス解析その他の情報も合わせて考えると、僕は、概ね次のような訪問者が多いことが言えると考えます。記事ページは、記事タイトルを見て、『記事の内容を読みに来る』人が多い。トップページは、ブログタイトルを見て、『どんな記事があるのかを見に来る』人が多い。記事ページの方は、記事内の最初のあいさつが終わったあたりから色が濃くなり(見られ)、ページの下に行くに従って、徐々に記事内容に興味がなくなった人が離れていき、薄く(見られなく)なっていく感じです。トップページの方は、ページの一番上あたりが飛び抜けて濃く(見られ)、記事と同じく下の方が薄い(見られない)ですが、なだらかではなく、比較的目立つ画像の部分で、文字の部分よりも濃くなって(見られて)いますね。例えば、これから、トップページのよく見られる範囲にメッセージボードを設置して、訪問者に適切な情報を提供すると良さそうであることがわかります。また、記事ページにはメッセージボードは不要(邪魔)なので、告知したい内容があっても設置しない方が良いであろうことも読み取れそうです。ページ毎に、どういった目的を持った訪問者が訪れるのかを知って、その目的に合わせた情報提供ができるようにするのが大切ですね。意味のある情報を提供できる画像をちなみに、記事ページの方も、ページの下に行くに従って徐々にとは言いながら、(トップページほどではないものの)やはり画像の部分では文字部分よりも少し濃くなって(見られて)います。画像は見られやすいということですね。なので、記事内容に沿った、情報提供の要素として意味のある画像を、記事内にうまく配置すると、訪問者の意識をより惹きつける効果が期待できるでしょう。逆に、記事を綺麗に見せようとするあまり、訳の分からないアイキャッチ的な画像を置くと、場合によっては記事内容の印象が薄れてしまい逆効果になることも考えられますので、この辺りは注意したいところだと思います。アメブロでは厳しい部分ところで、こういう解析をしようと思うと、実はアメブロでは厳しい部分があります。それは、何かというと、スマホ版アメブロでは、これらの情報を入手できないということ。当ブログの場合は、約70%以上がPCでのアクセスなのでまだましですが、一般的には比率が逆程度(スマホが70%以上)と考えるのが妥当でしょう。70%の訪問者のサイト内の動向を知れないのは痛すぎです。なので、もし可能なら、重要なページについては、アメブロ外のちゃんと分析できる場所に置いて運用すべきでしょう。もちろん、しっかりと成果に繋げたいならですが。ちなみに僕は、今はWordPress(ワードプレス)がお勧めだと思っています^^

      110
      テーマ:

プロフィール

松本@このブログ

性別:
男性
お住まいの地域:
兵庫県
自己紹介:
.

続きを見る >

読者になる