アメーバブログ(アメブロ)のカスタマイズについて

5305371341_63008801e


追記
カスタマイズについて色々と質問が来ておりますが、基本的に、この手のカスタマイズは、「CSSのコードをコピペ」するか「フリープラグイン」「フリースペース」のコードをコピペという形になりますので、コードを作ってる方の許可を取らないと、ブログでコードそのものを紹介したり、メールで教えたりすることはできません。ですから、「なにをやったか」と「どこを参考にしたか」を書いておくので、カスタマイズはご自分でチャレンジしてみてくださいね


【関連】外部リンクを一発で作れる「SHARE HTML」が超絶便利!


【関連】SHARE HTMLを「関連リンク」を一発で貼れるようにカスタマイズしてみた


【関連】Ameba最大の不満であった「記事一覧が見にくい」件が解決してしまった


【関連】当ブログで使っている、gori.me風の「枠」と「見出し」と「関連リンク」のタグを紹介します


【関連】「アイキャッチ画像」「小見出し」「SHARE HTMLの枠線」「Amazonリンクの枠線」完成!


【関連】Google Chrome+アメケアを使ってみたら、もうSafariには戻れない件

【関連】
GetTabInfoがマジでヤバい件~複数のタブの関連リンクが一発~

【関連】
「あとで見るリスト」を追加しました!

「マー坊とゆっきー」のブログカスタマイズの内容
①左と右のサイドバーを、右だけにした

②記事の部分を広く取ることで、細かい改行をやめて、通常のニュースのような自然な改行にした。

③フォントを「メイリオ」に変更した(Macでは標準でメイリオが入っていないことが判明。Windowsのみのフォント変更となります。Androidは不明)

④上メニューを新しく追加した

⑤自己紹介(プロフィール)、ブログの内容紹介、オススメ記事一覧、メールでの問い合わせ、Twitter・Facebook・YouTubeリンクを、上メニューに固定した

⑥ほとんど使っていないカレンダー、月別記事数、ブックマークを未使用にした

⑦フリープラグインを精選し、メールフォーム、Twitterに関しては上メニューに統合したので、削除した

⑧「読者登録ボタン」を記事ごとに追加した

⑨文字の大きさを大きくし、改行幅を広くした

⑩角を丸くした。ウインドウ、ボタンの角を限りなく丸くした。出来ないモノもあったが、頑張って丸くした

⑪コメント欄を「常に表示」されるようにした。投稿した時に、「プロフィール画像」が出るようにした。後、コメントに対して「枠線」と「背景色」を着けた。

⑫サイドメニューの「テーマ一覧」みたいな「タイトル」をデカくして、色を付けて、センタリングした

⑬記事の下に「ソーシャル共有ボタン」を追加した。記事ごとのソーシャルボタンは「その記事」を紹介することになる。→2015/8/7訂正

⑭サイドメニューに「このブログを紹介してくれた人」を追加した。Amebaブログで当ブログの記事をリンク紹介していただいた場合、ここにアイコンと名前が表示される。「アメリンク」の機能である。ちなみに、わざめーばさんのリンクをウチのブログに貼ったら、それだけで、わざめーばサンのブログに「このブログを紹介してくれた人」の所に私が表示された。→フリープラグインに登録できる文字数の制限で削除

⑮記事の下に「部長オススメ記事」「最新記事」「テーマ別記事」のリンクと「Evernoteからの取材記事」へのリンクを付けた。全記事に自動的に表示。

⑯テーマの並び順を変更。地味に時間がかかって大変だった・・・。

⑰Twitterの「フォローする」というボタンを新設。各記事の下に表示されるようにした。読者登録も嬉しいのですが、テーマで見る記事を決めている方はTwitterのフォローの方が見やすいです。ぜひ、どうぞ。

⑱要望に応える形で「ランキング」を復活。カテゴリを変更し「子育て」「闘病」のカテゴリから「サンプル、モニター」「健康」のカテゴリに移動した。ランキングは右メニュー最下部に表示

⑲人気記事のアクセスランキングを「上位50位」までとした

⑳人気記事アクセスランキングを「その日からさかのぼって2週間集計」から「毎月1日リセットの1ヶ月集計」に変更した。月間アクセスランキングを掲載することにした

