コピペで使える便利な枠など

内藤です。

ブログを書いていて文章を枠で囲みたいな〜 というときは多いですよね。

コピペでつ変える便利な枠を用意しました。


 
■例)枠の線が1pxのグレー(#cccccc)の実線、中が白(#ffffff)

囲みの中の文章

 

■コード

<div style="border:1px solid #cccccc;padding:10px;background:#ffffff;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)枠の線が1pxの赤(#ff0000)の破線、中が薄いグレー(#f5f5f5)

囲みの中の文章

 
■コード

<div style="border: 1px dotted #ff0000; padding: 10px; background: #f5f5f5;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)枠の線が2pxの黒(#000000)の点線、中が薄い黄色(#ffffcc)

囲みの中の文章

 
■コード

<div style="border: 2px dashed #000000; padding: 10px; background: #ffffcc;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)枠の線が3pxの青(#0000ff)の二重線、中が薄い青色(#99ccff)

囲みの中の文章

 
■コード

<div style="border: 3px double #0000ff; padding: 10px; background: #99ccff;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)枠の線が2pxのグレー(#cccccc)の角丸の実線、中が白(#ffffff)

囲みの中の文章

 
■コード

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

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)見出しの付いた枠

見出し文字

囲みの中の文章

 
■コード

<fieldset><legend>見出し文字</legend>囲みの中の文章</fieldset>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)見出しの付いた枠 色つき

見出し文字

囲みの中の文章

 
■コード

<fieldset style="border:1px solid #ff0000;"><legend>見出し文字</legend>囲みの中の文章</fieldset>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)見出しの付いた枠2

見出し文字
囲みの中の文章

 
■コード

<div style="background:#000000;padding:5px;color:#ffffff;">見出し文字</div><div style="border: 1px solid #000000; padding: 10px; background: #ffffff;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら


 
■例)見出しの付いた枠2 赤枠

見出し文字
囲みの中の文章

 
■コード

<div style="background:#ff0000;padding:5px;color:#ffffff;">見出し文字</div><div style="border: 1px solid #ff0000; padding: 10px; background: #ffffff;">囲みの中の文章</div>

ダブルクリックで、コードを選択できます。コピーしてお使いください

カラーコードはこちら
 


 

記事の中やフリースペースで応用して使ってみてくださいね

記事の下に「読者になる」ボタンをいれて読者を増やす

内藤です

アメブロの芸能人ブログの記事下には、「読者になる」ボタンが顔つきで表示されています



記事下にあることでクリックしてもらいやすいですが、顔写真を載せることでさらに読者登録を促すこともできますね。

1.まずは使用する顔写真のURLを取得

アメブロの管理画面の左上にあるプロフィール写真から、画像URLを取得します。


画像の上で右クリック ⇒ 画像URLをコピー


2.フリープラグイン用コード

こちらの「コピーした画像URL」の部分に、先ほどコピーした画像URLを貼り付けます。また、「アメブロID」の部分に自分のアメブロIDを代入します。 http://ameblo.jp/inakadenetlifeならば、inakadenetlife。

<!– jQuery –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script>
$(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();
$(".articleText").eq(i).append(‘<div class="readerLeadModOuter"><div class="readerLeadMod"><div class="readerLeadModInner"><div id="readerLeadModImg"><img width="60" height="60" alt="" src="コピーした画像URL"></div><div class="readerLeadModCnt"><dl><dt>読者になろう</dt><dd><p>ブログの更新情報が受け取れて、アクセスが簡単になります</p></dd><dd class="readerLeadModRegistBtn"><a href="http://blog.ameba.jp/reader.do?bnm=アメブロID" rel="nofollow">読者になる<i></i></a></dd></dl></div></div></div></div>’);
}});
</script >

コピーした時に ‘ や ” が全角になっている場合は半角に直してください

※JQueryに関する記述がある場合は、こちらは不要

<!– jQuery –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

コード全体をコピーし、フリープラグインに貼り付けます。

3.フリープラグインを使用する機能に移動

フリープラグインを既に使用している場合は、この作業は不要になります。

