■美しいブログ記事を目指して■
●１．見出しを飾る
●２．文章を枠で囲って強調する
●３．タイトルと目次を書く
●２．文章を枠で囲って強調する
●３．タイトルと目次を書く
1.見出しを飾る
pythonの勉強記録をブログにアップしているのですが、だんだんと欲が出てきてもっと美しい記事にできないかと、つまり、読みやすい記事にするにはどうすればよいかということを考えはじめました。
すると、パソコン関連のエキスパートの方のブログが目にとまりました。PCインストラクターの川上さんのブログです。（こちらがリンクです）
いろいろ勉強して、まずは見出しをかっこよくしようと思いました。このページにもそのコードを適用しています。下記のように書けばOKです。
【コード】
<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>
このテクニックはこちらのリンクに詳細が記載されています。
2.文章を枠で囲って強調する
文章を書いていると、ここがポイントで強調したいと思うことがあります。短い文章の場合は、太字にしたり、色を変えたりで良いのですが、ある程度まとまった文章の場合は囲いを使うと印象が強くなると思います。
枠の中に文章を入れるのもタグをコピペするだけで、こんな感じで簡単にできてしまいます。
【コード】
<div style="background:#ffeeee; padding:10px;
border:2px dotted #ff0000;">枠内の記事本文</div>
このテクニックはこちらのリンクに詳細が記載されています。
3.タイトルと目次を書く
このページにも最初に適用した「タイトルと目次」の部分ですが、これも美しく表現できていると思います。まずブログページを見るときに最初に目にとまるところです。目次を書いておくと自分が知りたい情報なのかどうかある程度判断がつく重要な目印となります。。
■タイトル■
●１．ここに本文
●２．ここに本文
●３．ここに本文
●２．ここに本文
●３．ここに本文
【コード】
<div style="background-image:linear-gradient(#ccd2f2,#8070ef,#2f17d0,
#20108f);background-color:#20108f; border:1px solid #20108f; padding-
left:10px; font-size:1.16em;border-top-left-radius:6px;border-top-right-radius:
6px;width: auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">
<font style="color:#ffffff; font-weight:bold;text-shadow: 1px 1px 3px #000;">■タイトル■
</font></div><div style="background:#ffffff;border:1px solid #20108f; padding:10px;
font-size:1em;border-bottom-left-radius:6px;border-bottom-right-radius:6px;width:
auto; margin-right: 8px; box-shadow: 6px 6px 6px #AAA;">●１．ここに本文
●２．ここに本文
●３．ここに本文
</div>
このテクニックはこちらのリンクに詳細が記載されています。
以上が本日、勉強した「ページを美しくする」テクニックです。
勉強したあとにこれまでのページを見るとちがいを実感してしまいます。（＾＾;）
下記はpythonのページ集ですが、これからのページには装飾を適用していきたいと思います。
Python ブログランキングへ
クリックしてね