アメブロにfacebookコメントを付ける

内藤です

アメブロの記事にfacebookのコメントボックスを付けるやり方です。

コメントをもらうと、くださった方のfacebook上でも表示されますので、facebook上で記事を広げてくれることにもなります

まず、facebookのアプリIDを作っておきます。

facebookのアプリIDの作り方

次に、アメブロのフリープラグインに以下を入れます

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=アプリID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<script type="text/javascript">
$(document).ready(function(){
var page_url = location.href;
var entries=$(".skinArticleHeader h1 a");
for(i=0;i<entries.length;i++){
var url=entries[i];
title = entries.eq(i).text();
$("div.skinArticleFooter").eq(i).append('<div class="fb-comments" data-href="'+url+'" data-num-posts="5" data-width="410"></div>');
}});
</script >

※アプリIDの箇所を最初に作ったfacebookアプリIDにして、フリープラグインに追加します。

これで表示されるようになります。

(新デザインのアメブロのやり方になります)

フリースペースに画像を入れるには

内藤です。


サイドバーのフリースペース。

文字や画像も自由に貼り付けることができます。

ただ、フリースペースの編集から、画像がアップロードできません。


そこでつまづいてしまう方は少なくありません。

「HTMLタグわかんないし…」と。


なので、通常のように記事を書く要領で、記事の編集画面を開きます。

フリースペースに入れたい画像も画像ボタンからアップロード、記事に追加で入れていきます。

画像の横幅はフリースペースの幅を考慮したサイズの画像をアップロードします。(ワイドサイドバーは300px程度、狭い方は180px程度)

編集が終わったらHMTL表示にして、HTMLタグをコピーします。
タグ編集エディタなら、そのままコピーします。

[アメーバのサービス一覧] ⇒ [フリースペース編集] に切り替え、貼り付けます。
これでフリースペースに画像を貼り付ける事も簡単になります^^

旧デザインの記事タイトルがリンクになっています

内藤です。


旧カスタム可能デザインの「ベーシック」をお使いの方は、最近記事タイトルの色が変わっていませんか?


記事タイトルがクリックできるようになり、個別記事へ飛ぶようになりました。

そして、記事下にあった「記事URL」がなくなっています。

新しいデザインと同じ仕様になっています。


で、記事タイトルの文字色を変えたい場合ですが


CSSに

.entry h3.title a{
color:#000000;
}


を追加すると、黒字になります。


色が変わってやだな~ と思っている方は修正してみてくださいね。

※「CSS編集用デザイン」などの新デザインの方には関係ありません。

定型文を枠で囲って見やすくするには

内藤です

記事の最後やサイドバーのフリースペースには、営業の案内や営業に関する記事へのリンクを表示させておきたいものです。

定型文を用意しておくと便利です。

こちらを、記事の場合はタグ編集エディタ、またはHTML表示に切り替えて、貼り付けてみてください。 フリースペースにも使う事ができます

<div style="background-color:#EEEEEE;border:1px solid #666666;padding:10px;">
<a href="ここにメニュー記事のURL">メニュー一覧</a>
<a href="ここにアクセス記事のURL">お店までの道のり</a>
<a href="tel:ここに電話番号">表示させる電話番号</a>
【営業時間】
【住所】
</div>


『ここにメニュー記事のURL』 などの部分は、リンクさせたい記事のURLを代入します。

このように表示されます。

メニュー一覧
お店までの道のり
表示させる番号
【営業時間】8:00~20:00
【住所】○○県○○市





背景色、線の種類や色も変更ができます。

■背景色
background-color:#EEEEEE;

#EEEEEEが色を表します。このカラーコードを変更すると色を変えられます。
カラーコードはこちらを参考にしてみてください

■線の種類や色
border:1px solid #666666;

border:線の太さ 種類 色; を表しています。

代表的な線の種類は

solid 実線



double 二重線(doubleの場合は3px以上で)



dashed 破線



dotted 点線



記事下や、フリースペースで使ってみてくださいね

なぜか太字に… 始まりと終わりは必ずセットにしてください

内藤です


記事の途中から文字がすべて太字になった。
サイドバーのフリースペースの下からサイドバーがすべて太字になった。



こんな状況になったことはありませんか?

このような不具合は、HTMLタグのミスによるものです。


例えば、アメブロで太字になるBボタンを押すと

<strong>太字</strong>

という形で、<strong>という太字の始まりを表すHTMLタグと、</strong>という太字の終わりを表すHTMLタグが挿入されます。

始まりと終わりは必ずセットでなければいけません。


標準エディタや、新エディタを使って編集を何度もしていると、この数があわなくなってしまう事があります。

終わりのタグが少ないと、太字が続いてしまいます。

