読んで欲しい記事へのリンクを作る

内藤です。

アメブロで『料金表・アクセス・お問合せ』など読んで欲しい記事へのリンクを、簡単に作る方法です。

※まずは、それぞれの記事を準備しておいてください。

インターネットエクスプローラーなどのブラウザで、アメブロの管理画面と、ブログを開いた状態の2つのタブを立ち上げて置くと便利です。

1. リンクさせたい文字の準備

【ブログを書く】から、料金表・アクセス・問合せなどリンクさせたい文字を入力します。

例えばこんな感じにしてみます
(タグ編集エディタの場合)

(新エディタの場合)

2.記事URLの取得

次に、記事のURLをコピーします。

ブログを表示したブラウザのタブで、あらかじめ用意しておいた料金表などの個別記事を開きます。

アドレスバーに個別記事のURLが表示されます



そのURLをコピーしておきます。

3.文字にリンクをはる

アメブロの【ブログを書く】画面に戻り、1で書いたリンクをかけたい文字を選択しリンクボタンをおします。



新エディタならばこちらのリンクボタン


リンク設定のボックスがでてきますので、2でコピーしておいたURLを貼り付けます。
リンク先の表示方法を選択し、『リンク』ボタンを押します。

※リンク先の表示方法は、リンク先がブログ内ならば『同じウィンドウ』、リンク先が他のサイトならば『新しいウィンドウ』が良いでしょう

これで、文字にリンクされます。

これを各文字に繰り返します。

4.HTMLタグをコピーしておく

3で各文字にリンクを設定するとこんなHTMLができます


新エディタの場合は、『HTML表示』に切り替えます


このHTMLタグをコピーし、メモ帳などに保存しておきます。

5.記事やフリースペースで貼り付けて使用

あとはフリースペースや記事を書く際に、保存しておいたHTMLタグを貼り付けて使えば、読んで欲しい記事へのリンクがいたるところに設置できます。

また、リンク文字全体を枠で囲みたい場合などはこちらのやり方と組み合わせると良いです。

アメブロにfacebook「いいね!」を押した方の顔を表示

内藤です。

アメブロの共有ボタンでの標準装備となった「いいね!」ボタン。



こんな風に「いいね!」を押した方の顔を表示させるやり方を、僕のやっているやり方ですが紹介します

1.まずは、facebookにログインした状態で、アプリ設定をします。

アプリ設定画面はこちら

facebook DEVELOPERSページに切り替わりますので、「新しいアプリケーションを作成」をクリックします


アプリケーションの名前をつけ、画像認証を入力します。

2.次にいいねボタンの設定を行います

こちらから「いいね!」ボタンの設定をします。





取得した2つのコードを使って、アメブロに設置します。

3.アメブロへ設置

アメブロのフリープラグインに次のコードを入れていきます。

記事の中に『いいね!』を入れるために、まずはこちらをフリープラグインの最初に追加します

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

次に先ほどの1つ目のコードを追加します。

<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>

アプリIDは、ご自分のアプリIDになります。
先ほどコード取得したものをコピーすればOKです。

さらに、今回は各記事の文頭に設置するために次を入れます。

<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&#91;i&#93;;
title = entries.eq(i).text();
$("div.articleText").eq(i).before('<div class="fb-like" data-href="'+url+'" data-send="true" data-width="410" data-show-faces="true"></div>');
}});
</script>

