CHUSUKE.COM

昨日、今日とブログのちょっとしたところを、変更してみました。

変更したのは、以下の3つです。

  1. 見出しに背景をつけた
  2. 引用を分かりやすくした
  3. 追記も引用と区別できるようになった
  4. 文字を大きく、濃くして見やすくした

1、2については、前々からやりたかったことです。

3は昨日のkeiキャットさんからのコメントからやってみたものです。

実際に、使ってみましたので、よかったら、「Continue Reading this Entry(続きを読む)」から見てくださいね!

まずは、見出し。

見出しのテストです。h2タグを利用しています。

見出しのテストです。h3タグを利用しています

昔は、どちらも、装飾のないただのフォントを大きくしただけのものだったので、大きな進歩です。
このアイデアは、CSS3を利用しており、WEBクリエイターボックスさんでご紹介されていたものです。
参考:http://www.webcreatorbox.com/tech/css-heading-list-blockquote/


次は、引用です。

WordPress(ワードプレス)はデータベース管理システムにMySQLを利用し、PHPで書かれたオープンソースのブログソフトウェアである。b2/cafelogというソフトウェアの後継として開発された。GNU General Public License(GPL)の下で配布されている。
via: Wikipedia

こんな感じで、引用文を囲うように表示するようになりました。
しかも、引用元サイトを表示する機能もつけました!とても便利です(^^ )
この方法にもCSS3を利用しており、WEBデザイン BLOGさんのアイデアをもとにAll aboutで紹介されていたCSSだけで角丸を実現する方法を利用して、ソフトな感じを出しました。

参考1:http://weblibrary.s224.xrea.com/weblog/css/cat15/blockquotecss.html
参考2:http://allabout.co.jp/gm/gc/24004/


そして、今までは引用と区別のつかなかった追記です。
ホントは、引用を変えたのでそのままでもいいかなと思っていたのですが、上のやり方を参考にして、ついでに追加しました!

(テスト)9/4追記:これは追記です。新たな情報が追加されたのでご紹介します!!!
チュー介のtech techブログは高校生が執筆、運営しています。お気軽にFacebookいいね!RSS購読をしてくださいね!

こんな感じです。似てますが、色や、角の丸さ背景色が違います。
あとは、引用マーク(””)がプラス(+)になって、より追記感をだしています。


最後の文字サイズ、濃さは見てのとおりです。一応比較画像?を用意しました。

今まで

こんな感じです。見やすくなってると思います。
サイドバーは今までのままです。ここも、もっと大きくしてほしい。見にくいなどありましたら、またコメントにお願いします。

それでは、今日はこのへんで!

1件のコメント

  • Annalisaさん

    Keep these arclties coming as they’ve opened many new doors for me.

コメントがほしいっ

About CHUSUKE

名前: チュー介

名古屋在住・大学1年生(文系)

1996年3月11日生まれ。

食べることが好き。とりあえずよく食べる。

りんごが身の回りに増殖中。

Popular Posts

まだデータがありません。

Search