これが、最初にあげた問題の原因です。


HTML表示、または、タグ編集エディタにして、始まりと終わりがセットになっているか確認するようにしてみてくださいね

「記事URL」を設置

内藤です。


アメブロの旧デザインのベーシックでは、記事の下に「記事URL」がありました。
※旧デザインは2011年8月以前に選択できたデザインです。



これをクリックすると個別記事ページに移動し、記事のURLも分かりました。


しかし、新しいデザインになり、「記事URL」がなくなりました。

記事タイトル自体がクリックできて、個別記事ページに移動できるようになっています。

でも、そのこと自体に気が付かないという方も多いです。

で、新しいデザインでも、記事の下に「記事URL」を付けてみました。




フリープラグインに

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var entries=$(".skinArticleHeader h1 a");
for(i=0;i<entries.length;i++){
var url=entries[i];

$("div.articleLinkArea").eq(i).prepend('<a href="'+url+'">記事URL</a>');
}}
);
</script>


を入れると表示されます。


様子見で付けてみました^^;

アメンバー記事の文字を読みやすくする

内藤です

ブログをカスタマイズしていても、アメンバー記事はカスタマイズされません。

アメンバー記事はブログとURLも違っていて、独立しています。
サイドバーもありませんしね。



でも、ブログをカスタマイズしてると、アメンバー記事が読みにくく感じます。
文字も小さいままですから。


そこでアメンバー記事でも文字を大きくしたい場合。

1つは、記事を書くときに「文字サイズ」を使うという事。
通常のブログ記事では、部分的だけ使いましょうと言っていますが、アメンバー記事では編集したCSSが反映されませんので、使うのもありかなと。


もう1つは、HTML表示にして文章を

<div style="font-size:15px;line-height:1.5"> と </div>


で囲むという方法があります。


リンク文字をわかりやすくするには


<a href="リンク先URL" style="color:#0000ff;text-decoration:underline;font-weight:bold;">


のように 

style="color:#0000ff;text-decoration:underline;font-weight:bold;"

を追加すればOKです


参考にしてみてくださいね

アメブロ(旧デザイン) フリースペースの文字を目立たせる

旧デザインのアメブロのサイドバーにもあるフリースペース

フリースペースの文字も大きく、リンクが目立つようにしておきましょう。

新しいカスタム可能デザイン【ベーシック】のCSSに

#freespace{
font-size:15px;
line-height:1.5;
}
#freespace{
font-weight:bold;
color:#0000FF;
}

を入れると見やすく、よりクリックされやすくなります。

アメブロの各種設定を変えたいときの目次リンク

内藤です。

アメブロで、カスタマイズではありませんが、ちょっと設定を変えたい場合ってあります。
例えば、タイトルを変えたいとか、1ページの表示件数を変えたいとか。

でも、どこに何があるか分からずに、たどりつけないアナログさんも多いです。

という事で、設定を変更したいときに便利な目次リンクを用意してみました。

*アメブロにログインしてくださいね

タイトルや説明文を変えたいとき

記事投稿画面(エディタの設定)を変えたいとき

コメントの受付設定を変えたいとき

読者登録の設定を変えたいとき

ペタの設定を変えたいとき

記事下の他の記事へのリンク表示を変えたいとき

共有ボタンをの設定を変えたいとき

コメントや読者申請のメール通知設定を変えたいとき

アメブロからのメルマガ配信設定を変えたいとき

登録メールアドレスを変更したいとき

ログインパスワードを変えたいとき

テーマを編集したいとき

サイドバーの各項目の表示件数を変えたいとき

サイドバーの配置を変えたいとき

FacebookやTwitterの自動投稿設定を変えたいとき

プロフィール画像を変えたいとき

ニックネームを変えたいとき

広告を外したいとき

携帯からの投稿を設定を変えたいとき

メッセージの設定を変えたいとき

なうの設定を変えたいとき

迷ったら見てみてくださいね

自分でカスタマイズしてみたい方はこちら

サイドバーのリストに下線を入れて見やすくする



内藤です

旧デザインの『ベーシック』では、サイドバーの各リストが詰まっていて見にくいです


これを各リスト下に点線を入れ、見やすくしてみます。


【デザインの変更】 ⇒ 【CSSの編集】で

/*サイドバー各項目リスト下線*/
#recent_entries .menu_frame ul li,
#theme_list .menu_frame ul li,
#archives .menu_frame ul li,
#reader .menu_frame ul li,
#favorite .menu_frame ul li,
#bookmark .menu_frame ul li{
border-bottom:1px dashed #CCCCCC;/*下線*/
margin-bottom:5px; /*下マージン*/
}

を最後に追加します。 *ベーシックの場合です

これで見やすくなりますね