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

内藤です。

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

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

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

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

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

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

(新エディタの場合)

2.記事URLの取得

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

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

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



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

3.文字にリンクをはる

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



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


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

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

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

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

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

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


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


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

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

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

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

メモ帳に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;
}

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

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

記事エリアの上が、なぜか空白に…

内藤です。

最近またよくいただく質問ですが、
「記事の上に空白ができてしまいます…」

このような現象ですね ↓


記事エリアの上に空白ができています。

これは何かというと、メッセージボードの改行です。

アメブロのパーツの1つでメッセージボードがあります。
メッセージボードに何も書いていなくても、改行が入っているとこのように空白ができてしまいます。

メッセージボードに何か書かれている方でも、『メッセージボードの下に空白ができてしまう』という方は同じ改行が原因です。

メッセージボードの編集画面も一見何もないように見えますが、


HTML表示に切り替えてみると…


この <br /> というのが改行を意味しています。


何もないようには見えて、実はこのように改行のHTMLタグが残っているために空白に表示されてしまいます。

この改行のHTMLタグを削除すれば解消されますので、心当たりのある方は参考にしてみてくださいね。

携帯に表示させるなら、毎回コピー

内藤です。

フリープラグインを使って、毎回記事の最後に定型文を自動的に入れることができます。

これは「初心者にもできるアメブロカスタマイズ」「アメブロ逆引きQ&A101」の中でも解説しています。

しかし注意点が1つあります。

携帯電話では、この自動挿入が効きません。

スマートフォンのアプリで見た場合もパソコンと表示が事なり、自動挿入されません。

携帯からの読者さんが多い場合は、毎回定型文などは書き込む必要があります。

メモ帳などに定型文を作っておき、毎回コピー貼り付けをするようにしましょう。

手間かもしれませんが、携帯読者さんを考えると大事な作業です。

カラーコード

便利なカラーコードです

そのままコードがコピーできます。

#000000 #333333 #666666 #999999 #cccccc #ffffff
#000000 #000033 #000066 #000099 #0000cc #0000ff
#003300 #003333 #003366 #003399 #0033cc #0033ff
#006600 #006633 #006666 #006699 #0066cc #0066ff
#009900 #009933 #009966 #009999 #0099cc #0099ff
#00cc00 #00cc33 #00cc66 #00cc99 #00cccc #00ccff
#00ff00 #00ff33 #00ff66 #00ff99 #00ffcc #00ffff
#330000 #330033 #330066 #330099 #3300cc #3300ff
#333300 #333333 #333366 #333399 #3333cc #3333ff
#336600 #336633 #336666 #336699 #3366cc #3366ff
#339900 #339933 #339966 #339999 #3399cc #3399ff
#33cc00 #33cc33 #33cc66 #33cc99 #33cccc #33ccff
#33ff00 #33ff33 #33ff66 #33ff99 #33ffcc #33ffff
#660000 #660033 #660066 #660099 #6600cc #6600ff
#663300 #663333 #663366 #663399 #6633cc #6633ff
#666600 #666633 #666666 #666699 #6666cc #6666ff
#669900 #669933 #669966 #669999 #6699cc #6699ff
#66cc00 #66cc33 #66cc66 #66cc99 #66cccc #66ccff
#66ff00 #66ff33 #66ff66 #66ff99 #66ffcc #66ffff
#990000 #990033 #990066 #990099 #9900cc #9900ff
#993300 #993333 #993366 #993399 #9933cc #9933ff
#996600 #996633 #996666 #996699 #9966cc #9966ff
#999900 #999933 #999966 #999999 #9999cc #9999ff
#99cc00 #99cc33 #99cc66 #99cc99 #99cccc #99ccff
#99ff00 #99ff33 #99ff66 #99ff99 #99ffcc #99ffff
#cc0000 #cc0033 #cc0066 #cc0099 #cc00cc #cc00ff
#cc3300 #cc3333 #cc3366 #cc3399 #cc33cc #cc33ff
#cc6600 #cc6633 #cc6666 #cc6699 #cc66cc #cc66ff
#cc9900 #cc9933 #cc9966 #cc9999 #cc99cc #cc99ff
#cccc00 #cccc33 #cccc66 #cccc99 #cccccc #ccccff
#ccff00 #ccff33 #ccff66 #ccff99 #ccffcc #ccffff
#ff0000 #ff0033 #ff0066 #ff0099 #ff00cc #ff00ff
#ff3300 #ff3333 #ff3366 #ff3399 #ff33cc #ff33ff
#ff6600 #ff6633 #ff6666 #ff6699 #ff66cc #ff66ff
#ff9900 #ff9933 #ff9966 #ff9999 #ff99cc #ff99ff
#ffcc00 #ffcc33 #ffcc66 #ffcc99 #ffcccc #ffccff
#ffff00 #ffff33 #ffff66 #ffff99 #ffffcc #ffffff

新カスタム可能デザインの「CSS編集用デザイン」と、旧カスタム可能デザインの「ベーシック」

今アメブロで、[スキンCSSの編集]からカスタマイズができるデザイン(スキン)は、

  • CSS編集用デザイン
  • ベーシック
  • ピーチ、グリーン、ブルー、グレイ

があります。

このうち、今新たに選択できるデザインは、CSS編集用デザインのみとなっています。

ベーシック、ピーチ、グリーン、ブルー、グレイを既に選択済みの場合は、そのまま[スキンCSSの編集]でカスタマイズが可能です。
※ただし、デザインを変更してしまうと、再度選択することができません。

2011年8月から、CSS編集用デザインのみとなりましたが、ベーシックやピーチ等とはCSSが異なります。

ベーシックで入れていたCSSを、CSS編集用デザインに入れてもうまく反映されません。

ここら辺で戸惑っている方が凄く多いので、ご注意くださいね。

CSS編集用デザインの新しいデザインと、ベーシックなど旧デザインとの違いを、簡単に書きますね。

◆ブログ幅(ヘッダー幅)

【新】 980px
【旧】 800px (ピーチ等は760px)

◆サイドバー

【新】 1つがワイド


【旧】 左右同じ幅

◆ページ送り

【新】


【旧】


◆個別記事へのリンク

【新】記事タイトルから


【旧】記事下の『記事URL』から


ご自分のデザインがどちらなのか、覚えておいてくださいね。

※『基本設定からカスタマイズまで アメブロ 逆引きQ&A 101 』は、新デザイン対応版です。

アメブロ (旧) サイドバー見出し背景色を変える

内藤です

旧カスタム可能デザインの【ベーシック】で、サイドバーの見出し背景色を変えるやり方です。



スキンCSSの編集で、次を一番下に追加します

/*サイドバー見出し背景*/
h4.menu_title{
background-color:#FF0000; /*背景色*/
}

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

アメブロ (旧) サイドバーのリスト等の行間を見やすく広げる

内藤です。

旧デザインの【ベーシック】のサイドバーは、初期状態では行間が詰まっていて見にくいです。

それを広げて見やすくしてみます



スキンCSSの編集で、次のCSSを一番最後に追加します

/*  サイドバーのリストの行間  */
.menu_frame ul li{
margin-bottom:5px; /*下マージン*/
}

それぞれのリストの下にマージンを持たせることで見やすくします。
マージンの数字は環境にあわせて変えてください