※上記のうち次の部分に、コード取得で表示された2つめのコードが含まれています。( data-href=”‘+url+'” を付け足した状態になっています)

$("div.articleText").eq(i).before('<div class="fb-like" data-href="'+url+'" data-send="true" data-width="410" data-show-faces="true"></div>');

※アメブロではmetaタグにOGP情報を書き込むことができませんので、OGP設定はスルーしています

これで保存し、フリープラグインを使用する機能に設置すると、アメブロの記事上部に顔つきのいいね!が表示されるようになります。



顔写真が付くとどんな方が「いいね!」してくれたか分かっていいですね^^

サイドバーの見出し背景を画像にしてみる



内藤です

サイドバーの見出し背景を画像にしてみるやり方です。
(『CSS編集用デザイン』の場合)
※サイドバーの見出しとは「このブログの読者」や「テーマ」などの部分です。

1.背景画像となる画像を用意します

画像編集ソフトやボタンメーカーで作っておくとよいでしょう。

グラデーションなんかも簡単にできます
(『create』ボタンとダウンロードをお忘れなく)

ワイド側のサイドバーは横幅300px、もう一方のサイドバーは180pxになります。

例えばボタンメーカーでこんな画像を作っておきます。

ワイド側用  300px×30px


もう一方のサイドバー用 180px×30px

2.アメブロにアップロード

画像をアメブロの画像フォルダにアップロードします。
記事を書く要領から、『画像ボタン』で行うのが楽です。
(オリジナルサイズで表示するようにしましょう)

HMTL表示、もしくはタグ編集エディタで画像のURLが分かります

<img src=" から  " の間にあるアドレスが、画像URLになります。

3.CSS編集

画像URLが分かったら、次のCSSコードを [クイックリンク] ⇒ [デザインの変更] からCSSの編集で、最後に追加します

.skinSubA .skinMenuHeader{
background:url(&lt;font color=&quot;#FF0000&quot;&gt;ワイド側画像URL&lt;/font&gt;) no-repeat;
padding:5px 10px;/*余白*/
height:30px;/*高さ*/
}

.skinSubB .skinMenuHeader{
background:url(&lt;font color=&quot;#FF0000&quot;&gt;もう一方側の画像URL&lt;/font&gt;) no-repeat ;
padding:5px 10px;/*余白*/
height:30px;/*高さ*/
}

ワイド側画像URL、もう一方の画像URLの部分にそれぞれの画像URLを代入します

これでこのようにサイドバーの見出し背景を変えることができます

やってみてくださいね。

その他カスタマイズ目次はこちらから

メモ帳にCSSを貼り付けたら1行になってしまったら


内藤です

アメブロでCSSを編集してカスタマイズするのであれば、アメブロ上で直接やるのではなく、パソコンのメモ帳などに一旦コピーして編集しましょうと勧めています。

アメブロ上で直接編集していくと、エラーが出てしまい保存されない危険性があります。
メモ帳上で編集するとバックアップにもなりますので、アメブロでエラーが出てしまっても安心です。

それでですが、アメブロの管理画面が新しくなってからのようなのですが、こんな現象が起こります。IE(インターネットエクスプローラー)⇒ メモ帳 の場合。

アメブロのCSSをコピーし(『CSS編集用デザイン』もしくは旧デザインの『ベーシック』を使っている場合)、メモ帳に貼り付けると、こんな感じですべて1行になってしまいます。
(2012.5.22時点)

●CSSの編集画面から、コピーしてメモ帳に貼り付けると…

●こんな感じで1行になってしまいます。



見にくいですし、編集も面倒になります。

これをブラウザをIEではなく、GoogleChromeやFireFoxを使うと解決されます。

もしくは、メモ帳ではなく、僕も使っているMeryなどを使うとIEでも問題なく表示されます。

⇒ Mery

カスタマイズする際には、参考にしてみてくださいね

フリースペースの中にも、枠を入れる


内藤です。

サイドバーに設置できる「フリースペース」
画像やリンクをはれますので、告知にも使える超大事なパーツです。



このフリースペースの中でも、枠を付けて表示させたい場合があると思います。

例えばこちらの方のような感じで

枠がないよりも、区切られている方が見やすくなりますよね。

記事の中で枠を使う場合のやり方は、こちらで説明していましたが、フリースペースでも同様に使う事ができます。

■フリースペース内で枠で囲みたい部分を

<div style="border:2px dotted #CCCCCC; padding:10px;"> と </div>

で囲みます。

こんな感じです ↓


すると、サイドバーのフリースペースで枠に囲まれて表示されます。

また、枠の中に色を付けたい場合は

<div style="border:2px dotted #CCCCCC; padding:10px; background-color:#F2F2F2;">

のようにbackground-color:#F2F2F2;を付け加えることで可能になります。



カラーコードはこちらを参照してください

※ 最後の </div>  が抜けてしまうと、ブログの表示が崩れてしまいます。忘れないようにご注意くださいね。

その他のカスタマイズはこちら

記事の下に定型文を自動挿入する

内藤です

アメブロで記事の下に定型文を自動挿入することができます

記事を読んだ後が一番行動を起こしやすいので、案内や読んで欲しい記事へのリンクがあると効果的です。

設置の仕方を紹介しますね。
(【CSS編集用デザイン】の場合)

フリープラグインに以下のコードを書きます。
※フリープラグインは、 [クイックリンク] ⇒ [プラグインの追加] から編集可能です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".articleText").append('<div class="teikei">ここに定型文</div>');
}
);
</script>

もし既にこの部分がフリープラグイン内に書かれている場合は、こちらは不要です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js">

旧デザインの「ベーシック」の場合は

<script type="text/javascript">
$(function(){
$(".foot").before('<div class="teikei">ここに定型文</div>');
}
);
</script>

で可能です

『ここに定型文』 の部分に、入れたい定型文を1行でいれます。改行したい場合は改行タグの <br> を使います。

そして、【CSSの編集】で、以下を一番下に付け加えると、定型文を枠で囲ったり装飾が可能になります。

.teikei{
background-color:#F7F7F7; /*背景色*/
border:1px dotted #CCCCCC; /*枠線*/
padding:10px;
}

記事下に設置したいという方は参考にしてみてくださいね。

※携帯電話やスマートフォンのアメブロアプリではメルマガフォームは表示されません。

フリースペースを、他の項目のように表示させる

内藤です。

便利に使う事のできる、「フリースペース」
サイドバーにあるパーツで、文字や画像を自由に配置できます。

告知板として使う事もできますので、非常に重要なパーツです。

このフリースペースをこんな風に使いたくないでしょうか?

“お知らせ” というサイドバーのパーツはありませんが、フリースペース内でこんな風に他のサイドバー項目と同じような感じで表示させることができます。

本来フリースペースはこんな感じになってしまいます。