㉑アメピのプラグインで、「記事一覧」をサムネイル、本文付きの表示に変更した。PC版トップページ右メニュー最上段に配置し、記事一覧とテーマ別記事一覧のリンクを配置して一発でアクセスできるようにした。非常に見やすくなった。これにより、Ameba最大の不満であった「記事一覧が見にくい」ことが解消された。アメピ最高

㉒テーマ別記事一覧がアメピのプラグインで見やすくなったが、テーマが長いと表示されないことがわかったので、テーマ名を短縮した。また、「家電、iPhone、AppleWatch」のテーマを「家電、iPhone」と「AppleWatch」に分けた。

㉓記事一覧に「サムネイル画像」が必ず入ることがわかったので、gori.meさんにならって、著作権フリーの写真検索サイトから記事の先頭に必ず画像「アイキャッチ画像」を入れることにした

㉔見だしに追加して、小見出しを作った。gori.meさんのサイトを参考にさせていただきました。

㉕SHARE HTML、Amazon、楽天、iTunesのリンクに枠線を追加した

㉖あめつくさんのサイトを参考に「コメントの背景に色を付ける」「ゲストコメントを左寄せ」「私のコメントを右寄せ」に変更。CSSをいじるので、直接あめつくさんのサイトをご覧ください

㉗Chrome+アメケアが最強過ぎます

㉘関連記事が8個、ZenBackで表示できるようになりました→表示が不安定で重くなるので削除

㉙わざめーばさんのプラグインで、記事の上下にソーシャルボタンを追加

㉚ドリル鈴木さんのサイトを参考に、フッター(一番下)にメニューを追記した。

㉛わざめーばさんのプラグインで、「全ての記事に関連記事を表示」を追加

㉜トップページ上のメニューをたけPの提案で大幅に変更。色をグリーン系にし、メニューを6つにした。左5つが全て「6文字」になるように統一し、枠線を付けて、白抜きの状態から、カーソルオンで色が付くようにした。色については実際に変えながら、打ち合わせして、数回変更を行った。メニュー数、文字数を減らし、文字を大きくして、見やすくした

㉝フッター(一番下)のメニューも精選、色もグリーン系に変更した

㉞トップページ上にあった「公認レビュワー、アンバサダー認定企業」のページを、「企業ごとに1ページ」で作り直し、そのリンクをトップページ右上メニュー部にどんな商品をレビューするのか簡単な説明を付けて常時表示されるようにした。公認頂いている企業様の表示を優先するようにし、「公認することのメリット」があるように変更した

㉟Twitterのフォローボタンは記事下に付くので、右メニューのボタンを削除した

㊱テーマ別記事のリンクがページ上、ページ下、記事下の3カ所にあるので、右メニューのテーマ一覧の「上」に、要望のある「読者数、読者登録、読者一覧」のボックスを移動した

㊲「あとで見るリスト」を追加(パソコン版のみ)。時間がある時にゆっくり記事が読めるようになりました

ブログカスタマイズの基本的な進め方

当ブログのカスタマイズは、基本的に「原案」は私が出しますが、それを、オフィシャルアドバイザー、そして、常連さんの皆様からご助言をいただいて手直ししております。メインのアドバイスはたけPですが、HPの運営、デザインの実務経験者の方からも多数「表記の仕方、順番」等についてアドバイスをいただいております。ありがとうございます。
「原案」については、アイディアをもとに、検索をして、カスタマイズサイトから品とを得るといった形です。

「わざめーば」さんのカスタマイズ

ネタ元はほとんど「わざめーば(松本)さん」の書いているブログです。このブログスゴいですよ。この方「アメピ」など、Amebaのカスタマイズページも運営されております。どうやら、2016年あたりから有料化されるようですけど、もちろん、使い続けますよ~

アメピ:簡単便利な無料プラグインでアメブロを楽しくカスタマイズ

超お世話になってます

アメブロカスタマイズと読者を増やすブログ運営

わざめーば(松本)さんのブログです。ウチのブログのカスタマイズはほとんどここの情報、技からできております。ありがとうございます

後は、前に買ったアメブロパーフェクトブックですね。これで色々とカスタマイズしております。