サイドバーの配置設定から、フリープラグインを使用しない機能から、使用する機能へ移動させます。

CSSで表示設定

これだけだと表示はされるものの、体裁ががたがたですので、CSSで表示を調整します。

以下をコピーし、「CSSの編集」でCSSの一番最後に追加します。
※「CSS編集用デザイン」を利用している必要があります

/*記事下読者*/
.readerLeadModOuter {
text-align: center;
}

.readerLeadMod {
margin: 20px auto;
width: 380px;
border: 1px solid #f0f0f0;
text-align: left;
overflow: hidden;
background-color: #fff;
}

.readerLeadMod .readerLeadModInner {
padding: 10px;
}

.readerLeadMod #readerLeadModImg {
float: left;
width: 60px;
height: 60px;
}

.readerLeadMod #readerLeadModImg img {
margin: 0;
padding: 0;
}

.readerLeadMod .readerLeadModCnt {
margin: 0;
padding: 0;
margin-left: 68px;
position: relative;
min-height: 60px;
height: auto !important;
height: 60px;
}

.readerLeadMod .readerLeadModCnt dl {
margin: 0;
padding: 0;
padding-bottom: 27px;
}

.readerLeadMod .readerLeadModCnt dl dt {
margin: 0;
padding: 0;
margin-bottom: 5px;
line-height: 1.2;
}

