アメブロカスタマイズを無料で行うツール

追記:2017年8月12日
常時SSL化実施のお知らせ
http://ameblo.jp/staff/entry-12299460231.html
こちらにより、このプラグインは動作しません。

 

アメブロカスタマイズは、今でも需要があります。

ヘッダーデザインをおしゃれにしたり、

訴求力を高めるキャッチコピーを入れたり。

 

デザインを作る部分は、やはりデザイナーの仕事になると思うのですが

例えば、単純なカスタマイズに費用をかけるのは、

そろそろナンセンスになってきています。

 

単純なアメブロカスタマイズにはコストをかけない

単純なカスタマイズというのは

・ヘッダーにオリジナル画像を入れる

・ヘッダー画像の下にナビゲーションを入れる

・記事の最後に定型文の署名を入れる

・サイドメニューにバナーを入れる

 

などです。

 

アメブロカスタマイズは、ヘッダーのもっとも大きな画像デザイン以外は

あまりコストをかける必要がないというのが、僕の考えです。

 

 

スマホでは一切見れないカスタマイズ

カスタマイズにコストをかけない理由としては、

アメブロカスタマイズは、スマートフォンではほとんど見られていないからです。

 

スマートフォンで強制的にPC版のアメブロを見ているユーザーは

アメブロのヘッダー画像を見ているのですが

それ以外は、非常にシンプルなデザインを見ているはずです。

 

これは、Googleの検索なども同じ傾向で、

スマホで見るときは、装飾などを排除したシンプルな情報を表示する方が好ましい(AMP対応)

と、されています。

 

なので、カスタマイズや装飾自体は、時代に逆行している部分もあるんです。

 

それでもアメブロ表示にはこだわりたい

アメブロのカスタマイズは、あまり見られないとはいえ

それでもこだわりたいという心理は、すごくわかります。

「ヘッダーにおしゃれな画像を入れるには、どうしたらいいだろう」

「ナビゲーションを入れて見たいけれど、スクリプトってなんだろう」

「バナーを入れたいけれど、大変そう」

 

さまざまな課題とともに、

「それ、5,000円で対応します」という業者さんの声が聞こえて来ます。

 

業者に依頼することができる方は、そのほうが確実です。

最終的にはプロにお願いするに越したことはないと思うのですが、

お金はかけたくないけれど、アメブロのカスタマイズはしたいという需要も、あると思うのです。

 

そこで、アメブロをカスタマイズするためだけのサービスを作ってみました。

サービスといっても、WordPressの機能を拡張しただけなので、とてもシンプルなものです。

実験的なものだと思ってください。

 

アメスタイルについての概要


『アメスタイル』 で、編集できるものは

  • ヘッダー画像
  • ヘッダー背景
  • 全体背景
  • ヘッダー画像の下のナビゲーションの、見た目と内容
  • メッセージボード
  • 記事の下の署名
  • 複数のサイドバナー
  • 複数のサイド動画
  • 複数のサイド自由項目

などです。

試験的なツールとなります。自己責任での運用をお願いします。

試験的なツール

アメスタイルを開発したのは、アメブロがSSL対応すると発表した頃です。

アメブロの常時SSL化の ありえない話

つまり、2017年3月頃です。

この頃から、僕自身がクライアント様のアメブロカスタマイズを楽にするために開発していたものです。

 

アメスタイルは、SSL対応しているので、

アメブロがSSL対応していても、画像は表示されるはずです。

補足説明:2017.06.06
アメブロがSSL対応を本格的に始めると、ここで書いたjQueryによるスクリプトは動かなくなります。
スタイルと、画像のみの表示になってしまうので、現在もJS関係の挙動を調査中です。
また何か、進捗があればご報告します。このツールならSSL対応してもスライドが使える・・と、誤解をさせてしまった方、申し訳ありません。

 

ヘッダーにナビゲーションを配置したり、

バナーを配置したりする作業を、効率的にするために利用していました。

なので、業務用的なものです。

それを、少し使いやすくしたサービスとなります。

 

アメブロカスタマイズの技術的な解説

最後に、アメブロカスタマイズの技術的な部分について触れていきます。

 

アメブロカスタマイズで利用するのは、

  • フリープラグイン
  • フリースペース
  • カスタムCSS

の3つです。

フリープラグインと、フリースペースは

「設定・管理」の中の「サイドバーの設定」に入っています。

フリープラグイン

主に「スクリプト」と呼ばれる、動的なプログラムを書きます。

 

フリースペース

主に、「html」と言う、「内容」を書き込みます

 

CSSのカスタマイズ

今回、アメスタイルがサポートしているのは、

「カスタム可能」デザインの中の、2カラムや3カラムを選択できるデザインとなります。

今のところ、これ以外では対応していません。
(対応できているデザインもあるのかもしれませんが、確認していません)


こちらのデザインを適用した上で、「CSSの編集」から編集を行っていただきます。


難しいコードは、貼り付けるだけ

アメブロカスタマイズをするためには、

アメブロの構造を熟知しているとともに、それに対応したコードを書く必要があります。

 

ただ、それをゼロから書くのはハードルが高いので

アメスタイルでは、コピー&ペーストするだけにしてあります。

もしかしたら、カスタマイズそのものについての勉強にも使っていただけるかもです。

 

本格的にアメブロカスタマイズをしたい

本格的にアメブロカスタマイズをしたい方は、最寄りのカスタマイズ業者さんに相談してください。

このツールは、実験的な要素があるので、思い通りにいかない部分も出てくるかと思います。

そんなときは、やはり餅は餅屋。

プロに依頼することを、お勧めします。

 

アメスタイルを自分の納品に使いたい

大変恐縮ですが、アメスタイルは業者様は使っていただけません。

利用されているのを発見したら、そのアメブロカスタマイズは画像ごと削除させていただきます。

 

楽しんで使っていただけると嬉しいです。

 

こんな開発室も読まれています