アメブロ Perfect GuideBook 2015年改訂版/ソーテック社

¥1,598
Amazon.co.jp

私はKindle版で買って、iPad Air 2で見ながら作業しておりますが、コピペできることを考えると、わざめーばさんのサイトが最強ですね。マジでスゴいです。

ちなみに、私のカスタマイズは、ほとんど誰かの情報をそのまま使ってやってますので、当ブログで紹介することはしません。特に、わざめーばさんのサイトから使わせていただいていることが多いので、直接訪問していただいて、使っていただければと思います。ぜひ、足を運んでみてください。スゴいよ。この人。

あめつくさんのコメントカスタマイズ

iPadでは必須、iPhoneでは「タグを使った見出し、枠等の表示」に欠かせない、「アメエディタ」というAmeba専用のエディタの作者の方のブログです。基本的に「iPhone、iPadでブログを更新しよう」ということで、アプリ開発等がメインに見えますが、ブロガーさんです。

当ブログのカスタマイズでも、非常に多くの重要な部分を参考にさせていただいておりますし、アメエディタもバリバリ活用させて頂いております。

コレについては、ブログでは「20%」でCSSのコードが紹介されておりますが、当ブログではここを「10%」に変更して使っております。実際にご自分のアメブロで「余白20%」「余白10%」で試してみてくださいね

良くコメントいただく常連さん「てんちゃんさん」からいつもいただく「心温まる」コメントを見ていただけるとおわかりだと思いますが、てんちゃんさんのコメントと私の返信は背景色を変えております。これもCSSをいじることでできますが、コードを公開されておりますので、後は色を選ぶだけです。

コレは、色見本になります。基本、薄い色が良いと思います。gori.meさんも参考になさってくださいね。ニュースサイト、プロブロガーのブログは本当に参考になりますよ

デザインの参考といえばここ!月間250万PVの情報ブログ「gori.me」

言わずとしれた超有名サイト「gori.me」でございます。見出し、小見出し、リンクの貼り方、記事の構成の仕方、タイトルの付け方、アイキャッチ画像、「追記」の考え方、同じレビューを複数回アップする時の方法・・・。もう数え切れないくらい参考に(と言うか、そのままマネ)させていただいております。

ウチのブログの見た目がスゲー良くなってきているのは、こういう、「プロのサイト」をパクっているからです。だから、良い感じになってきているだけで、授業料を払っても良いくらいです。それくらい参考にさせていただいております。

色々、こういうサイトはありますが、カスタマイズ系のサイトと違い、gori.meは「情報サイト」なので、「いかに分かりやすく、見やすくするか」ということが非常に参考になります。ですから、基本的なカスタマイズについてはカスタマイズサイトなんですけど、構成や運営についてはgori.meチルドレンとして勝手に「金魚の糞」状態でくっついていく予定です。LINE等でも非常にお世話になっておりまして、素晴らしい方です。

最近の私のブログをご覧になって「真似したい」という嬉しいお言葉をいただけるようになりましたが、それは結局「gori.meに近づきたい」と言うのと同じなんです(笑)。それを間違えないでください。gori.meさんがスゴいんです・・・。本当にいつもお世話になっております!

~更新情報~
★2015/08/13 追記(GetTabInfo、あとで見るリストの記事追加)
★2015/8/9 追記(Twitterボタン削除、上メニュー修正、フッターメニュー追加)
★2015/8/7 追記(アメリンク削除、ソーシャルボタンを記事の上下に追加)
★2015/8/6 追記(Chrome+アメケア、ZenBack追記)
★2015/8/6 追記(あめつくさん、gori.meさんのサイト紹介、コメント欄関係追記)
★2015/8/5 追記(枠線、小見出し、アイキャッチ画像関係)
★2015/8/4 追記(アメピプラグインで記事一覧、テーマ別記事一覧を追加)
★2015/8/1 追記(SHARE HTML関連リンク一発作業)
★2015/7/30 追記
★2015/7/25 追記
★2015/7/24 追記
★2015/7/20 追記
★2015/7/19 追記
★2015/7/4 追記
★2015/6/15 追記
★2015/6/13 公開
スポンサーリンク

この記事をシェアする!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索