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

内藤です。

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

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


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

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

カラーコードはこちら
 


 

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

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

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

こちらに詳細があります

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

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

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

を入れます。

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

アメブロ(旧デザイン) フリースペースの文字を目立たせる

旧デザインのアメブロのサイドバーにもあるフリースペース

フリースペースの文字も大きく、リンクが目立つようにしておきましょう。

新しいカスタム可能デザイン【ベーシック】のCSSに

#freespace{
font-size:15px;
line-height:1.5;
}
#freespace{
font-weight:bold;
color:#0000FF;
}

を入れると見やすく、よりクリックされやすくなります。

サイドバーのリストに下線を入れて見やすくする



内藤です

旧デザインの『ベーシック』では、サイドバーの各リストが詰まっていて見にくいです


これを各リスト下に点線を入れ、見やすくしてみます。


【デザインの変更】 ⇒ 【CSSの編集】で

/*サイドバー各項目リスト下線*/
#recent_entries .menu_frame ul li,
#theme_list .menu_frame ul li,
#archives .menu_frame ul li,
#reader .menu_frame ul li,
#favorite .menu_frame ul li,
#bookmark .menu_frame ul li{
border-bottom:1px dashed #CCCCCC;/*下線*/
margin-bottom:5px; /*下マージン*/
}

を最後に追加します。 *ベーシックの場合です

これで見やすくなりますね

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



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

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; /*文字装飾*/
}

で可能です。

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

「カスタマイズしたのに反映されない!」と思ったら確認しておきたい3つのポイント

内藤です。

「カスタマイズしたのに反映されない!」

よくいただく質問です。

カスタマイズしたのに反映されていない場合には、考えられる原因がいくつかありますのでチェックしてみましょう。

1.キャッシュ(古いデータ)を読み込んでいる

ブラウザ(インターネット閲覧ソフト)が、古いデータを表示している可能性があります。
その為本来は反映されているのに、古いデータをみて、反映されていないと勘違いしてしまいます。
最も多いパターンです。

編集後は、必ず画面上にあるアドレスバーの横にある更新ボタンを押しましょう。

IE


GoogleChrome


FireFox


もしくは、キーボードのF5ボタンでも更新されます。

2.CSSが保存されていない

アメブロでは、CSSの編集をして保存しようとしたときにエラーがよくでます


こんな赤い注意書きがでたら焦らずに、もう一度保存ボタンを押しましょう。

3.CSSの書き間違い

CSSの書き間違いでよく見られるのが

・ } ← 閉じかっこ忘れ

例えば

/*リンク*/
a{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/
}
/*リンク:訪問済み*/
a:visited{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/
}

が正しいのですが、間の }が抜けてしまっているパターン

/*リンク*/
a{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/

/*リンク:訪問済み*/
a:visited{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/
}

2つめの リンク:訪問済み のCSSが読み込まれなくなります

・コメントアウトミス

/* リンク:訪問済み */

 のようなCSSの補足をするようなコメントアウト(説明書き)は

/* と */ で囲む必要があります.

これが

 リンク:訪問済み */

のように不完全だったりすると、CSSが正しく読み込まれません。

・classの . (ドット)抜け

などのように、class名がある場合CSSでは先頭に .(ドット)を付けます

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

これがドット抜けすると正しく反映されません。

articleText{
font-size: 14px; /*文字サイズ*/
line-height:1.6; /*行間*/
}

反映されないと思ったら、1つ1つ確認してみましょう。

『ブログ画像一覧を見る』 を非表示にする

内藤です。

先日からアメブロの記事エリアの上下にあるページ送りのところに

『ブログ画像一覧を見る』 

が追加されました。



これは僕的には不要なので表示させないようにしました。

やり方ですが、 旧デザインの『ベーシック』、新デザインの『CSS編集用デザイン』ともに

p.imagelistLink{
display:none;
}

をCSSに追加してみてください

これで、『ブログ画像一覧を見る』が表示されなくなります。

また、旧デザイン(ベーシック)で、『このブログの読者になる』を画像化していた場合
こんな状態になっているかも知れません。



おそらくこのようなCSSを追加されていると思います。

.readerMainLink p a{
display:block;
margin:auto;
padding:0;
text-indent:-9999px;
width:350px;/*ボタン幅*/
height:60px;/*ボタン高さ*/
background-image:url(画像URL);
background-repeat:no-repeat;
background-position:center top;
background-color:transparent;
}

これの  .readerMainLink p a  を  .readerMainLink .readerLink a に変えてみてください

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

サイドバーの読者数を目立たせてみる

内藤です。

サイドバーにある 「このブログの読者」 に表示される読者数を目立たせるカスタマイズです。

読者さんが少ないうちは逆にやらない方が良いかもしれませんが^^;
ある程度増えてきたら目立たせると、さらに増えやすくなります。

通常 ↓ このように文字は小さ目です

これを、↓ このように大きく目立つようにします。

管理画面で [クイックリンク] ⇒ [ブログデザイン] デザインの変更 から 『CSSの編集』で次のコードを最後に追加します (【CSS編集用デザイン】を選択している必要があります)


/* 読者数を目立たせる */
.readerHeader em{
font-size:24px;
color:#000000;
}

※旧デザインの【ベーシック】の場合は

通常 ↓ このような状態が



↓ このようにできます



【ベーシック】の場合は『CSSの編集』 で最後に次を追加します


/* 読者数を目立たせる(旧デザイン) */
#readerList p.contents{
font-size:24px;
}

#readerList p.list{
display:block;
}

良かったら、やってみてくださいね

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


コピー貼り付けで簡単カスタマイズ
無料のヘッダーオプションサービスも追加しました^^

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

内藤です。

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

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


縮小して表示の場合、横幅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>

こんな感じです。

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

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