2012-01-25

このエントリーをはてなブックマークに追加


ブログを続けていると、気分転換したいという思いからブログデザインをカスタマイズしたくなってくる時ってありますよね?
Bloggerにはもともと豊富なテンプレートが用意されていますが、それだけでは物足りない、自分のブログなんだからもっと自分色をだしたい!!そんなことを考える方も、多いのではないでしょうか?

かくいう私も、いろんな方のブログを拝見していくうちに、そのような思いを抱くようになりました。しかしそこで壁となるのがHTMLとCSS。この言語に関する知識がないと、ブログのデザインをカスタマイズすることはできません。私もまったくHTMLやCSSの知識がなく、最初は困りました。

わからないことは、ゼロから勉強するしかない。そこで私は1冊の本を手に取ったのでした。


ゼロからわかる HTML&CSS超入門
太木 裕子 山本 和泉
技術評論社
売り上げランキング: 9500
その名の通りゼロからHTMLとCSSについて勉強できる本です。HTMLの基本的な知識、その使い方、初歩の初歩がわかります。実際にHPを作っていき、その過程の中でHTMLとCSSの使い方を学ぶことができます。

読破するのに1日か2日ですむので、三日坊主にもならずにすむと思います。この本から得た知識を活かして、私はさっそくこのブログにも適用し始めました。
まだ初心者なので、目に見えるほどの大きな変化は出せていませんが、少しづつ、自分のブログの味をだすデザインに近づけていきたいと思います


さらにブログのデザインだけでなく、個別の記事の中でもちょっとした技を身につけることができます。
▽bloggerで記事を書くときには、以下のような標準のエディタが用意されていると思います。
HTMLの知識を深めると、「HTMLの編集」タブにコードを書くことで、標準のエディタだけではできないことが、できるようになります。

例えば・・・

▽こんなふうに長さの違う色つきの横線、下線や



 




 



▽点線


▽表を作成したり
 

こちらのエントリスマートフォンからWebクリップできる!!EverWebClipper for Evernoteを試してみた で示したように
▽画像を2つ横に並べてみたり



少し勉強するだけで、ブログにおける表現の幅がぐんと上がります。
画像の位置とか細かに調整したいのに、標準のエディタではできない。そんなもどかしい思いをする必要もなくなります。ある程度学んだら、あとは習うより慣れろ!!実践あるのみです。使いまくりましょう。
ブログを書くことがもっと楽しくなるとも思うので、ぜひHTMLとCSSの技術をこの本から学んでみてください。
以上、本の紹介でした。

3 コメント :

  1. 関係ない質問で、すいません。
    このブログのように、モバイルサイト上でSNSボタンを表示させたいのですか、どのようにされましたでしょうか?
    どうぞ、よろしくお願いします。
    ブロガー歴8ヶ月 タカノリ

    返信削除
    返信
    1. 返信が遅れ申し訳ありません。
      私がしているのはbloggerのダッシュボードの 

      設定→投稿とコメント→投稿テンプレート

      のところに各SNSボタンのHTMLを貼り付けています。ただこの方法が完璧な正解というわけではないと思うので、既にご存知かもしれませんが、参考になりそうな方法を紹介しているページのURLを紹介しておきます↓

      http://www.plus1world.com/2012/01/blogger.html
      http://www.jkun-blog.com/2011/07/blogger-twitter-hatena-google1-facebook.html

      削除
  2. ありがとうございます。
    早速入力させていただきましたm(_ _)m
    ですが…バラバラで。
    横ラインを合わせて左寄せなどのHTMLはどのようにすればよいのでしょうか。
    どうぞよろしくお願いいたしますm(_ _)m
    タカノリ

    返信削除