やり方は、フリースペースで以下のように書きます

&lt;div class=&quot;skinMenu&quot;&gt;&lt;div class=&quot;skinMenuHeader&quot;&gt;&lt;span class=&quot;skinMenuTitle&quot;&gt;お知らせ&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;skinMenuBody&quot;&gt;セミナーの開催

日時:○月○日
料金:10000円

&lt;a href=&quot;http://ameblo.jp/***&quot;&gt;お申込みはこちらから&lt;/a&gt;
&lt;/div&gt;&lt;/div&gt;

※「CSS編集用デザイン」になります。

“お知らせ” が入っている部分が、見出し部分になります。

そして、
<div class="skinMenuBody"> と </div> の間の部分が中の部分になります。

コピーして使ってみてくださいね。

構造的にはこんな感じです。

※フリースペースの上に隙間ができるので

スキンCSSの編集で以下を最後に付け足してみてくださいね

.freespaceArea{
margin-top:0;
}

カスタマイズの手順やその他のカスタマイズはこちらを参考にしてみてください

記事タイトルの線や背景


内藤です。

新カスタム可能デザイン(2011年8月以降)の【CSS編集用デザイン】で、記事タイトルの部分は、最初このような感じです。



左側に縦線がついています。
この部分の変更の仕方です。

[クイックリンク] ⇒ [スキンCSSの編集] で

/* (3-6) 記事
——————————————–*/

という部分のところに

/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:5px solid #e4e4e4;
}

があります。

この部分の

border-left:5px solid #e4e4e4;

というのが、 左側の線を 5px 実線 カラーを#e4e4e4 にするという事です。

border-left:5px solid #000000;

と、カラーコードを変更してみると



このように縦線が#000000(黒)になります。

border-left:5px solid #000000; を border-left:0px solid #000000; にして
border-bottom:5px solid #000000; を } の前に付け加えてみると

左の縦線がなくなり、下線が付くようになります

さらに、} の前に  background:#F2F2F2;  を付け加えると

/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:0px solid #e4e4e4;
border-bottom:5px solid #000000;
background:#F2F2F2;
}

このように背景にも色が付きます



ブログに応じて変えてみてくださいね

カラーコードはこちら

その他のカスタマイズの目次はこちら

アメブロ メッセージボードの枠線を変えてみる


内藤です。

2011年8月以降の新カスタム可能デザイン【CSS編集用デザイン】では、メッセージボードの上下に点線がついて表示されます。



これが嫌だという方が結構います^^;

『点線じゃなくて、枠にしたい』とよく言われます。

やり方は、CSSの

/* (3-5) メッセージボード
--------------------------------------------*/


.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}

を探します。
そして以下のように変えます

.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border:1px solid #FFC7DA;
background:#FFF0F5;/* ←メッセージボードに背景を敷きたいとき */

}

するとこのような感じになります

カラーコードを変更すると、枠の線や、内部の色も変更できます。

カラーコードはこちらから

その他の自分でできるカスタマイズは、こちらを参考にしてみてください

記事中の文章を枠で囲む

内藤です。

アメブロで記事中の文章を囲みたい場合ってあると思います。

そんな時は、投稿エディタをHTML表示にして(もしくはタグ編集エディタ)、囲みたい文章を

<div style="border:2px dotted #CCCCCC; padding:10px;"> と </div>

で囲みます。

こんな感じになります。

囲みの中の文章

border:2px dotted #CCCCCC; padding:10px;のうち、
border:2px dotted #CCCCCC; は 
線の太さが2pxで、破線、線の色が#CCCCCC(グレー)を意味しています。

padding:10px; は枠と文章との余白を意味します。

枠内の色

<div style="border:2px dotted #CCCCCC; padding:10px; background-color:#F2F2F2;">

のように background-color:#F2F2F2;を付け加えると、枠の内部に色を付けることも可能です。

こんな感じです。

囲みの中の文章

線の種類

線の種類には

  • solid (実線)
  • dotted (破線)
  • dashed (点線)
  • double (二重線、3px以上)

などがあります。


例)

▼太さ2px、破線、線の色#CCCCCC、余白10pxの枠の場合

<div style="border:2px dotted #CCCCCC; padding:10px;">
囲みの中の文章 
</div> 

囲みの中の文章 

 

▼太さ2px、実線、線の色#FF0000、余白10px、背景色#F9DCDAの枠

<div style="border:2px solid #FF0000;padding:10px;background-color:#F9DCDA;">
囲みの中の文章
</div>

囲みの中の文章

▼太さ3px、点線、線の色#000000、余白10px、背景色#CCCCCCの枠

<div style="border:3px dashed #000000;padding:10px;background-color:#CCCCCC;">
囲みの中の文章
</div>

囲みの中の文章

▼太さ3px、二重線、線の色#0000FF、余白10px、背景色#F2F2F2の枠

<div style="border:3px double #0000FF;padding:10px;background-color:#F2F2F2;">
囲みの中の文章
</div>

囲みの中の文章

カラーコードはこちらを参照してください


その他のカスタマイズの目次はこちら