こんにちは、パソコンワンポイントレッスン!PCインストラクターの川上です。
ブログを色々と拝見していますと、
よく、1記事は1テーマにすべきだ、とか、 文章は短かければ短かいほうがよい、1記事には1リンクしかダメ、などと書かれていたりします。
でも、あなたは物書きのプロじゃないですよね。
確かに、どうせ書くのであれば、しっかりとした文章を書いたほうがいいでしょう。
しかし、ブログを書き始めの頃は、まだ文章を書いたりまとめたりするのに慣れていません。
ですので、別に形式やこうでなければならない、なんていう縛りに気にする必要なんてありません。
どんどん書いていくことの方が大切です。
まず、気にしないで書いていくべきです。
すると、次なる課題が見えてくると思います。
(書いているのにアクセスが上がらない、読者が増えないetc・・・)
それから訂正していっても遅くはありません。
ブログは上書きです。
修正していけば過去のがどうだったのかなんてわからないのです。
今のブログが現在のあなたのブログなんですから。
ぜひ、雑音にとらわれずに、あなたはあなたの言葉で、あなたの心で、 自分しか書けないブログを書いていってください!
ちなみに、自分らしさを出したいのであれば、自分の実際に話している言葉で書かれるといいですね。
すると、文章は下手かもしれないですが、人柄を伝えることができますので^^
私はそんなあなたを応援していますからね、北海道から^_^
おっと~^^前置きがずいぶんと長くなってしまいました・・・
まぁ、ベテランブロガーの方々から、こういった余計なことを書くのがダメだ、とお叱りを受けそうですが(笑)
さて、本題に入りましょうか^^
・今日の本題は「見出し」です。
記事を書いている最中、気合いが入ってしまい、どうしてもいくつもテーマが出てきてしまったら、
ぜひ、「見出し」を記事中につけるといいでしょう^^
例えば、びゅーんびゅーん飛び回っているパワーブロガーの方のこの記事のように・・・
クリックされた方はご覧になっていただいたと思いますが、このような↓↓↓見出しを使ってましたね。

これは見出しです
この見出しは、[HTML表示]に次のタグ↓↓↓をコピペするとできちゃいますので。
<div style="border-left:rgb(255,51,153) 10px solid; border-bottom:rgb(255,51,153) 2px solid; padding-left:10px; font-size:1.2em; font-weight:bold">これは見出しです</div>
ちなみに、このピンク色は、ここではrgb(255,51,153) と指定されていますが、
#ff3399のカラーコードでも同じですので。
また、他の色の見出しはこちらです↓
これは見出しです
この見出しは、[HTML表示]に次のタグ↓↓↓をコピペするとできちゃいます。
<div style="border-left:darkorange 8px solid; border-bottom:darkorange 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>
ちなみに、このオレンジ色はここでは、darkorangeで指定されていますが、
#ff8c00 でも rgb(255,140,0) でも同じです。
もうひとつ、おまけに私が使っている見出しはこちら↓↓↓になります(笑)
これは見出しです
<div style="border-left:#000066 8px solid; border-bottom:#000066 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>
もし、お使いであれば、どうぞお持ち帰ってください!
(色はご自分でお好きなのにしてください。「色見本」でググるとわかりますよ~^^)
<色の追記(2014.8.19)>
ググるのめんどう~~、って方は、下からコードをコピペしてくださいね^^!
紺色(カラーコード:#000066)↓
これは見出しです
<div style="border-left:#000066 8px solid; border-bottom:#000066 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>
青色(カラーコード #0000ff)↓
これは見出しです
<div style="border-left:#0000ff 8px solid; border-bottom:#0000ff 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>
水色(カラーコード:#00ffff)↓
これは見出しです
<div style="border-left:#00ffff 8px solid; border-bottom:#00ffff 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>
赤(カラーコード #ff0000)↓
これは見出しです
<div style="border-left:#ff0000 8px solid; border-bottom:#ff0000 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>
別の赤(カラーコード #e5004f)↓
これは見出しです
<div style="border-left:#e5004f 8px solid; border-bottom:#e5004f 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>
ピンク(カラーコード #ff1493)↓
これは見出しです
<div style="border-left:#ff1493 8px solid; border-bottom:#ff1493 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>
緑(カラーコード #008000)↓
これは見出しです
<div style="border-left:#008000 8px solid; border-bottom:#008000 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>
アメーバの緑色(カラーコード:#4dac26)↓
これは見出しです
<div style="border-left:#4dac26 8px solid; border-bottom:#4dac26 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>
オレンジ(カラーコード #ff9933)↓
これは見出しです
<div style="border-left:#ff9933 8px solid; border-bottom:#ff9933 2px solid; padding:0px 0px 1px 5px;font-size:1.2em;font-weight:bold;">これは見出しです</div>
<参考記事>
『記事内の「見出し」の色バージョンを追加しました!』
『記事内の見出しの色を変える場合、どこの数字を変えたらいいのでしょうか』
『記事内の見出しにかわいいイラストをいれたいな~』
『アメブロ「いいね!」の見出しをカスタマイズ』
<注意>
Androidスマホご使用の方で、見出しを作っても作っても、枠が消えてしまう、という方。
どうやら、<div>がうまく読み込めないようです。
ですので、うまく表示されない方は、こちらのタグでどうぞ↓
<table style="width:100%; border:0;"><tr><td style="border-left:10px solid #ff1493; border-bottom:2px solid #ff1493; padding-left:10px; font-size:1.2em; font-weight:bold">ここに見出し</td></tr></table><br><br>
こんな感じになります↓
このタグでよければ、
<table style="width:100%; border:0;"><tr><td style="border-left:10px solid #ff1493; border-bottom:2px solid #ff1493; padding-left:10px; font-size:1.2em; font-weight:bold">ここに見出し</td></tr></table><br><br>
このタグ↑の「#ff1493」の部分を好きなカラーコードに置き換えて使ってくださいませ。
以上、アメブロ運営テクニックでした。
LIDS札幌・ライフデザインスクール
川上 雄大
