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

内藤です。

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

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


 
■例)枠の線が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>

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

カラーコードはこちら
 


 

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

なるべく簡単にヘッダーを作る動画解説

なるべく簡単にできるヘッダーの作り方の動画解説です

windowsもMacも使えて、インストール不要のソフトを使っています。

pixlr(ピクセラー)
Photo editor online

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

初心者にもできるアメブロカスタマイズ」では、

● ヘッダーの簡単な作り方
● 文字に縁をつける
● 画像の縁をぼかす
● 人物を切り抜く
● 画像に効果をつける

なども動画解説しています。

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

内藤です

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



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

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

確認

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



試してみてくださいね

アメブロのサイドバーを左右同じ幅にするカスタマイズ

アメブロのサイドバーを左右同じ幅にするやり方です。

アメブロは、3カラムの場合、サイドバー2つある内、1つがワイド、1つが狭い幅と異なるものでした。
今回の方法は、ブログ幅を元々の980pxのまま、記事エリアも元のままで、左右のサイドバー幅を統一するやり方です。

ブログ幅980pxで記事幅を広げ、サイドバーを狭い幅で統一する方法はこちら
ブログ幅を860pxにして、サイドバーを狭い幅で統一する方法はこちら

アメブロの元々の幅  一方がワイドで、一方が狭いサイドバー


これを、記事エリア、ブログ幅をそのままで、サイドバー幅を統一します
↓↓

CSSに以下を追加します。

/*------- 3 カラム・右ワイドメニュー --------*/

.columnC .layoutContentsA{
float:right;
width:725px;
}

.columnC .skinMainArea{
float:left;
width:470px;
}
.columnC .skinSubA{
float:right;
width:240px;
}

.columnC .layoutContentsB{
float:left;
width:240px;
}

/*------- 3 カラム・左ワイドメニュー --------*/

.columnD .layoutContentsA{
float:left;
width:725px;
}
.columnD .skinMainArea{
float:right;
width:470px;
}
.columnD .skinSubA{
float:left;
width:240px;
}

.columnD .layoutContentsB{
float:right;
}
.columnD .skinSubB{
width:240px;
}
/*------- 3 カラム・右メニュー --------*/

.columnE .layoutContentsA{
overflow:visible;
}
.columnE .skinMainArea{
float:left;
width:470px;
}
.columnE .skinSubA{
float:right;
width:240px;
}

.columnE .skinSubB{
float:left;
margin-left:15px;
width:240px;
}


3カラムの全パターンに対応しています

アメブロの字体を以前のものにする

先日から、アメブロのフォント(字体)が変わりました。

こちらに詳細があります

それが『嫌』という声も多いようです。

以前のフォントに戻したいという場合はCSSに

body, input, button, select, textarea {
font-family: "MS Pゴシック","ヒラギノ角ゴ Pro W3",Arial,Helvetica;
}

を入れます。

これで、以前の字体になります。

「ブログトップ」「記事一覧」「画像一覧」ボタンを非表示にする

内藤です

少し前から、記事エリアの上下にこのようなボタンがつくようになりました



これが「いらない!」という方も多いようなので(笑)
外し方です。

「ブログトップ」がいらない場合

CSSに以下を追加します

.blogTopBtn{
    display:none!important;
}

「記事一覧」がいらない場合

CSSに以下を追加します

.articleListBtn{
    display:none!important;
}

「画像一覧」がいらない場合

CSSに以下を追加します

.imageListBtn{
display:none!important;
}

(追記)3つのCSSで !importantを追加しています

これで3つのボタンを消すことが出来ます。
また、3つ全て非表示にした場合、スペースが空いてしまいますので、

.globalLinkArea {
padding: 0px 0;
}

も追加しておいてください

facebookのフォローボタンを付ける


内藤です

アメブロにfacebookのフォローボタンを付けてから、フォローしてくれる方が増えています^^

facebookって「友達」「フォロー」があります。
両方ともニュースフィードに流れるようになりますが、フォローは友達じゃない人でも流れるようにできます。

友達申請しまくって、、、というやり方もありますが、会った事もない人がどんどん増えます^^;
また5000人という上限もあります。

フォローは、会ったことあるなしにかかわらず、本当の友達かどうか関係なくフォローできます。
ですから、フォローしてくれる人数を増やしていけるのが良いですよね。

で、アメブロ上でもフォローできるようにしてみようという事です。

1.まずは、facebookでアプリIDを作っておきます

アプリIDの作り方はこちら ⇒ facebookのアプリIDを作る

2.フォローボタンを作る

こちらのページから


・Profile URLに、個人ページのURLを入力
・Layout Styleで、フォローボタンの種類を選択
・最後に「Get Code」ボタンで、埋め込みコードを取得します

3.埋め込みコード

「Get Code」ボタンで、埋め込み用コードが表示されます

・アメブロの場合「IFRAME」じゃないと、うまく表示されないので、「IFRAME」を選択
・作ったアプリIDを選択
・表示されるコードをコピー

4.アメブロのフリープラグインに貼り付け

あとは、アメブロのフリープラグインに貼り付ければ、アメブロでもフォローボタンが表示されます。

※サイドバーの配置で、フリープラグインを『使用する機能』への配置を忘れずにしてください

Facebookにログインしていれば、アメブロ上でフォローしてもらえるのがいいですね^^

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

内藤です

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

アメブロでは、最初濃いグレー(#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にして、フリープラグインに追加します。

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

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