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

内藤です

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

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

設置の仕方を紹介しますね。
(【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;
}

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

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

記事タイトルの線や背景


内藤です。

新カスタム可能デザイン(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>

囲みの中の文章

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


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

アメブロの記事幅を広げ、記事の枠を消す


内藤です。

2011年8月以降新しくなったカスタム可能デザイン【CSS編集用デザイン】では、記事エリアが470pxになりましたが、枠や余白を除いた記事本文の幅は410pxとなっています。

広くなったように見えて、狭くなっています



カスタム可能デザインってなに? 【CSS編集用デザイン】ってなに? という方はこちら

記事エリアについている各記事の枠と、文との余白を狭くして記事幅を広げるやり方は以前ご紹介しました。

【CSS編集用デザイン】で  [CSSの編集]で

/* skinArticleBody 記事本文エリア */
.skinArticleBody{}
.skinArticleBody2{
margin:0 29px;
}

という個所のmargin:0 29px;の数値が左右の余白になりますので、数値を小さくすると記事自体の幅は広がります。

記事本文に合わせて、記事タイトルの幅も変更するならば

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

のmargin:0 29px;の数値を変更します。

また、記事幅が広がったことで、枠との余白が狭くなり圧迫感を感じるならば

/* skinArticle 記事エリア */
.skinArticle{
/* 注 ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #dddddd;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}

のborder:1px solid #dddddd; を border:0px solid #dddddd; にすると枠がなくなります。

やってみてくださいね

その他の自分でできるカスタマイズはこちら

メッセージボードを枠に変えてみる

【CSS編集用デザイン】では、メッセージボードが最初はこのように、上下に波線が引かれています。



これを四角の枠に変える場合のやり方です。

【クイックリンク】 ⇒ 【CSSの編集】 で

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

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

という個所を見つけます。

border-top:1px dotted #979797;
border-bottom:1px dotted #979797;

が上下の点線を表しています。

枠にする場合は、この2行を削除し、次のようにします

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

枠になりました。


border:1px dotted #979797; の 1pxは線の太さ、 dottedは線の種類、#979797は線の色を意味します。

【線の種類】
dotted 破線 ・ solid 実線 ・ dashed 点線 ・ double 二重線

background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */ 

のカラーコードを変更すると、内部に色を付けることもできます。

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

記事幅を広くする

旧カスタム可能デザインから、2011年8月以降の新カスタム可能デザイン【CSS編集用デザイン】の大きな変化の1つに、『幅』があげられます。

ブログ全体の幅、サイドバーの幅、記事エリアの幅 が広くなりました。

旧カスタムデザイン(ベーシック)では、記事の幅が420pxありました。


新しい【CSS編集用デザイン】では、記事エリアの幅は470pxあります。

ところが、実際に記事の表示される部分の幅は410pxになっています。
つまり旧カスタムデザインよりも狭くなっています。


見やすいように枠と、余白が設けられた分、記事の幅が狭くなっています

枠と、記事本文の余白を狭くすると、記事本文の幅は少し広がります。

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

/* skinArticleBody 記事本文エリア */
.skinArticleBody{}
.skinArticleBody2{
margin:0 29px;
}

という個所で

margin:0 29px; の29pxを小さくすると余白分が狭くなり、記事本文の幅が広がります。

29pxは左右それぞれを表しています。
もともと記事本文幅 410px + 余白 29px×2(左右分) + 2px(左右の枠線) で470pxになっていました。

29pxの部分を変えてみてくださいね。

アメブロの文字の大きさとリンクを読みやすく、わかりやすくする

内藤です。

文字が読みやすく、リンクがわかりやすい

これって読者目線ではとても大事です。

マニュアルでも最初に書いていることです。

文字は大き目
リンクは目立つように青

新しいカスタム可能デザインの「CSS編集用デザイン」では CSSに

.articleText,.skinMessageBoard{
font-size: 15px; /*文字サイズ*/
line-height:1.5; /*行間*/
}
.articleText a,.skinMessageBoard a{
font-size:15px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000ff; /*文字色*/
text-decoration:underline; /*文字装飾*/
}

を追加してみてください

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

div.subContents{
font-size: 14px; /*文字サイズ*/
line-height:1.5; /*行間*/
}

div.subContents a{
font-size:15px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000ff; /*文字色*/
text-decoration:underline; /*文字装飾*/
}

を追加してみてください

これで、記事とメッセージボードの文字とリンクが変わります。

アメブロ (旧)文字の大きさとリンクを読みやすく、わかりやすくする

内藤です。

文字が読みやすく、リンクがわかりやすい
これって読者目線ではとても大事です。

文字は大き目
リンクは目立つように青

旧デザインのベーシックでは、CSSに

div.subContents{
font-size: 15px; /*文字サイズ*/
line-height:1.5; /*行間*/
}
 
div.subContents a{
font-size:15px; /*文字サイズ*/
font-weight:bold; /*文字の太さ*/
color:#0000ff; /*文字色*/
text-decoration:underline; /*文字装飾*/
}

を追加してみてください

これで、記事とメッセージボードの文字とリンクが変わります。