• 15 Feb
    • アメブロのヘッダーが消えた!!

      [お客さま]松本さん!大変です!アメブロのヘッダーが消えてしまいました!!という連絡があったので調べてみたら・・・またアメブロの仕様が変わったようですね。今回のお客さまからの連絡は、新CSS編集用デザインのPC(およびiPad)向けの画面でヘッダーのリンク先URLの記述方法が変わったのが原因でした。前は、//ameblo.jp/wazameba/のようになっていたと思いますが、それが、/wazamebaと、ホスト名を無くして、パスのみの指定に変わったようです。追記:2018/02/17現在 https://ameblo.jp/wazameba/にコッソリとまた変わっています・・・もちろん正しい指定で、間違ってはないんですが、敢えて変える意味はわかりません。「変えたい気分だったんですか?」と聞きたくなります(汗)あと、個人的に、最後に「/」がついてないのもちょっと不満・・・で、肝心のヘッダーが消えた件ですが、僕が別サイトで公開しているヘッダー画像の設置方法で、今回の仕様変更の影響が出てしまったためでした。アメブロにヘッダー画像を表示するカスタマイズ方法 アメブロにヘッダー画像を表示するカスタマイズ方法です。 新CSS編集用デザイン(新タイプ/第二世代)に対応しているカスタマイズ方法です。 ヘッダー画像はブログの看板…問題が出ていたのは、CSSの、.skin-bgHeader a {という行なんですが、これは既に修正したあとで、前は、.skin-bgHeader a[href*="//ameblo.jp/"] {としてありました。なぜこんな面倒くさい指定にしたのかはハッキリとは覚えていないのですが、公開当時は、単純に「.skin-bgHeader a {」としたのでは何か問題があったのだと思います。でも、HTMLを見る限り、現状では「.skin-bgHeader a {」で十分だと思いますので修正しました。もし同じやり方を使っていてヘッダー画像が消えてしまった方がおられましたら、ここを修正すれば直るかもしれませんので、よかったら参考になさって下さい。なお、このほかにも幾つも仕様変更がありましたので、カスタマイズに大きな影響がありそうな箇所を見つけたらまた書かせてもらいますね。それにしても、仕様変更する場合は事前にどこがどう変わるのかを教えてくれると助かるんですが・・・。そうはならないですかね・・・。

      83
      テーマ:
  • 14 Feb
    • Instagramを貼り付けると禁止タグになってしまう・・・

      アメブロでInstagramを貼り付けできないトラブルが発生しているということなのでちょっと調べてみました。どうやらInstagram側の貼り付けタグが少し変わったんですかね?その新しい貼り付けタグにアメブロが対応できずに「禁止タグ」となってしまうみたいです。昨日今日とやってみたところ、時と場合によって新旧どちらのタグになるかよくわからない感じなので、今、切り替えをしている途中なのかもしれません。具体的には、貼り付けタグの一番最後の部分が<script async defer src="//www.instagram.com/embed.js"></script>となっているとダメなようなので、この部分を、<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>に修正すると貼り付けできました。そのうちアメブロの方で新しいタグも貼り付け可能なようになると思いますが、「今すぐ貼り付けたいんだ!」という方は、試してみてください。 #鮎屋の滝 #滝 #洲本市 #淡路島 #景観 #HDR #fall #landscape #awajishima #japan matsmotojpさん(@matsmotojp)がシェアした投稿 - 11月 9, 2017 at 6:45午前 PST

      52
      テーマ:
    • YouTube動画を画面サイズに合わせて自動調整するように貼り付ける

      アメブロにYouTube動画を貼り付けた時、記事幅に合わず右側に隙間ができたり、縦横比がうまく調整されずに上下左右に黒い帯が表示されたり、スマホで見たらはみ出したり・・・と、「なんだか不細工だなぁ・・・」と思ったので、画面のサイズ(記事の幅)に合わせて自動的にサイズが調整されるように貼り付けできないかやってみました。↓こんな感じです。PCでもスマホでも画面幅(記事幅)いっぱいに表示され、はみ出さず、上下左右に黒い帯もつかないのが目標です。たぶんできたと思いますが、どうでしょう?ちなみに、やり方は難しいと言うほどではありませんが、HTMLタグをかなりイジる必要があるので、残念ながらあまり簡単とまでは言えず、一般的ではないかもしれないです・・・あと、インラインスタイル(HTMLの属性にCSSを書く)を使うので、AMPには無力です(^_^;)一応、次期アメケアにはこの貼り付けができるよう機能を搭載しようと思います。

      27
      テーマ:
  • 13 Feb
    • アメブロで吹き出しを使った会話風記事を書く

      読者さん松本さん!最近よく見る「吹き出し」を使った会話風の記事をアメブロで書きたいんですが難しいですか?まつもとそうですね・・・CSSを使えば、PC向け画面で吹き出しを表示するのはそれほど難しくはないと思いますが、アメブロの場合、スマホ向け画面にはCSSでのカスタマイズが効かないのでちょっと面倒ですね。読者さんでも、ぜひやってみたいんですが・・・やっぱり無理でしょうか?まつもと無理ということではありません。例えば、スマホでも表示できる「吹き出し風の囲み枠」のようなタグを準備しておいて、それを使ってやれば可能ですね。読者さんできるんですね!! まつもとはい。ただしAMPには対応できませんので、スマホでGoogle検索から来てくれた人にはやっぱり吹き出しは表示されないことになります。読者さんそうなんですか・・・ちなみに、AMPではどんなふうに表示されるんですか?まつもとどんな囲み枠タグを用意するかにもよりますが・・・例えば↓こんな感じですね。この記事のAMP向けページ読者さん・・・やっぱり、せめて記事内だけでもカスタマイズできるようにスマホやAMPにもCSSを用意してほしいですね。まつもとはい。本当にそう思いますね。

      61
      テーマ:
  • 09 Feb
    • アメブロをGoogleにインデックスさせないことができるか?

      普通の人はあまりやりたくないだろうなと思う実験をしてみました。きっかけは、「自分のアメブロをGoogleに表示させたくないとき『フリープラグインにmeta noindexを書けば良い』という話を聞いたんですが、本当ですか?」という内容の質問をいただいたことです。<meta>タグは、<head>タグ内入れるのがルールなので、<head>タグ内を弄れないアメブロでは「noindex」にできないと思っていたのですが、そんなことってあるのでしょうか?・・・質問を頂いた時点でハッキリと回答できる材料を持っていなかったので、当アメブロで実験してみることにした。具体的には、2/1にフリープラグインに以下のタグを追加してGoogleからのアクセス流入と、インデックスの状況を観察しました。<meta name="robots" content="noindex,follow">これでGoogleからのアクセス流入がなくなっていき、当アメブロがGoogleの検索結果から消えていけばその通り、そうでなければデマということで。さて、約1週間経過してどうなったかと言うと・・・・・・Googleからの流入が急降下中です。また、当アメブロのトップページや、実験前にGoogleからのアクセス流入が最も多かった記事のインデックスが削除されたようで、キーワードで検索しても、URLで検索してもGoogleの検索結果に出なくなりました(汗)というわけで、今のところ・・・「アメブロをGoogleで表示させたくないとき『フリープラグインにmeta noindexを書けば良い』という話は本当らしい」と言えそうです。(→追記あり:その後、大きく変わりました)ただし、フリープラグインはモバイル向けページには反映されないため、既に導入が始まったとも言われるGoogleのモバイルファーストインデックスが本格化してくると、この方法は無効になるのではないかと予想しています。■2018/02/15追記:一時はGoogleからのアクセス流入がゼロまで落ち、検索結果を見る限りインデックスもほぼ無くなったように見えたんですが、その後少しずつGoogleからアクセスが復活してきました。また、Googleで検索してみると、トップページや記事が検索結果に出るようになってきましたので、インデックスも復活してきているようです。原因はわかりませんが、結局この方法で確実にGoogleのインデックスから消すことはできそうもないという結論になりそうです。もしかすると、有効であったものが、モバイルファーストインデックスが始まったなど、Googleの仕様が変わったことで無効になった可能性もありますが、定かではありません。■2018/02/16追記:昨日よりもさらに多くのページがGoogleの検索結果に上がってくるようになりました。ですので、現時点では、当記事のタグをフリープラグインに入れても「Googleにインデックスさせないことはできない」のは確実と言えそうです。というわけで、意味がなくなったと思えるタグは外しました。それにしても、当初はどんどんインデックスが減っていったのに、突然再度インデックスされ始めたのは、やはりGoogle側でインデックスするかどうかの判断が変わったということでしょうかね?

      71
      2
      テーマ:
  • 29 Jan
    • 新タグ編集エディタが正式リリースされて

      スタッフブログの12月20日の記事のとおり、今日、タグ編集エディタが旧タイプが無くなり、新タイプだけに変わりました。この新しいタグ編集エディタは、↑スタッフブログの記事のコメントを見る限り、かなり不評のようですね・・・。新タグ編集エディタは、・旧でHTML5で使えないタグを吐いていたボタンが修正された・画像のアップロードが素早く簡単にできるようになった・記事を書くのに時間がかかっても「現在時刻」で投稿できるようになった・記事作成中に閉じてしまっても自動バックアップから復元できるようになったなど、良いところもたくさんあるのですが、今現在のパソコンの画面解像度として最も一般的な(だと思う)1366x768のモニターで使った時、ページ内のレイアウトが妙に中途半端で収まりが悪く、とても使いにくいと僕も感じました。これ、個人的に「もっと大きな画面で使う」ことを想定して画面デザインが考えられているからではないかと思っています。実は僕はプログラミングをする事もあって、ふだん、ノートPCに1920x1200という解像度の比較的大きめの外付けモニターを接続して使っていますが、これだと必要なものが概ね画面内におさまるからか、旧タイプのタグ編集エディタよりも使いやすく感じています。でも、実際は僕みたいなのはレアケースだと思うので、やっぱり、最も多く使われる画面サイズで使いやすくなるよう作るのが、ユーザー目線なんでしょうね。ちなみに、僕が使っているのは↓こちらで買ったEIZOの中古モニターEIZO FlexScan S2243W-HX 22インチ 1920x1200 WUXGA(中古)使用1000時間未満の、新品か?と思うようなものが、2万円くらいの破格値でした。僕が買ったのはもう数年前ですが、今でも売っているようですし、探せばもっと新しいタイプの良いモニターが見つかるかもしれませんね。

      93
      2
      テーマ:
  • 23 Jan
    • 無料画像でヘッダー画像を作って設置してみました

      今どきのブログのデザインは、あまりゴテゴテしたデザインは避けるべきで、シンプル・イズ・ベストだと思っていますが、当アメブロのヘッダー周りがあまりにも寂しい気がしたので、久しぶりにヘッダー画像を付けてみました。ただし、Googleから記事に直で飛んで来てくれた人や、2記事目、3記事目を見てくれる人にとって、画面の大部分を占領してしまう大きなヘッダー画像はかなり邪魔なものなので、トップページ以外は背の低い小さなヘッダー画像にしてみました。なお、画像は、PEXELSというサイトからPublic Domainの画像をダウンロードして加工しました。「Public Domain」は、非常に制限の緩いライセンスで、基本的に、個人・商用ともに連絡やバックリンクもなく自由に使え、また加工も自由に行えます。ただし、今回利用した画像配信サイトのPublic Domain画像は、見る限り、どうも審査がかなり甘そうな(無い可能性もある?)ので、トラブルを避けるためには、人の顔のはっきり写っている画像などは避け、また、少なくとも社名やロゴマークくらいは加工で消したほうが良いだろうと思います。そのあたりが気になる場合は、このような権利問題が怪しいかもしれない画像の利用は避けて、もっと審査の厳しい有料サイトの画像を使うなどを検討されると良いでしょう。ちなみに僕は、こちらの無料写真素材サイトで、敢えて有料会員になって愛用しています。トラブルの場合に使える「保険がつく」というのに引かれて。さすがに、一枚何千円もする有名写真素材サイトと同等とまではいきませんが、よほど高いクオリティの画像を求めない限り、十分使えると思いますよ。

      56
      テーマ:
  • 15 Jan
    • スッキリと記事が読みやすいくカスタマイズもしやすいデザインを目指して

      こんにちは、まつもとです。またまたアメブロのPCデザインを変更しました。いつも見て下さってる方は「Ctrl+F5」とかで強制再読み込みしないとデザインが切り替わらないかもしれません。(↑これ、何とかしてほしいですね・・・)新しいデザインは、個人的に、「『CSS編集用デザイン』がこんな感じだったら使いやすいかなぁ・・」と思うものにしてみました。CSS編集用デザインは、・そのままでも記事が読みやすくて・記事の邪魔をしないプレーンなデザインで・そこから画像を使って更にカスタマイズしやすいというのがいいなと、個人的に思ってます。あと、アメブロらしさから逸脱しすぎないという点も気をつけてみました(笑)という感じで作ってみたスキンですが、もし公開する際には記事にさせてもらいますね。ちなみに、これをベースにすれば、↓このくらいならそこそこ簡単にできると思いますが・・・、ご覧の通り、僕が凝ったデザインをしようとすると、どうにもダサくなってしまうので、だれか、綺麗で使いやすいデザイン考えてくれないかぁ?(笑)などと、思いながら作ってると、何となく「旧CSS編集用デザイン」に似てしまった気も・・・(汗)そう言えば、「divが多すぎ」など、あまり良い評判を聞かない「旧CSS編集用デザイン」ですが、個人的には、「新」よりも「旧」のほうが、スンナリと思ったようにカスタマイズできて楽しかったです。でも、どちらかが残るとすると間違いなく「新」だと思うので、一応、「旧」はもう使わない方針にしています。新CSS編集用デザイン向けのカスタマイズ方法をこちらで公開中です

      67
      テーマ:
  • 27 Dec
    • アメブロの画像が外部サイトに貼り付け可能に?

      こんにちは、まつもとです。昨日気づいたんですが、僕の見かたが間違ってなければ、どうやら今は、アメブロにアップロードした画像を外部サイトに貼り付けても表示されるようになっているみたいですね。いわゆる「直リンク可能」という状態です。以前はできなかったんですが、いつからできるようになったんでしょうか?アメブロのカスタム屋としては、ちょっとやりやすくなる部分があるので嬉しいんですが、大丈夫なんでしょうか?まず、画像の外部サイトへの貼り付けができるようになると、どうしても画像を保管しているサーバーの負荷が上がります。なので、前は禁止だったのができるようになったというのは意外でした。サーバーの性能が上がって、そのくらいは許容範囲になったのでしょうかね。また、著作権のある画像が外部サイトで勝手に使われやすくなりますので、嫌がる人も多いんじゃないかと思います。特に芸能人などは嫌がりそうな気がします。キュレーションが流行った時には、そういうのが目を覆いたくなるくらいに横行しましたので、今後またそういうことが起こらないとも限りませんし。また、外部サイトに記事のHTMLをコピペするだけで、画像もちゃんと表示されるパクリページが一瞬ででき上がってしまいます。コピペ記事を量産してアクセスを稼ごうとする痛い人もいますので、これもちょっと困りますね。こう考えると、喜ぶのは普通のアメブロのユーザーさん(芸能人含む)以外の人で、どうもアメブロのユーザーさんから見て、あまり良いことが無い気がしますが・・・どうなんでしょう?もしかすると、そのうちまた「外部サイトへの貼り付けは不可」な状態に戻るかもしれませんね。ちなみに、このおかげでアメブロ向けに作ったこちらの囲み枠や、こちらの囲み枠が、アメブロ以外でも使えるようになっています。なので、僕はうれしいんですが・・・いいのかなぁ。

      31
      4
      テーマ:
    • ブログ記事を有料化して販売する方法は?

      こんにちは、まつもとです。実は、ずいぶん前から有料記事の販売を考えているんですが、いろいろと面倒くさくて、まだやってません(汗)自分の記事を有料化して販売する方法はたくさんあるんですが、手軽なものに限定すると、選択肢は限られるかもしれませんね。何にしても、アメブロでは(少なくとも一般人は)できませんので、別の方法を考える必要があります。例えば、昨年だったか、有名ブロガーが記事の有料販売をやりだしてかなり話題になった「note」は、1記事あたり100~10,000円(プレミアム会員は50,000円まで)で販売できます。noteへようこそまた、アメブロのライバルの一つ(?)と言えそうな「FC2ブログ」には、月額(100~30,000円)、単体記事(100~100,000円)どちらでも記事販売が可能な「ブロマガ」という仕組みが用意されています。ブロマガとは?他にも、■WordPressに会員サイトやコンテンツ販売用のプラグインを組み合わせる方法■有料のメールマガジンを発行する方法■書籍・電子書籍にして販売する方法などなど・・・。僕がざっと考えて思いつくのはこのくらいですが、探せばきっと他にもあるでしょう。あとは「実際にやってみる行動力」と「売れるコンテンツ作り」でしょうか。行動力は・・・僕にはこれが一番のハードルかもしれませんが、こういうハードルを超えるのが得意な人もいますよね。あと、コンテンツは・・・少なくとも、今、当アメブロに書いている程度の記事では買った人を怒らせてしまいそうですね。でも、一度はチャレンジしてみたいなぁとは思っています。もしやるとすると、僕はWordPressでも細々とブログを書いているので、これをもっと強化してプラグインを組み合わせていくパターンが濃厚です(笑)

      33
      テーマ: