• 26 Mar
    • サイドバーの最近の記事にサムネイル画像を表示してみました

      『コメント欄プロフィール画像』、『いいね!してくれた人』に続いて、サイドバーの最近の記事にサムネイル画像を表示してみました。フリープラグインを使えなくなったら、このあたりは諦める以外に方法はないかと思っていましたが、やってみたら意外とできるものですね。でも、誰にでも使ってもらえるという方法ではないので、どうやってやり方を公開するか・・・ちょっと悩んでしまいます。そうこう言っている間に、アメブロさんの方で正式対応してくれれば一番いいんですが^^;

      97
      テーマ:
  • 22 Mar
    • 「いいね!した人」をフリープラグインを使わずに表示したい

      フリープラグインで、自前のプラグインなどが使えなくなったら、記事に「いいね!した人」のプロフィール画像を並べて表示することとかもできなくなるわけですが、「何が何でも表示したいんだ!!」っていう場合に、フリープラグインを使わなくてもできるのか?を考えてみました。結果、どうやらできたようです。この記事にも設置してみましたが、まぁなんというか、無理矢理です^^;もちろん、アメブロでできることだけではたぶん不可能なので、外部サーバーの力を借りています。今のところ、まだ公開の予定はありませんが、もしよかったら、いいね!したら本当にプロフィール画像が表示されるか見てみて下さいね^^ちなみに、スマホ版には表示されません、パソコン版のみです。また、だれも「いいね!」していない時は何も表示されません。それから、アメブロ標準の「いいね!した人一覧」に表示されるようになるまでは表示されません。あと、キャッシュの関係で反映までに時間がかかることがあります(Ctrl+F5とかで最新の状態を見ることはできます)。悪しからず(_ _)

      142
      2
      テーマ:
  • 13 Mar
    • フリープラグインを使わずにコメント投稿者のプロフィール画像を表示できるか?

      もうすぐアメブロのフリープラグインが(実質)使えなくなりそうなので、フリープラグインを使わずにどんなことができるのかを、空き時間を見つけて少しずつ試しています。その中の一つとして、コメント投稿者のプロフィール画像表示をやってみました。アメブロは、スマホ用画面ではコメント投稿者のプロフィール画像が出るのに、パソコン用画面では出ませんよね。そこで、フリープラグインを利用してプロフィール画像を表示する様々な方法が提案されてきたわけですが、どうやらこれらは全て使えなくなりそうですので、フリープラグインを使わずやる方法を考えてみたわけです。で、結果は・・・一応、できました!この記事とか、どんな感じがわかりやすいと思います。フリープラグインは使わずに表示しています。ただし、アメブロ以外の無料では実現が難しい機能に頼りきっていますし、かなり強引な方法で実現していますので、所々にほころびも見えます。お初の人は表示までに時間がかかったり・・・かなり大きなファイルの送受信が必要だったり・・・なので、少なくとも今時点でお勧めできるか?というと、なかなか難しいところです^^;でも、もし、「何が何でもコメント欄にはコメント投稿者のプロフィール画像が欲しいんです!!」というような方がいらっしゃったら、お手伝いはできるかもしれません^^

      99
      10
      テーマ:
  • 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
      テーマ:
  • 16 May
    • お気に入りのブログやサイトで使っている配色を知りたい時は

      アメブロカスタマイズお気に入りのブログやサイトで使っている配色を知りたい時はアメブロカスタマイズの松本です。こんにちは。僕も時々あるんですが、ブログやサイトを見ていて、「あ、なんかこのサイトの色使い好きかも♪」って思うことってありませんか?「私のアメブロも、こんなデザインにカスタマイズしたいなぁ」と思ったり。もちろん、デザインって、意匠権などの知的所有権のあるものですので、丸パクリするわけにはいきません。でも、「配色くらいは参考にしたいなぁ」っていうこともよくあって、そういう時にいつも使うサイトがあるのでご紹介しますね。Web Site Color Pickerこちら、ウェブページのファーストビューで(スクロールせずに)見えるあたりで、どんな色がどのくらい使われているのかを一目瞭然でわかるように表示してくれます。使い方は簡単で、参考にしたいサイトのページのURLを入力して[Search]ボタンをクリックするだけです。実は、配色を合わせるだけで、お気に入りのサイトのデザイン(というか雰囲気?)にかなり近づきますのでオススメです^^よかったら試してみて下さいね。ページの配色がうまく表示されない時ところで、こちらのサイト、たまにサイトのイメージが表示されなかったリ古かったりして、気になるサイトの現時点の配色が表示されないことがあります。そういう時は、ひとまずF5キー(Windowsの場合。MacはCommand+R)で再表示してみて下さい。で、それでもダメなときは、サイトのイメージを自分で作り直しましょう。↓実は僕も利用させてもらってるこちらでできます。HeartRails CaptureHeartRails Captureも、操作はURLを入力して[作成する]ボタンをクリックするだけですので簡単です。そして、画像が表示されたら、「オプション」の部分を以下の画像のように設定してみて下さい。どうやら、この設定の時に表示される画像がWeb Site Color Pickerで使われている画像のようです。なので、もしこの画像が古い場合は、[更新する]ボタンで最新の状態にしてください。そして、Web Site Color Pickerの方でもF5を押して更新してやると、気になるサイトの現時点の配色が表示されるようになります。どうぞお試しください。☞ アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん

      123
      テーマ:
  • 07 Feb
    • アメブロに自分のブログ専用のGoogle検索を設置する方法

      アメブロの記事やサイドバーに自分のブログ専用のGoogle検索を設置する方法アメブロカスタマイズのわざめーばです。こんにちは。アメブロには、サイドバーにブログ内の検索をするフォームがありますが、残念ながらこの検索は性能が低く、読者さんにご自身のブログ内の情報を快適に検索してもらうにはちょっと物足りません。そこで、Googleのカスタム検索エンジンというサービスを利用して、読者さんがブログ内の記事を快適に探せる検索機能をあなたのアメブロに付ける方法をご紹介したいと思います。なお、カスタム検索エンジンはフリープラグインを利用して設置しますが、サイドバーのフリープラグインの位置だけでなく、フリースペースやメッセージボード、記事等にも比較的簡単に設置できますので、その方法もあわせてご紹介します。読者さんの属性にもよりますが、場合によっては多くの記事を読んでもらうためにとても役立ちますので、もしよかったらチャレンジしてみて下さいね。カスタム検索エンジンを作成する⇒IE(Internet Explorer、インターネットエクスプローラ)では作成作業が正常動作しない場合があるようです。作成作業は他のブラウザ(Google ChromeやMozilla Firefox)を使って行うことをお勧めします。では、早速、あなたのアメブロ専用のカスタム検索エンジンを作成していきましょう。↑まず、Googleアカウント(GmailやGoogle+を使っていればそのアカウントでOK)が必要ですので、まだGoogleアカウントを持っていない場合は作成して下さい。↑Googleアカウントの作成が完了したら(或いは既に持っている場合は)、カスタム検索エンジンのページアクセスして下さい(もし既に作成したことがある場合は管理画面が表示されます)。ページが表示されたら、右上の方にある[カスタム検索エンジンの作成]というボタンをクリックして作成に入りましょう(既に作成したことがある場合は、左側メニューにある「新しい検索エンジン」をクリックします)。↑では、いよいよ作成です。まず、 [検索するサイト]欄に、「ご自分のアメブロのトップページのURL(アドレス)から、先頭の『http://』を外して<、最後に『*』を付け足した文字列」を入力して下さい。たとえば、本ブログのトップページのURLは、「http://ameblo.jp/wazameba/」ですので、入力するのは「ameblo.jp/wazameba/*」ということになります。次に、[言語]欄で「日本語」を選択してください。この2ヶ所の入力ができたら、[作成]というボタンをクリックします。これで、カスタム検索エンジンの作成は完了です。これをブログに設置すれば、読者さんに、あなたのブログ内の記事を快適に探してもらえる検索機能が付くことになります。作成したカスタム検索エンジンをフリープラグインに設置する前項で、[作成]ボタンをクリックすると、次のような画面が表示されると思います。↑ここでは、[コードを取得]と書かれたボタンをクリックして下さい。↑すると、フリープラグインに貼り付けできる、アメブロにGoogleカスタム検索エンジンを設置するためのコードが表示されますので、これを、フリープラグインにコピペ(コピー&貼り付け)して下さい。フリープラグインの使い方が分からない場合はこちらを参照してください。↑これで、無事、アメブロのフリープラグインにGoogleカスタム検索エンジンが設置できましたので、ブログを開いて確認してみて下さい。記事やフリースペースにカスタム検索エンジンを表示するなお、この方法でGoogleカスタム検索エンジンをフリープラグインに設置すると、記事やフリースペース等にも簡単に同様の検索機能をつける事ができます。方法は、検索用のフォームを表示したい位置に、<gcse:search></gcse:search>というタグを書くだけです。また、フリープラグインに表示したものは要らないという場合は、フリープラグインに貼り付けたコードの最後にこのタグが含まれていますので、この部分を削除すればOKです。以上、Googleカスタム検索エンジンを利用してアメブロの読者さんに快適に記事を検索してもらえる機能をつける方法でした。もしよかったらチャレンジしてみて下さい。関連記事☞ フリープラグインを利用してアメブロをカスタマイズする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      58
      23
      テーマ:
  • 25 May
    • リンククリックでページ内の指定位置へジャンプさせる方法

      リンククリックでページ内の指定位置へジャンプさせる方法アメブロカスタマイズのわざめーばです。こんにちは。今回は、リンクをクリックすると、ページ内の指定位置へジャンプさせる方法についてご紹介します。この方法を使うと、例えば、長い記事を小見出しを付けていくつかに区切っている場合などに、記事冒頭に簡単なメニューを付けて記事内の好みの項へジャンプできるようにするといったことができるようになります。一例として、アメブロカスタマイズ目次ではそういった使い方をしていますので、もしイメージしにくい場合は実際にご覧になってみてください。では、以下でやり方をご紹介します。ジャンプ先を設定するまずは、ジャンプ先となる位置に「name」という属性を持ったアンカータグ(aタグ)を記述します。記事内の好みの位置に「見えないしおり」を挟み込むイメージです。(しおり用)aタグは以下のように記述します。<a id="midashi1" name="midashi1"></a>太字「midashi1」の部分にはお好きな名前を設定することができます。ただし、この名前はページ内で重複することのないように命名しなければうまく動作しません。特に1ページに複数の記事が表示される設定になっている場合は注意する必要があるかと思います。また、アメブロの初期状態でもいくつか使われている名前があり、それらも使えませんので注意が必要です。もし、使える名前がわからない場合は、ひとまず投稿して動作確認をし、変な位置にジャンプするようなら変更するという手順でやるといいでしょう。なお、「id=」と「name=」の2つを同名で設定していますが、通常この方法が慣例となっていますので、このようにしておかれると良いと思います。ジャンプ元を記述する次に、ジャンプ元のリンクとなるアンカータグ(aタグ)を記述します。こちらは通常の「href」属性を持ったアンカータグで、次のように記述します。<a href="#midashi1">見出し1</a>リンク先URLの指定はジャンプ先の(しおり用)aタグの名前の前に#を付加したものとなります。例以上の方法で、クリックで記事内の指定位置に一瞬でジャンプするリンクを設置することが可能です。そこで、試しに、この記事にも設置してみました。実は、この記事の先頭には、<a id="a2013052501_midashi1" name="a2013052501_midashi1"></a>という(しおり用)aタグを記述してあります。で、そこにジャンプするには、<a href="#a2013052501_midashi1">記事の先頭へジャンプ</a>というリンクタグを記述しておけばOKです。というわけで↓こちらがそのリンクです。記事の先頭へジャンプ注意なお、実はアメブロでこの方法を使うと、ジャンプ先の位置をアメーババーが隠してしまって、ぴったり良い位置に表示することができない場合があります。その場合は、アメーババーがページ最上部に固定されないようにすることで回避できると思いますので、アメーババーが上部に固定表示されることにこだわらない場合は試してみてください。以上、リンククリックでページ内の指定位置へジャンプさせる方法をご紹介しました。よかったら参考にしてくださいね。関連記事☞ アメーババーがページ最上部に固定されないようにする方法☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ

      6
      6
      テーマ:
  • 21 Nov
    • CSSが反映されない原因いろいろ

      CSSが反映されない原因いろいろアメブロカスタマイズのわざめーばです。こんにちは。本ブログでは、アメブロカスタマイズに関する質問を、関連記事のコメントで受け付けています。その中でダントツに多い質問は、「CSSを編集しましたがブログに反映されません。なぜでしょう?」です。では、ちゃんと編集したはずのCSSが反映されない原因は何か?というと・・・、もちろん色んな原因があるんですが、実は非常に頻度の高い典型的なものが3つあります。それは、 ■ブラウザで「最新の情報に更新」していない ■閉じ括弧「}」が抜けていてそれ以降が無視されている ■CSSにHTMLタグなどの書いてはいけない内容を書いてあるの3つです。そこで、本記事では、この3つのCSSが反映されない原因について、その対処法を含めご紹介します。ブラウザで「最新の情報に更新」していないこのパターンは、「表示を確認するではうまくいきましたが、ブログに反映されません」とか、「プレビューは変わりましたが、ブログは変わりません」というパターンが多いのですが、これについては、 ■ Windowsの場合 ・・・ [F5]キーを押す ■ Macの場合 ・・・ [Command]キーと[R]を押すだけで解決します。詳しくは、CSSを編集した後はF5キーでブラウザの表示を「最新の情報に更新」するという記事で説明してありますので、もし必要でしたらご参照ください。閉じ括弧「}」が抜けていてそれ以降が無視されているこれは、どういうことかというと、例えば以下のようなCSSがあったとします。.footerNav{  height:130px;  top:450px;  bottom:auto;}.footerNavNext{  background-position:0 -26px;.footerNavNext:hover{  background-position:-42px -26px;}.footerNavTop{  background-position:0 -26px;}このCSSは実は間違っている箇所があります。それは、赤文字の部分の設定の最後に閉じ括弧『}』が必要だということです。これがないだけで、それ以降、つまり緑文字の部分は全て無視されてしまい、プレビューにも、もちろんブログにも反映されません。更にこれに続いてCSSに新たな設定を追加しても、やはり無視されてしまい、アメブロの方には全く変化がないという事態になります。この状態になってしまう原因は、どうやらどこかからコードをコピペするときに、最後の閉じカッコ『}』をコピーし損ねることのようです。注意しましょう。なお、これについても別記事(CSSに設定を追加しても反応がないときは直前の閉じカッコをチェックする)で説明してありますので、よろしければごらんください。CSSにHTMLタグなどの書いてはいけない内容を書いてあるこれは何かと言うと、フリープラグインやフリースペースに書くべき内容、つまりHTMLタグを、ユーザーCSSに書いてしまったために起こるトラブルです。CSSは人間が見るメモ書きではなく、(人間ほどは融通が利かない)コンピューターが読んで理解する設定ファイルですので、きちんとしたルールに沿った内容しか書くことは許されません。CSSとHTMLはまったく別物ですので、ユーザーCSSにフリープラグインやフリースペースに書くべきHTMLを書くとエラーになってしまうんです。そして、エラーになると、それ以降の一部あるいはすべてが無視されてしまい、ブログに反映されなくなります。公開されているアメブロカスタマイズ用のコードは、たいていはどこへ記述する内容か明記されていると思いますので、コピペする場合などは、必ずどこへコピペするのかを確認するようにしてくださいね。なお、CSSでは、HTMLに頻繁に出てくる<の文字が使われることは基本的にありません(絶対ではありませんが)。ですので、<がある時点で「これはCSSに書くのは間違いでは?」と思って、コピペ先をもう一度確認するようにしてください。ちなみに、HTMLタグ以外にも、例えば、---------------------------------------とか=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:のようなものを区切り線として書いたことが原因となってエラーとなっている場合もよくあります。とにかく、ルールに沿ったものしか書けないという原則がありますので、ぜひこの点注意して、無用な苦悩は避けるようにしてくださいね。以上、非常に多いCSSが反映されない原因についてご説明しました。ぜひ参考にしていただき、アメブロカスタマイズ時のトラブル解決にお役立てください。関連記事☞ CSSを編集してアメブロをカスタマイズする方法☞ CSSを編集した後はF5キーでブラウザの表示を「最新の情報に更新」する☞ CSSに設定を追加しても反応がないときは直前の閉じカッコをチェックする☞ アメブロカスタマイズ目次☞ アメブロカスタマイズで成功するブログを作ろう トップページ2012/11/21 加筆修正しました。2012/01/29 記事公開。

      7
      29
      テーマ:
  • 13 Sep
    • 広告を触ると退会させられる?

      アメブロカスタマイズのわざめーばです。こんにちは。今回のメンテナンス後だと思いますが、CSS編集画面で以下のようなメッセージが表示されるようになりました。ご注意広告を消す行為の他、掲載位置変更や視認性を悪くする修正なども、規約違反に該当する可能性がありますのでご遠慮下さい。この件に関して、複数の読者の方からお問い合わせをいただきましたので、ちょっと触れておきたいと思います。僕はこのメッセージ、非常に大きい意味があると思っています。「広告を消してはいけない」「広告を移動してはいけない」ということは、このブログでも何度か書いたことがあると思うのですが、実は、はっきりその根拠と言える文書を、少なくとも僕は見つけることはできていませんでした。僕の情報源は唯一、とある元アメブロガーがアメーバから受け取ったメールの内容を公開した記事でした。ちなみに、既にそのアメブロは閉じられてしまっているので、もう見ることはできないと思います。しかも、今回、「視認性を悪くする修正」という(曖昧な)内容も追加されています。つまり、今回のこのメッセージは、僕自身が初めて見たアメーバ運営側の「カスタマイズで広告を見えなくまたは見えにくくすると規約違反になる」という見解です。更に、アメーバ利用規約第7条2項に次のようにあります。2.弊社は、会員が以下のいずれかの事由に該当する場合、又はそのおそれがあると弊社が判断した場合、会員へ事前に通告・催告することなく、かつ、会員の承諾を得ずに、弊社の裁量によりただちに当該会員を退会させることができるものとします。(1)本規約に違反した場合。(以下略)この2つを合わせると、僕には、「カスタマイズで広告を見えなくまたは見えにくくすると連絡もせずに強制退会させますよ」と聞こえるのですが、いかがでしょう?もちろん、広告費で運営しているサービスなんだから当然だ!というご意見はごもっともですが、公言されたのは今回始めてように思います。(僕が無知なだけかもしれませんが)なので、今後、今まで以上に広告に関するチェックが厳しくなるかもしれません。例えば、 ・広告を消す(見えなくする) ・広告の場所を下の方に下げるは、もちろんのこと、 ・広告の文字サイズや文字色を変更する ・画像広告の表示サイズを変更する ・広告のレイアウトを変更するや、場合によっては、 ・広告の背景色変更や背景画像を設定する ・広告をスクロール表示にする ・広告を含む記事をスクロール表示にするなどでも引っかかってくる可能性があるような気もします。実際には運営側の裁量次第なので、予想の域を出ないんですが、ちょっと不安です。ちなみに、以前公開した『SUPERシンプル』というテンプレートは、広告レイアウトの変更などがCSSに入っていたので、ひとまず公開を停止しました。『SUPERシンプル』をご利用いただいている方は、CSSから広告関連のカスタマイズを外されるようお勧めします。なお、この広告に関する規約違反に関しては、月額980円のオプションを申し込むことで回避できますが、年間1万円以上になりますから、ちょっと高すぎるかもしれませんね。でも、せっかく頑張って作っているブログですので、せめて記事のバックアップだけはとっておいてほしいと思います。例えば、アメブロゲットなどいかがですか?14日間無料で試せますので、もしよろしければどうぞ。アメブロカスタマイズで自分らしい空間を作る技

      1
      79
      テーマ:

プロフィール

松本@このブログ

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

続きを見る >

読者になる