.readerLeadMod .readerLeadModCnt dl dd {
margin: 0;
padding: 0;
color: #999;
font-size: 10px !important;
font-family: “hiragino kaku gothic pro”,meiryo,”ms pgothic”,”arial”,sans-serif;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn {
height: 24px;
margin: 0;
position: absolute;
bottom: 0;
left: 0;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn a {
font-size: 11px !important;
padding: 0 12px 0 31px;
display: inline-block;
border-radius: 2px;
color: #666;
text-align: center;
text-decoration: none;
line-height: 22px;
height: 22px;
overflow: hidden;
border: 1px solid #ccc;
background-color: #fbfbfb;
border-radius: 2px;
background-position: 0 0;
cursor: pointer;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn a:hover {
background-color: #f0f0f0;
}

.readerLeadMod .readerLeadModCnt dl .readerLeadModRegistBtn a i {
position: absolute;
top: 6px;
left: 12px;
display: block;
width: 14px;
height: 11px;
background-image: url(“http://stat100.ameba.jp/blog/img/user/ico_readerLead.1.000.png”);
background-repeat: no-repeat;
}



7

確認

これで記事の下に挿入されるようになります。
※ただし、パソコンで見たときのみになります。



試してみてくださいね

アメブロの字を濃くしたい

内藤です

文字の色を濃くする(黒)にするだけでも読みやすさ、読まれやすさは違ってきます。

アメブロでは、最初濃いグレー(#333333)が設定されています。特に記事とメッセージボード(トップページの記事の上)は、黒にすると反応も変わります

「CSS編集用デザイン」を選択している場合、CSSに

.articleText,.skinMessageBoard{
color:#000000;
}

を入れると記事内とメッセージボード内の文字が黒(#000000)になります。

アメブロに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にして、フリープラグインに追加します。

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

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

「記事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>


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


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

最新予約状況を記事で出す意味は?

内藤です。

サロンやお店をされているブログを見ると「最新の予約状況」という記事を見ませんか?

よく見るとサイドバーにも予約状況を出していたりもします。


なぜ、わざわざ記事で書くのでしょう?


理由は

・携帯電話対策
携帯から見る方はサイドバーが表示されていません。記事にすることにより、携帯の方でも予約状況が分かります。

・定期的に記事にすることで、ちゃんと確認してもらえる。
古い記事のままだと見つけてもらえません。



予約状況を出すことで、お客様も日程を決めやすくなります。
サロン等予約をもらう必要のある方は取り入れてみてくださいね

記事タイトル下のテーマを右寄せにする



記事タイトルの下にあるテーマを、右寄せにしたい場合のカスタマイズです

CSSの編集でCSSに

/*記事タイトル下テーマ*/
.entry .theme{
text-align:right; /*テキスト寄せ*/
display:block; /*表示設定*/
}

を追加します。 *デザインが『ベーシック』の場合になります

また、テーマの下にある点線を無くしたい場合は

} の前に border-bottom: none; を追加します。

記事内のリンクを目立たせる


内藤です。
僕のアメブロは、記事中のリンク文字を目立つように工夫をしています。
リンクを青文字の太字にしている以外にです。

何かわかりますでしょうか。

それは、記事以外のリンクを青にしていないという事です。
通常サイドバーにあるリストもリンクです。

そこを目立たない色にする事で、記事内のリンクが余計に目立ちます。

そんな工夫もしています^^

やり方は、『CSS編集用デザイン』では、CSSの編集で

/*-- リンク --*/
a{
text-decoration:none;
color:#777777;
}

/*リンク:訪問済み*/
a:visited{
text-decoration:none;
color:#777777;
}

/*リンク:マウスオーバー時*/
a:hover{
text-decoration:none;
color:#777777;
}

を最後に追加し、全体的なリンクを目立たない色に変えます。

その上で、記事内のリンクのCSSを追加します

/*  記事、メッセージボードのリンク文字  */
.articleText a,.skinMessageBoard a{
font-size:14px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000FF; /*文字色*/
text-decoration:none; /*文字装飾*/
}

旧デザインの『ベーシック』では

/*-- リンク --*/
a{
text-decoration:none;
color:#777777;
}

/*リンク:訪問済み*/
a:visited{
text-decoration:none;
color:#777777;
}

/*リンク:マウスオーバー時*/
a:hover{
text-decoration:none;
color:#777777;
}

/*  記事、メッセージボードのリンク文字  */
div.subContents a{
font-size:15px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000ff; /*文字色*/
text-decoration:underline; /*文字装飾*/
}

で可能です。

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

記事幅いっぱいに画像を挿入

内藤です。

記事を書いていて、画像を挿入する場合

「縮小して表示」 と 「オリジナルで表示」 を選択して挿入することができます


縮小して表示の場合、横幅220px程度になります。

オリジナルで表示は、記事幅が410pxほどですので、それよりも大きい場合は切れてしまいます。

通常画像を挿入した場合、画像はクリックできて画像の個別ページに移動するようになっています。
※僕は通常クリックできないように編集しています。

例えばこちらは、「縮小して表示」を選択して挿入したものです。

$自分でできるアメブロカスタマイズ
画像はクリックできて、大き目の個別ページになります。

これをこんな風に、記事幅いっぱいに広げた状態で挿入し、なおかつクリックしたらさらに大きいサイズで見られるようにしたい時はありませんか

$自分でできるアメブロカスタマイズ
先ほどと同様に、クリックできて大き目の個別ページになります。

個別ページに移ってしまうと、そのまま閉じられる可能性も出てきますので、基本はクリックできない方が良いですが、どうしても大きい画像を見せたい場合などは良いですね。

やり方ですが、画像を「オリジナルで表示」で挿入します

するとこんな感じのタグが挿入されることになります

<a href="http://simpleworks.jp/wp-content/uploads/o0800060012033595117.jpg"><img src="http://simpleworks.jp/wp-content/uploads/o0800060012033595117.jpg" /></a>

ちょっと難しそうですが、こんな作りになっています

<a href="クリックした時に表示される画像URL"><img src="表示されている画像URL"></a>

画像のタグリンクタグで挟んでいる状態です

<a … > と </a> はリンクの開始と終了を表すタグです。
(これを削除すればクリックできないようになります。)

間に挟まれている imgタグに  width=”410″ を付け加えます

<a href="http://simpleworks.jp/wp-content/uploads/o0800060012033595117.jpg" img src="http://simpleworks.jp/wp-content/uploads/o0800060012033595117.jpg"  width="410" /></a>

こんな感じです。

これで大き目の画像を貼り付けられます。

ちなみに写真はいつも散歩する近くの公園です^^

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

内藤です。

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

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

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

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

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

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

(新エディタの場合)

2.記事URLの取得

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

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

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



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

3.文字にリンクをはる

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



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


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

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

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

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

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

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


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


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

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

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

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