やさしいブログの作り方

「見やすい」「読みやすい」「わかりやすい」「親しみやすい」「伝わりやすい」5つの要素を含んだ『やさしいブログ』を作るためにフリースペースやフリープラグイン、CSSを利用したアメブロカスタマイズや画像の加工方法等をご紹介しています。


テーマ:
こんにちは。
『やさしいブログの作り方』の松田です。

お仕事のブログをされている方で、一番需要のあるブログカスタマイズは何と言ってもメニューバーの設置です。

メニューバーはヘッダーエリアと記事エリアの間のところに、観てもらいたい記事へのリンクボタンを設置するカスタマイズになります。

通常は5個程度を横に並べて設置し、各ボタンをメニュー記事やアクセス記事、お客様の声などの記事が表示される仕組みです。


本を見ながら、あるいはやり方を公開しているブログ記事を見ながらでもなかなかうまく行かない人のために、メニューバーを簡単に作れるサイトを作りました。

やさしいブログの作り方

【作成の手順】

【1】まずこちらのサイトにアクセスします。
http://blogsupport.jp/menubar/


【2】メニューバーのボタンの数を選択します。(5個が一般的です。)


【3】リンク先のアドレス1~6のところには表示させたい記事のURLアドレスを貼り付けます。

表示させたい記事を開いて、その記事のタイトル上で右クリック→アドレスをコピーを選択すると記事のアドレスがコピーできます。


【4】ボタンの名前1~6には、ボタンに表示したいフレーズを入れます。

2行にまたがることはできないので、1行に収まるようにだいたい12文字以内を目安に入れて下さい。


【5】ウインドウの表示に関しては、自分のブログ記事へリンクする時は同じウインドウ、ホームページや予約フォームなど外部のサイトにリンクする時は新しいウインドウを選択して下さい。


【6】1~6までが設定できたら最後にメニューバーの色とボタンの丸みを選択して「タグを発行する」をクリックして下さい。

青枠の中にメニューバー設置に必要なタグが表示されますので、枠内の記述を全てコピーします。


【7】フリースペースの編集画面を開いて、編集スペースの最後に貼り付けて保存します。
http://blog.ameba.jp/ucs/profile/srvprofileupdateinput.do

保存後、編集スペースの上に「リクエストは既に処理中であるか無効です 」というメッセージが出たら保存ができていないので再度保存ボタンを押して下さい。


【8】ブログを開いて表示されるか確認します。

表示されていない場合は以下の2点を確認して下さい。

・キーボードのF5キー(Macの場合はコマンドキー+R)を押してページを再読み込みしてみてください。

・マイページ右上の三本ラインのアイコン→サイドバーの配置設定でフリースペースがサイドバーに配置されていなければ使用するに移動させて保存して下さい。


以上で憧れのメニューバーが自分で作れます。^^


【追記】

2016年4月1日より、上記のタグを使ってプロフィールページにもメニューバーが設置できるようになりました。

上記のサイトで作成したタグを以下のプロフィールページのフリースペースに貼り付けるだけで、同じメニューバーがプロフィールページにも表示されます。
http://ucsprofile.ameba.jp/ucs/freespace2/show.do

※サイドバーのフリースペースとプロフィールページのフリースペースは別物なので、それぞれに貼り付ける必要があります。


【追記2】
指定した色や形が確認できるようにサンプルが表示されるようになりました!


よろしれけば動画解説もどうぞ。




最後までお読みいただきありがとうございました。

お知らせ
ご登録頂くと、もれなくLINE@スタートアップセミナーをプレゼント!
やさしいブログのLINE@のご登録はこちらから

これからブログを頑張っていきたい! まずは基本から。
やさしいブログづくりのための、やさしいメール講座

ブログが持つ魅力や可能性を私の言葉で綴りました。
書籍はこちらのオンラインショップのみで販売中です!
いいね!した人  |  コメント(131)  |  リブログ(11)

やさしいブログの作り方:松田さんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント