• 06 Sep
    • アメブロの記事で使える囲み枠(飾り枠) シンプル

      アメブロの記事で使えるシンプルな囲み枠です。アメブロ以外でも使えますが、アメブロのAMPでの表示に配慮した作りになっていますので、アメブロ以外には役に立たないと思われる無駄なタグが入っています。また、拙作Google Chrome拡張機能のアメケアのユーザーさま向けに、簡単に囲み枠のタグを登録できるようになっていますので、アメケアユーザーの方はお試しになってみて下さい。§囲み枠(グレー)まず、基本として地味なグレーの囲み枠から。■囲み枠(グレー)グレーの枠(#aaa)の中は、白背景(#fff)、黒文字(#333)となっています。この囲み枠のタグは次のようになります(■の部分に囲み枠内の内容を書いて下さい)。<div style="border:2px solid #aaa;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>§その他の色の囲み枠次に、上のグレーの囲み枠を基本に、すぐに使えるよう、枠線の色だけを変えたものをいくつかご紹介します。何れも、表示例とコードをセットで書いてあります。¶囲み枠(赤)■囲み枠(赤)<div style="border:2px solid #f00;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>¶囲み枠(オレンジ)■囲み枠(オレンジ)<div style="border:2px solid #f90;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>¶囲み枠(緑)■囲み枠(緑)<div style="border:2px solid #0c0;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>¶囲み枠(水色)■囲み枠(水色)<div style="border:2px solid #0cf;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>¶囲み枠(青)■囲み枠(青)<div style="border:2px solid #03f;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>¶囲み枠(ピンク)■囲み枠(ピンク)<div style="border:2px solid #f0c;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>¶囲み枠(紫)■囲み枠(紫)<div style="border:2px solid #90c;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>¶囲み枠(黒)■囲み枠(黒)<div style="border:2px solid #000;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>§囲み枠の色を変えたい場合もし、囲み枠の各所の色を好みで変えたいという場合は、以下のコード例を参考に、下線部(3箇所)で変えることができます。<div style="border:2px solid #274a78;background:#eaf4fc;color:#0d0015;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>上記の例では、順番に、・囲み … 青藍 #274a78・背景 … 月白 #eaf4fc・文字 … 漆黒 #0d0015という設定になっています(色名はこちらで見ました)。実際に表示するとこのような色の囲み枠になっています↓。■囲み枠(カスタム例)お好みに応じて、色んな色の囲み枠を作ってみてくださいね。以上、アメブロの記事にコピペで使えるとてもシンプルな囲み枠の紹介をさせて頂きました。関連記事・スッキリ見やすいシンプルな見出し付き囲み枠・アメブロの記事で使える 斜めストライプ模様の囲み枠(飾り枠)・ワッペン風(リネン調)の囲み枠・ワッペン風(デニム調)の囲み枠・付箋風の囲み枠・黒板風の囲み枠

      67
      テーマ:
  • 27 Aug
    • アメブロ向けプラグインの提供を終えて思うこと

      アメブロの常時SSL化と同時に実施されたフリープラグインの仕様変更に伴い、数年間にわたって提供させていただいていたアメブロ向けの外部プラグインの提供を全面的に終えることになりました。ご利用くださったユーザーの皆さん、どうもありがとうございました。先日、もう役に立たないそれらスクリプトに関する記事を削除しようと思い、自分の過去記事を見直していた時に納得できたことがありましたので、ちょっとこちらで書かせてもらおうと思います。それは、なぜアメブロはscriptやiframeの使用を原則禁止にしたのか?ということ。正直なところ、これまでにアメブロの運営から出て来た「セキュリティ強化」という言葉ではわかりませんでした。が、もしかすると、迷惑行為に利用される事例があまりにもたくさんあったからではないでしょうか。■自動ツールを使って読者登録をし、それを見てやってきた人を自分の商品の販売サイト(詐欺サイト、フィッシングサイトの可能性もある)へ自動で飛ばす。■複数IDを使って大量に読者登録をし、それを見てやってきた人を自分のメインのアメブロに自動的に飛ばし、メインのアメブロにお返しの読者登録をさせるよう仕向ける。■ブラウザの脆弱性を突いた攻撃用スクリプトを設置し、そのアメブロから大量のペタやいいね!、コメントや読者登録を無差別に行う。などなど・・・どれも、アメブロというメディア全体の価値を下げ、直接的、間接的に多くのアメブロユーザーに迷惑をかける行為で、運営サイドとしてはどう考えても見逃せませんよね。そして、ユーザーによるこういった行為を防ぐ方法は、フリープラグインでほぼ自由に使えるようになっていたscriptやiframeの全面禁止か、もしくは、使って良いものをホワイトリスト化する以外にないように思います。恐らく、その結果たどり着いた方法が「常時SSL化以降、ご利用可能なプラグインについて」だったのでしょう。自分がスクリプトを使い、そして提供しているときは、「これと言って悪いことをした覚えもないのになぜ?」と感じましたが、それらをやめて、立場が変わった状態で冷静に考えてみると、今回の仕様変更は、アメブロというメディアの利用者の数や質、何かがあったときの影響範囲などを鑑みて当然の措置ように思えてきました。まだまだ勉強することはたくさんあると思った出来事でした。なお、あるHTMLタグのイベント属性を使う方法でのスクリプトの公開についてお問い合わせがありましたが、運営の発表が「設置できない」ではなく「設置は禁止」という書き方ですので、上記と合わせ検討した結果、公開は適当でないと判断させて頂きました。どうぞご了承下さい。

      116
      1
      テーマ:
  • 22 Aug
    • 各種ご提供サービスについてのご連絡

      ■アメケアの提供は今後も継続予定です。以下サイトにて情報を発信しています。Facebookページ → https://www.facebook.com/amecare/サポートサイト → http://bizcare.jp/amecare/■以下の各種アメブロ向けのプラグインスクリプトは、2017年8月22日のアメブロ仕様変更完全導入に伴うフリープラグインの仕様変更により既に動作しなくなっていると思いますが、今後、以下のスケジュールで全面提供終了となります。アメピは、2017年8月末日をもって提供は全面終了とさせて頂きます。http://amepi.jp/アメリンクは、2017年1月をもって既にサービス提供を終了しております。http://amelink.jp/その他のアメブロ向けに提供していました各種スクリプトも、既に提供終了予定時期を過ぎていますので、合わせて2017年8月末日をもって全面終了とさせて頂きます。よろしくお願いします。

      173
      テーマ:
  • 15 May
    • ブログに記事の内容と全く関係のない迷惑なコメントが付いたときは

      ブログをやってると、記事に、この画像のような迷惑コメントがつくことがよくあります。このようなコメント、たいていはコンピューターの自動ツールを使って機械的にコメント投稿されるものです。なので、ブログの記事内容に全く関連性のないコメントで、なぜか妙に馴れ馴れしい言葉使いであることが多いのが特徴です。このようなコメントを放置している人も見かけますが、できれば、ちゃんと削除しておいたほうがいいと思います。せっかく付いたコメントを削除するということに抵抗を感じる人も多いみたいですが、これらのコメントは、他ユーザーとの交流を目的とする通常のコメントとは違い、ブログの価値を全く高めてくれません。むしろご自身のブログを汚くする落書きだと思って、急いで消してしまった方が良いでしょう。削除すると相手が気を悪くするかもしれないと思うかもしれませんが、上で書いたように相手は自動ツールであちこちの同じコメントをつけて回っているだけなので、削除してもまず気づくことすらありません。この手のコメントの目的は、コメントした記事の管理人や記事を読みに来た読者を、その迷惑なコメント投稿者のブログへ呼び込もうというものです。しかも、そのコメントの投稿者のブログが、酷いことが多いんです。・アフィリエイトリンクを貼ってあるだけのブログ・何か得体の知れない商品を売り込む記事だけのブログ・自分のメールマガジンに登録させる目的だけのブログなどなど。過去には、・危なそうな外部サイトへ自動的に飛ばされるなどという経験もしました。ですから、自分自身にも、またブログの記事を見に来てくれた読者さんにも、不快な思いや危険な思いをさせないために、ブログに付いた迷惑な自動コメントやツールコメントは、迷わず削除することをお勧めします。それに、もしそこまで危険ではなかったとしても、そんな落書きを残してあるブログは、「何これ~?変なコメントばかりいっぱい・・・」と思われるので、みっともないですから。ちなみに、これら迷惑な自動コメントやツールコメントの特徴は、・記事の具体的な内容には一切触れない・どんな記事に対して付けても当たり障りのない内容・記事の内容に触れないのになぜか共感したり褒めたり・これまでに一切やり取りもないのに妙に馴れ馴れしい口調・「ブログに来て下さい」「仲良くして下さい」など自分のブログを訪問させようとするなど。ほかにも色々とあると思いますが、この5つ全部に当てはまれば、まず間違いなく自動ツールによる迷惑コメントだ、と個人的には判断していいと思っています。あと、あちこちに同じ、または、ほぼ同じコメントをつけてまわるので、・コメントの本文をGoogle検索するとたくさんヒットすることが多いのも特徴なので、判断の目安になるかもしれません。ちなみに、WordPressで作ったブログなんかは、アメブロなど比べて何倍も、何十倍も、何百倍も迷惑コメントが付きますが、自動的に削除できる仕組みが整っているので、ほとんど目にすることはありません。アメブロも、そういうしっかりとした迷惑行為防止の仕組みを導入してくれたら嬉しいなと思います。最終更新日:2017/08/27

      141
      1
      テーマ:
  • 11 May
    • アメブロをGoogleサーチコンソール(Search Console)に登録する方法(後編)

      アメブロをGoogleサーチコンソール(Search Console)に登録する方法の続きです。当記事では、アメブロをGoogleサーチコンソールに登録する手順の後編として、前編の時点ではすぐにはできなかった「所有権確認」から進めていきます。サーチコンソールの画面でアメブロの所有権確認を行うGoogleサーチコンソール(Search Console)で取得した「所有権確認用のコード」をアメブロに設定してしばらく(経験上では数時間程度、公式発表では最大1日程度)経ったら、サーチコンソールを開いて引き続き登録手続きを行いましょう。所有権確認画面を開くまず、ブラウザを起動してサーチコンソールのホーム画面を開きます。この画面には、サーチコンソールに登録されているサイトがリスト表示されますが、そこに「未確認」マークのついた「https://ameblo.jp/アメーバID/」のURLが登録されていると思いますのでご確認下さい。サーチコンソールでは、このような登録サイトの一つ一つを「プロパティ」と呼んでいます。「未確認」マークの付いているアメブロのプロパティの行の右上には「プロパティの管理」というボタンがありますので、それをクリックしましょう。するとメニューが表示されます。そして、そのメニューの中に「このプロパティを確認」という項目がありますのでクリックして下さい。所有権確認を行うすると、所有権確認の画面に変わります。念のため、・https:で始まるアメブロのトップページのURL・確認方法が「HTMLタグ」になっていることを確かめた上で「確認」ボタンをクリックしましょう。ここまでの手順に問題がなければ「所有権が確認されました」というメッセージが表示されると思います。もしエラーになる場合は、間違っているところがないか確認して下さい。うまく行った場合は、メッセージの下の「続行」と書かれたリンクをクリックして、実際にサーチコンソールの管理画面を見てみましょう。ちなみに、通常、登録直後にはデータが無いので、特にこれと言って見るべき項目はありませんが、せっかくですから画面だけでも見ておいて下さい。管理画面を見たら、左上の「Search Console」のロゴをクリックすると、ホーム画面に戻れます。ホーム画面にもどると、サイトの所有権確認が終わったため、最初ついていた「未確認」マークがなくなり、URLも黒い文字から青色のリンクに変わっているのが確認できます。これで、アメブロの正規のURL(https://ameblo.jp/アメーバID/)のサーチコンソールへの登録は完了です。アメブロの他のURLもサーチコンソールに登録するさて、先日のアメブロ運営の発表にも記されている通り、現在のアメブロには、一つのページに対して有効なURLが4つあります。4つのURLで全て同じ内容の記事が表示されるということです(厳密にはガラケー用も含めて5つ?)。(重複コンテンツを心配される方がいらっしゃるかもしれませんが、それは大丈夫なように設定されています)ですので、Google検索からのアクセスの流入を漏れなく把握するためには、これら4つのURL全てをサーチコンソールに登録して情報収集する必要があります。既にここまでで、正規のURLである「https://ameblo.jp/アメーバID/」は登録しましたので、あと3つ、具体的には、以下の3つが残っています。http://ameblo.jp/アメーバID/http://gamp.ameblo.jp/アメーバID/https://gamp.ameblo.jp/アメーバID/というわけで、これらを全てサーチコンソールに登録していきましょう。ちなみに、最初の(正規のURLの)登録と比べると簡単にできますので、パパっと済ませてしまいましょう。プロパティを追加するでは、まず、「http://ameblo.jp/アメーバID/」から登録しています。サーチコンソールのホーム画面で、「プロパティを追加」というボタンをクリックして下さい。すると、以下のような、登録するURLを入力できる小窓が開きます。ここに「http://」で始まるご自身のアメブロのトップページのURL、つまり「http://ameblo.jp/アメーバID/」を入力し、「追加」ボタンをクリックしましょう。すると、見覚えのある所有権確認画面になります。ここでは、おすすめの方法は使えませんので「別の方法」をクリック。別の方法が4種類表示されますので「HTMLタグ」を選択しまし、「確認」ボタンをクリックしてください。正規のURL(https://ameblo.jp/アメーバID/)を登録したときは、所有権確認用のコードをアメブロに設定し、さらに数時間以上待つ必要がありましたが、2つ目以降はそれらは必要ありません。入力内容に問題がなければこれで登録完了で、以下のような「確認されました」のメッセージが表示されます。問題なく登録できたら、残りの2つも同じように登録しましょう。残っているのは、「http://gamp.ameblo.jp/アメーバID/」そして、「https://gamp.ameblo.jp/アメーバID/」です。以上、全て問題なく登録できると、Googleサーチコンソールのホーム画面に、登録した4つのプロパティが表示されますのでご確認下さい。ちなみに、これら4つのURLの意味ですが、「https://ameblo.jp/・・・」が正規のアメブロのURLで、今後の新しい記事は、基本的に全てこのURLでGoogleの検索結果に掲載されるはずです。また、今「http://ameblo.jp/・・・」で掲載されている記事も、行く行くは「https://ameblo.jp/・・・」に変わっていきます。次の「http://ameblo.jp/・・・」は長い間アメブロの正規のURLでしたが、2017年8月22日の常時SSL化導入に伴い、現在は、既にほぼ無効になっています。また、「http://gamp.ameblo.jp/・・・」というURLは、AMP対応のページで、GoogleでキャッシュされたAMPページが表示された時は、このURLへの流入としてカウントされるようになっているようです。つまり、行く行くはスマホでのGoogleからの流入は、概ねこれを見れば良いようになると考えられます。そして、最後の「https://gamp.ameblo.jp/・・・」というURLですが、どうやら、今のところは、GoogleからこのURLへのアクセスは無いようです(アクセス数ゼロ)。恐らく、アメブロの常時SSL化が進んでいくどこかの段階で「http://gamp.ameblo.jp/・・・」から切り替えられるのではないかと予想しています。4つのプロパティをまとめた「セット」を作成する以上のように、ここまでで、アメブロの4つのURLを全てGoogleサーチコンソールに登録し、Google検索からアメブロへの流入がわかるようになりましたが、さらに、これら4つのURL全体をまとめて見ることも可能です。Googleサーチコンソールに登録した複数のプロパティ(URL)を一つにまとめて見るには、「セット」というものを作成します。「セットを作成」ボタンをクリックまず、Googleサーチコンソールのホーム画面の右上の方にある「セットを作成」というボタンをクリックしましょう。セット名を入力すると、セットの編集というページに変わりますので、まず「セット名」を入力しましょう。セット名は自由に設定できますが、ご自身が見た時に、アメブロの4つのプロパティをまとめたセットであることがわかるような名前にしておくと良いでしょう。ちなみに僕は、当ブログのセット名には、当ブログの正規のURLである「https://ameblo.jp/wazameba/」を設定しました。セットに含めるプロパティを選択セット名を入力できたら、次は、セットに含めるプロパティ(URL)を選択します。「追加するメンバーの選択」という選択ボックスから、同じアメブロの4つのURLを一つ一つクリックで追加していって下さい。保存4つのプロパティ(URL)を全て選択できたら、以下の画像のように全てのURLがリスト表示されます。あとは、「変更を保存」というボタンをクリックして、編集内容を保存しましょう。問題なく保存できたら、以下の画像のように「変更を保存しました」というメッセージが表示されます。そして、セット作成途中までは「名前未指定のセット」となっていた箇所に、設定したセット名が表示されますので確認して下さい。ホーム画面で確認以上の手順でセットを作成できたら一旦ホーム画面に戻りましょう(左上の「Search Console」ロゴをクリックすると戻れます)。ホーム画面には、上の画像のように新しいセットが作成されていると思います。セットは、通常のプロパティとはサムネイル画像(アイコン)が違いますので、ひと目でわかりますね。せっかくですので、セットのアイコンをクリックして、どのような情報を見ることができるのかを確認してみましょう。なお、作成してすぐの場合はデータが全く無いかもしれませんが、以後蓄積されて見れるようになっていきますので安心して下さい。まとめ以上、前回記事と当記事、二回にわたってアメブロをGoogleサーチコンソールに登録する手順をご紹介しました。かなり手順が長いですが、一度設定しておけば、あとは情報が欲しい時や新しい記事をGoogleに通知する時など、様々なシーンで活用できますので、ぜひ登録されることをお勧めします。最終更新日:2017/09/01

      74
      テーマ:
  • 10 May
    • アメブロをGoogleサーチコンソール(Search Console)に登録する方法

      アメブロは、Googleサーチコンソール(Search Console)に登録することができます(2014年10月以降できるようになりました)。サーチコンソールへの登録は、Webサイト(今回の場合はご自身のアメブロ)の所有者あるいは管理者が自分自身であることを、Googleに登録する手続きです。これを行うことによって、Google検索でのキーワードごとの検索順位や訪問回数、クリック率、Googleが自分のアメブロをどのように見ているのか?など、ブログ運営に役立つ非常に多くの情報を知ることができるようになります。サーチコンソールについて詳しくは↓Googleのヘルプをどうぞ。Search Console とはGoogle Search Console は、Google 検索結果でのサイトのパフォーマンスを監視、管理できる Google の無料サービスです。自分のサイトが Google 検索結果に表示されるようにするために Search Console に登録する必要はありませんが、登録していただくとサイトが Google にどのように認識されるかを確認し、検索結果でのサイトのパフォーマンスを最適化できるようになります。  というわけで、当記事より3回かけて、アメブロをGoogleサーチコンソールに登録する手順についてご紹介したいと思います。まず、当記事では、アメブロをGoogleサーチコンソールに登録する手順のうち、今すぐできることについてご説明します。なお、ご紹介する手順は、まだ一度もサーチコンソールへの登録をしたことがない方を前提にしていますので、既に他サイトを登録済みの場合などは、ところどころ操作が違いますことご了承下さい。アメブロの所有権確認に必要な情報をサーチコンソールの画面で取得それでは、サーチコンソールの画面を操作して、アメブロに設定する必要のある情報を取得することろから始めます。以下の手順を参考にやってみて下さい。サーチコンソールを開くまず、こちらのGoogleサーチコンソールのホーム画面を開きましょう。もし、Googleサーチコンソールのホーム画面が開く前に、Googleにログインするよう促された場合は、サーチコンソールを利用するGoogleのメールアドレス(通常はGmail)とパスワードでログインしてください。すると、この「Search Consoleへようこそ」のページが開くと思います。アメブロのトップページのURLを入力「Search Consoleへようこそ」のページには、登録するサイトを入力するテキストボックスが表示されます。ここに、ご自身のアメブロのトップページのURLを入力しましょう。アメブロのURLは「https://」で始まるURLが正規のURLですので、例えば、当アメブロの場合だと、https://ameblo.jp/wazameba/のように入力します。入力ができたら「プロパティを追加」ボタンをクリックして下さい。所有権確認方法を選択次は、アメブロの所有権を確認する方法を選択します。初期状態では、おすすめの方法として「HTMLファイルをアップロード」が表示されると思います。ですが、現時点でアメブロの登録をるすための所有権確認にこの方法は使えませんので、「別の方法」というタブをクリックしましょう。すると、他の4種類の方法が選択できますので、その中から「HTMLタグ」という選択肢をクリックし選択して下さい。所有権確認用のコードを取得する確認方法として「HTMLタグ」を選択すると、画面に所有権の確認用のタグが表示されます。このタグを、右クリックメニューのコピーでクリップボードにコピーしましょう。タグの不要な部分を削除コピーできたら、ひとまずメモ帳などを開き、先ほどコピーしたをタグ貼り付けましょう。アメブロのサーチコンソルへの登録では、ここで取得したタグの中の「content="」と、タグの最後の方の「"」で挟まれた暗号のような部分、つまり上の画像内で赤く囲んである部分(以下、これを「所有権確認用のコード」と呼びます)だけを使います。ですので、わかりやすいように、所有権確認用のコード以外の前後の文字を削除し、所有権確認用のコードだけの状態にしておくと良いと思います。なお、このメモ帳は、後ほどもう一度使いますので、開いたままにしておいて下さい。これで、所有権確認用のコード取得は完了です。アメブロに取得した所有権確認用のコードを設定する次は、上で取得した所有権確認用のコードを、アメブロに設定します。マイページまずはアメーバのマイページを開き、ページの上の方にある「アメブロ」アイコンをクリックします。管理トップ管理トップになりますので、「設定・管理」アイコンをクリックして下さい。設定・管理画面設定・管理画面が開いたら「外部サービス連携」をクリックします。外部サービス連携設定画面外部サービス連携設定画面では、「Search Console(旧ウェブマスターツール)と Google Analytics の設定」をクリックしましょう。所有権確認用のコードをアメブロに登録そして「Search Console(旧ウェブマスターツール)の設定」の文字入力領域に、メモ帳に残しておいた所有権確認用のコードを貼り付けます。貼り付けできたら「設定する」ボタンをクリックしてください。「設定を保存しました」と表示されれば、アメブロ側の設定は完了です。次の手順以降はすぐにはできませんアメブロに所有権確認用のコードを設定できたら、次はGoogleサーチコンソール(Search Console)の画面で所有権確認作業を行います。ですが、アメブロの方の仕様で、すぐに確認できる状態にはなりません。いつできるようになるのか?はハッキリしませんが、僕の今までの経験では、所有権確認ができるようになるまでの時間は、概ね数時間程度でした。ですが、公式発表では1日程度かかることもある可能性も読み取れますので、ひとまず作業はここで中断し、続きは翌日以降に行うことをお勧めします。というわけで、当記事もここで一旦終了し、続きは別記事でご紹介したいと思います。→ アメブロをGoogleサーチコンソール(Search Console)に登録する方法(後編)最終更新日:2017/09/01

      77
      1
      テーマ:
  • 09 May
    • アメブロの記事にTwitterのツイートを貼り付ける方法(アカウント連携設定あり・なし)

      アメブロの記事にTwitterのつぶやき(ツイート)を貼り付けるのは、「最新版エディタ」や「新タグ編集エディタ」では、標準でサポートされていて簡単です。ただし、この標準機能は、Twitterとアメブロのアカウント連携の設定をしないと使えないので「アカウント連携はしたくない」という人には向きませんね。また、旧タグ編集エディタでは、標準の貼り付け機能そのものが使えません。ですが、「アカウント連携なし」でも、旧タグ編集エディタでも、Twitterの貼り付けはあまり難しくはありません。というわけで、「アカウント連携あり」と「アカウント連携なし(および、旧タグ編集エディタ)」の場合について、それぞれやり方をご紹介したいと思います。なお、今回ご紹介するのは、パソコンでの操作になります。「アカウント連携あり」の場合まず、「最新版エディタ」や「新タグ編集エディタ」を使った「アカウント連携あり」の場合のTwitterの貼り付け方です。これらの記事エディタでは、記事作成領域の右側にあるツールボックス(?)のツイッターアイコンのタブをクリックすると、Twitterのタイムラインが表示されます。タイムラインが表示されれば、あとは、貼り付けたいツイートをワンクリックするだけですので、非常に簡単ですね。もし、タイムラインが表示されない場合は、アメブロとTwitterのアカウント連携ができていませんので、この設定を(一度だけ)しておく必要があります。アカウント連携の設定がまだの場合は、設定するよう促されますので、画面の指示を読みながらやってみて下さい。なお、アカウント連携をしたくないという場合は、この方法は使えませんが、次の方法で貼り付けすることができます。「アカウント連携なし」の場合(および、旧タグ編集エディタの場合)Twitterとアメブロのアカウント連携の設定をしたくない場合や、旧タグ編集エディタを使っている場合は、もう少し手順を踏む必要があります(説明の画像は旧タグ編集エディタです)。Twitterで埋め込みタグをコピーまずは、Twitterで紹介したいツイートの埋め込みタグを取得しましょう。ツイートの右上にある「v」のような矢印アイコンをクリックするとメニューが表示され、その中の「ツイートをサイトに埋め込む」という項目をクリックして下さい。すると、貼り付け用のタグ(埋め込みタグ)が表示されます。ひとまず、このタグ全体をクリップボードにコピー(右クリックメニューからコピー)しましょう。タグを記事に貼り付けて不要箇所を削除次に、記事エディタで、先ほどコピーしたタグを記事に貼り付けましょう。「タグ編集エディタ(新、旧とも)」の場合はそのまま貼り付ければ大丈夫ですが、「最新版エディタ」を使う場合もには、必ず「HTML表示」のモードでタグの貼り付けを行うようにして下さい。貼り付けたら、少しタグを加工しましょう。貼り付けたタグをよく見て「<blockquote ~ /blockquote>」までを残し、貼り付けたタグの最後方の「<script ~ /script>」の部分を削除して下さい。タグの加工はこれだけで、以上で、Twitterの貼り付けは完了です。プレビューなどで確認してみましょう。まとめ以上、Twitterの投稿(ツイート)をアメブロの記事に貼り付ける方法をご紹介しました。今は、ブログとSNSで、お互いに足りないところを補い合いながら使っていくことも重要になりましたので、その一例として、参考になりましたら幸いです。なお、以下が、この記事でご紹介した「タグ編集用エディタ」で貼り付けたツイートです。国選定・重伝建地区で民家の一部焼く 篠山:https://t.co/rzCWk64CjB pic.twitter.com/ned13FTN0C— 神戸新聞 (@kobeshinbun) 2017年5月8日ちゃんと表示されているでしょうか?最終更新日:2017/08/28

      61
      テーマ:
  • 08 May
    • アメブロのリブログ機能を理解して有効に使おう

      アメブロには「リブログ」という、他のアメブロユーザーの記事を簡単に紹介できる機能があります。リブログとは、他のアメブロユーザーの記事の冒頭部分を自分のアメブロに貼り付けて(埋め込んで)投稿するアメブロ独自の機能で、一般的な引用とリンクによる紹介とはかなり趣の異なる仕組みになっています。せっかくある機能、仕組みを理解して活用していければと思いますので、リブログがどのようなものなのかを少しご紹介したいと思います。なお、画面の紹介は、何れもパソコン版のものです。リブログしてもらう側まず、リブログしてもらう側です。記事下に「リブログする」ボタンと「リブログ一覧」リンクアメブロの記事の記事下には「リブログする」というボタンと「リブログ一覧」というリンクが表示されます。ただし、デザインによっては(現在の新しいデザインでは)、1件以上リブログされるまでは「リブログ一覧」リンクは表示されません。読者(自分でもできます)がリブログしてくれる(リブログ機能を使って紹介してくれる)時は、「リブログする」ボタンをクリックします。リブログのしかたは簡単で、この「リブログする」ボタンをクリックするだけです。クリックすると、reblogCard(リブログカード)という名前の付いたiframeタグが自動的に貼り付けられた記事を新規作成することができるようになっていますので、あとは前後に紹介記事の内容を書くだけです。「リブログ一覧」リンクの方は、このリンクをクリックすると、今までにその記事をリブログしてくれたアメブロユーザーの記事へのリンクが一覧表示されるようになっています。リブログしてくれた人の記事が表示されるまた、読者がリブログ機能を使って紹介する(つまり「リブログする」)と、リブログされた側のアメブロ記事の下の方(コメントの上)に、直近にリブログした人の記事の一部が一件だけ表示されます。リブログは拒否できるなお、リブログは、記事ごとに拒否することができるほか、アメブロの基本設定画面で、全記事で一括拒否する(非表示にする)ことも可能です。具体的には、「リブログの受付」を「受け付けない」にすると「リブログする」ボタンも「リブログ一覧」リンクも、すべての記事で表示されなくなります。ただし、「リブログする」ボタンを非表示にしても、以前リブログされた情報はそのまま残り、リブログされた記事自体を削除、または下書き状態にしない限り、過去に遡って完全にリブログをなかったことにはできないようです。迷惑リブログ対策なお、悪意のあるリブログや迷惑なリブログをされた場合などは、リブログ履歴画面で、そのリブログされた情報を自分の記事のリブログ一覧に表示されないように(非公開に)することが可能です。リブログする側次は、リブログする側です。リブログで貼り付けられる内容誰かの記事の「リブログする」ボタンをクリックすると、その記事の内容の一部がiframeタグで埋め込まれた記事が新規作成されます(以下、この埋め込まれたiframeタグをリブログカードと呼びます)。リブログカードには、ブログ名やタイトルとともに、画像がある記事の場合はサムネイル画像と記事冒頭の101文字、画像がない記事の場合は記事冒頭の121文字が表示されるようです。リブログカードは、一般的な紹介で用いられるような「記事タイトル+記事の一部引用+画像+リンク」というものではなく、リブログ用に用意された専用の記事ページがiframeというタグを使って埋め込まれる仕組みになっています。例えば、当記事をリブログするとこんなページの内容が埋め込まれます。埋め込まれるページには、元のリブログされた記事の内容がリアルタイムに反映されるようで、リブログされた記事が変更されると、リブログカード内の内容も代わります。例えば、以前リブログして貼り付けたリブログカードの中身が、いつの間にか全く別の内容に書きかわっていたなどということも起こり得るでしょう。自分のブログに表示されるのはとても許容できないような内容に変わる可能性も大いにありますので、何でもかんでも無闇にリブログしないよう心掛けたほうが良いと思います。あと、リブログされた記事が削除、或いは下書き状態にされた場合は、リブログカードの内容は「この記事は削除されているか、または未来記事設定(現日時以降の公開)された記事のため表示できません」という内容に変わり、クリックしてもリブログ元の記事に移動しないようになります。それから、リブログした記事を更にリブログすることもできますが、リブログカードの中には、元記事のリブログカードは表示されないようです。まとめ以上、アメブロのリブログ機能について、分かった範囲でまとめてみました。もし参考になりましたら幸いです。よく出来ている部分、迷惑利用も可能な部分、両方ありますが、上手く使うとユーザー間の交流を深める良いきっかけにもなりそうですね。また、自分のアメブロの記事をリブログすることもできますので、過去記事に言及しながら新しい記事を書く場合などに便利です。あと、もし間違いなどあれば、ぜひご指摘下さい^^(実は、僕はリブログ機能公開当初は利用しませんでしたが、その後の仕様変更を見て検討した結果、使うことにしました^^)最終更新日:2017/08/25

      294
      1
      テーマ:
  • 07 May
    • AMPでも読みやすいアメブロ記事の書きかたについて

      アメブロが2016年にAMPに対応して以降、スマホでGoogleモバイル検索をした検索結果に表示される記事が、どんどんAMP化してきました。なので、「私のアメブロには、スマホでGoogle検索して来る人はいません!」という人を除き、今後は、AMPでの表示を考慮した記事の作成が必要になってきそうですね。AMPって何?AMPは、簡単に言うと、モバイル向けの高速表示ページで、スマホなどで検索したユーザーに対して、実際のブログ記事ページに代わる、素早く表示できるページを提供する仕組みです。AMPに対応すると、Googleモバイル検索のカルーセルに表示される可能性があるなど、対応しない場合と比較して、検索からのより多くの流入を期待できます。ただし、高速表示に特化した仕様のため、使えるタグや、タグの属性に制限が多く、思ったような記事ページを作るのが難しいといった面もあります。ですが、アメブロは既にAMPに対応済みなので、これからスマホで検索してアメブロの記事を見つけてくれる人は、実際のアメブロの記事ページではなく、その記事ページから作成されたAMP対応ページを見る機会が多くなります。本来は、AMPを別に作成、あるいは作成するかどうかを選べればいいのですが、アメブロでは、通常ページからAMP用ページが自動生成されるシステムになっています。なので今後は、通常ページだけでなく、AMP表示された際にも見やすくなるような記事の書き方が求められるようになると言えるでしょう。アメブロのAMP対応ページタグやタグの属性に制限の多いAMPですが、更にアメブロのAMP対応ページでは、ユーザーはCSSファイルやstyleタグを使ったスタイル指定(CSSを使った見た目の装飾)を一切することができません。なので、記事作成時に、文字を太字や目立つ色にしてもAMPでは反映されませんし、囲み枠も囲み枠として表示されません。また、アメブロのシステムで標準設定されているスタイルでは、「見出し」「引用」「リスト」などが、全て通常文字と全く見分けがつかない状態です。ですので、これまでどおりの一般的な視覚効果によって読みやすさを確保した記事の書き方をすると、AMPでは非常に読みにくい記事となってしまう場合もありますので注意する方が良いでしょう。AMPでも記事を読みやすくし、内容をうまく読者に伝えるためには、AMP対応以前とは少し違う工夫が必要になって来そうです。アメブロのAMP対応ページの表示状態についてはこちらの記事を参照下さいアメブロのAMP対応ページで使えそうなタグは?というわけで、読者に記事の内容をうまく伝えるために、どんなタグが使えそうか?を考えてみました。見出しに「hr」タグで下線実は当記事でも使用していますが、見出しタグに「hr」タグ(区切りタグ)を下線として使うと、見出しが通常の段落とは切り離されて、少し見出しらしくなります。上記画像の矢印で示した行は何れも中見出し「h3」タグですが、下線がある方が分かりやすいですよね。例えば、中見出し「h3」タグの場合は以下のように書きます。<h3>見出しの文字列<hr style="display:none"></h3>閉じタグの直前に、<hr style="display:none">を挿入するだけです。ちなみに、このように「style="display:none"」を付けることで、そのHTMLタグを通常ページでは表示させず、AMPページでは表示させることができますので、他のタグにも応用することができるかもしれませんね。ただし、AMPページになる時点で削除されてしまうタグもたくさんあり、そういうタグには使えませんのでご注意下さい。囲み枠や引用は上下に「hr」タグ囲み枠や引用は、上下に「hr」タグを置くと良さそうです。画像の矢印で示した箇所は、どちらも囲み枠が付けてあった箇所ですが、AMPになって囲み枠が消えています。そして、下側だけ「hr」タグで上下に区切り線を付てあるのですが、けっして派手な装飾ではないものの、通常の段落との切り離し効果による見やすさ向上の効果は十分に発揮できるのではないでしょうか。書き方は、<div style="囲み枠のスタイル"><hr style="display:none">囲み枠の中の文字囲み枠の中の文字囲み枠の中の文字囲み枠の中の文字囲み枠の中の文字囲み枠の中の文字<hr style="display:none"></div>のようになります。囲み枠の中の内容の直前と直後に、<hr style="display:none">を挿入するだけです。ちなみに、引用(blockquote)タグも、同様の方法で上下に「hr」タグを置くと見やすくなると思います。強調次に、「ここが重要!」「ここを強調したい!」といった場合、通常なら「strong」や「em」などのタグを使ったり、あるいは、「style」で文字サイズを大きくしたりするところだと思いますが、AMP対応ページでは、これらのタグは通常文字と同じ見た目になり、全く見分けがつきません。そこで、何かないか色々なタグを試してみたところ、「markタグ」と「uタグ」が使えそうです。アメブロのAMPページでは、markタグは、黄色のマーカーペンで線を引いたような表示になります。uタグは、文字に下線(アンダーライン)が引かれます。どちらも多用すると見苦しくなりそうですが、「ここだけはAMPで見たときも是非とも強調表示したい!」という箇所には、これらを検討してみてはいかがでしょうか。ちなみに、「mark」タグの方はタグの意味的にもこのような使い方をしても問題はなさそうですが、「u」タグは、本来のタグの意味とは違う使い方になりますので、見た目上どうしても必要というので無ければ、使わないほうが良いかもしれません。画像アメブロのAMPページは、画像の表示にも癖があります。特に外部サーバーに保存してある画像は、小さくなったり、大きくなったり、長細くなったりと、まともに表示されないことが多いので、できるだけ使わないほうが良いと思います。画像は、アメブロの画像フォルダにアップロードした画像を使い、必ず「width属性」と「height属性」を記述しておくようにすると、・画面幅よりも小さい画像はそのまま表示・画面幅よりも大きい画像は縦横とも正常に縮小されて表示されますので、比較的問題が出にくいと思います。まとめ以上、AMPでも見栄えのするアメブロ記事の書きかたを考えてみました。ちなみに、当記事も、ご紹介した「hr」タグなどを使って書いてありますので、もしよろしければ、スマホでAMP対応ページを確認して、どのように表示されるのか見てみて下さいね。当記事のAMP対応ページはこちらです。以上、よかったら参考にして下さい。最終更新日:2017/09/03

      56
      1
      テーマ:
  • 06 May
    • アメブロの記事にGoogleマップを貼り付けてお店やイベントやセミナー会場の案内に活用しよう

      アメブロの記事には、Googleマップの地図を簡単に貼り付けることができます。お店の場所や、イベント会場、セミナー会場の案内などに非常に便利ですので、ぜひ活用したい機能ですね。Googleマップの地図を貼り付けておくと、単なる画像の地図を貼り付けるのと違って、貼り付けた地図から、より広域にも詳細にも、読者自身が見たい範囲の地図を見ることができます。また、周辺検索やルート案内などGoogleマップの様々な機能も自然に使ってもらえますので、たいへん親切ですね。アメブロの記事にGoogleマップを貼り付ける今回ご紹介するのは、Googleマップをパソコンでアメブロの記事に貼り付ける操作です。ブラウザはGoogle Chromeを使っていますが、他のブラウザでも、基本的には同様にできると思います。場所を検索まず、Googleマップを開いて、左上の検索窓で、お店や会場などの、記事に貼り付けたい場所を検索して、地図を表示しましょう。場所は「施設名」「住所」などで検索できます。共有アイコンをクリック目的の地図を表示できたら、「共有」アイコンをクリックしてください。「地図を埋め込む」をクリック表示している地図の共有設定のために使う小窓が表示されますので、その小窓にある「地図を埋め込む」というタブをクリックしましょう。タグをコピー小窓内の内容が切り替わり、貼り付け用のタグが表示されますので、そのタグ上で右クリックし、メニューを表示してコピーします。もし、ここで地図のサイズを選択したい場合は、貼り付け用タグの左側の選択ボックスで変更可能ですので、サイズを変更してからタグをコピーして下さい。アメブロの記事に貼り付け最後に、コピーしたタグを、アメブロの記事に貼り付けましょう。タグ編集エディタを使っている場合は、そのまま貼り付ければ問題ありません。最新版エディタを使っている場合は、「HTML表示」をクリックして、HTMLタグが表示されている状態で貼り付けて下さい。まとめ以上、アメブロの記事にGoogleマップを利用した地図を貼り付ける方法をご紹介しました。もしよかったら、当記事を参考にして頂き、ぜひGoogleマップを活用してみて下さい。なお、Googleマップの地図は、メッセージボードやフリースペースにも貼り付け可能です。用途に応じて貼り付け場所を検討してみて下さいね。最終更新日:2017/08/25

      265
      テーマ:



AD
AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。