2012/06/30

[blogger]カスタマイズはここから!HTMLの知識ゼロで始めるブログ改造(主に見た目)


こんばんは、最近ツイッターがTL眺めてるだけでも面白い時があって、これが『非表示にすると捗るアプリ』と言われる所以かと感じてきました、すなふ(@sunafu35)です。

このブログ、デザインを変更したりしだしたのは、4月も末の話なので、2ヶ月ほどが経ったわけですが、私の知識は2ヶ月分という事にもなりますねw

そこで、というわけでもないんですが、全くHTMLやCSSの知識なくbloggerを初めて、デザインを変えたいなぁと思ったら、何から始めるのがいいんだろう?と思って、少し考えてみました。

私なりに、このブログで記事にしたカスタムをメインに、こんな順番だと分かりやすいんじゃないかなぁ?と思いましたので、少しお付き合い頂ければと思います。
あ、あくまでデザインを変えて楽しむであって、HTMLとCSSの勉強の順番というわけではないので、その辺はご容赦を(´~`)


まずは、テンプレートデザイナーで遊ぶ

知識なく、いきなりHTMLの編集をしだす人はいないと思いますが、まずは
『管理画面>テンプレート>カスタマイズ』
から入ることの出来るテンプレートデザイナー画面で色々と見た目を変更してみるのがいいと思います。ここで、まず変更したい部分は変更してしまいます。
例えば・・・

  • サイトの横幅はいくつにするか?・・・これは、Yahooを基準にする風潮があるので、950pxが基本になっているようです。もしくは、Amazonが980pxなので、そちらに合わせて大きめにとるか。このブログは、980pxです。
  • サイドバーの幅は?・・・好みもありますが、後々広告を貼ったりすることを考えるなら、初めから貼りたい広告の大きさに合わせておくほうが楽です。
  • 背景画像を変更する・・・自作も意外と簡単に出来るので、挑戦してみるのもいいと思います。
  • フォントの色を変更する・・・サイトに統一感を持たせるために、色はメインになる色を3色ほどに絞って設定するほうがいいようです。

日本の伝統色 和色大辞典 - Traditional Japanese Color Names
▲色に迷ったら、こういったサイトで気に入った色を探してみましょう。

また、標準ガジェットも設置したりして、どんなものがあるか見ておきましょう。
基本となるのは、

  • 『基本』から・・・「ラベル」「人気の投稿」
  • 『注目』から・・・「RecentPosts」

「HTML/Javascript」は、ブログを色々いじろうとすると、使用頻度がかなり高くなるので、どこにあるのかは見ておくといいと思います。ちなみに、ガジェットの追加の「基本」タブにあります。


カスタムCSS

テンプレートデザイナーを触って、もうそこでの変更出来るところは大体好みに合わせた!となったら、いよいよ細かく自分好みに育てて行きましょう!

迷ったのですが、まずは、私もここから調べたし、カスタムCSSを使っていくのがいいと思います。

[blogger]もっと詰めて!サイドバーのガジェット上下の余白を詰めて配置する方法。(04/28追記) - sunabox
この、サイドバーのガジェットとガジェットの隙間を調整したいっ! 画像では、もう調整して余白を詰めてあるんですが・・・。 この余白、サイドバーのガジェットで「JavaScript」などで、サードパー ...
▲まず、追加したガジェットの位置指定をカスタムCSSを使って設定していく方法です。
ここで、

  • カスタムCSSの使い方
  • ガジェットのクラス名の見方
  • CSS設定の「margin」

が分かると思うのです。

また、この時点で、

CSS初心者な私でもWordpressをカスタマイズできた!Chromeの「デベロッパーツール」が神すぎて感動した

標準機能がここまで便利!サイトデザインを変えたい初心者にこそオススメしたい、Chrome「デペロッパーツール」で驚いた! - sunabox
developer tools(デベロッパー ツール)は、簡単にいえば、サイトデザインの変化をプレビューしながら、直接HTMLやCSSの変更をテスト出来る機能です。 これが、本当に使いやすいし、HTM ...
▲Chrome標準などでありますが、デベロッパーツールについて使えるようにしておくと、後々のカスタマイズがすごく理解しやすくなると思います。


外部ツールをガジェットで追加してみる

次は、外部ツールをガジェット『HTML/Javascript』を使って追加してみるのがいいと思います。
追加するものは自由ですが、最近はソーシャルボタンを設置するのは必須になってきていますし、個人的に設置がすごく簡単な「忍者おまとめボタン」を推奨します。

[blogger]ひとつひとつ設置は面倒だ!ソーシャルボタンサービス「忍者おまとめボタン」を設置してみる。 - sunabox
忍者おまとめボタンという、怪しげな名前ながら、ソーシャルボタンをお手軽にブログに設置できるサービスを見つけたので、ご紹介します。 ...
▲設定してコピペするだけですが、『HTML/Javascript』ってこういう時に使うってことを試してみるのがいいかなと思いました。結構私の記事は横道にそれたりしているので、公式のヘルプを読むのがいいのかもしれませんが・・・(「・ω・)「

Twitterボタン、Facebookボタンなどをまとめて簡単設置|忍者おまとめボタン

ソーシャルボタンで、「何を置けばいいか」ですが、「Twitterツイート」「Facebookシェア」「Google+1」「はてなブックマーク」は必須です。あとは、お好みで・・・忍者おまとめボタンは、まとめて1つのボタンにすることが出来るので、ある程度幅を持って設定するのがいいと思います。


投稿記事フッターに関連記事を表示する

さぁ、いよいよテンプレートHTMLに手を入れます。
ここからは、必ず設定したり変更する前に、テンプレートHTMLのバックアップをとるようにします。

これがすごく大事!

[blogger]シンプルな関連記事表示がしたい!「Smarter Related Posts Widget for Google Blogger - v2.0」! - sunabox
投稿の下に関連記事を付けるのは、是非ともしたいところですが、シンプルなのがいいと言う方に向けて。 ...
▲関連記事の表示用ガジェットは色々ありますが、見た目がシンプルなのと、コードが結構分かりやすいので。
ここで、

  • HTMLの編集。
  • ウィジェットテンプレートの展開にチェックを入れて、post-footerなどは見る。

などを覚えて行きましょう。
欲を言えば、ガジェットコードと言っても、表示部分とスクリプト読み込み部分があるところも知っておきたいところですが、そのうち分かる気がしますw

[blogger]ガジェットのコードの挿入位置を確認する - sunabox
▲コードの挿入位置などは、それほど選択肢があるわけでもないですが、参考にしてください(・・

コンピュータ系サラリーマンブログ: GoogleブログBlogger: 特定ページのみにhtmlソースコードを記述する方法
▲こちらも参考に、特定ページにだけ指定のガジェットを表示させるという方法も見ておくと、後々便利です。

[blogger]外部ツールのスクリプトがうまく動かないときは、まずはココを確認してみましょう! - sunabox
▲そして、ここまできたらそろそろ一度は実体参照で困ってると思いますので、確認ですw

外部ツールの追加方法は、色んなパターンがあったり、そもそもWordpressプラグインだから使えないよ~(ノ_・。)などがあったりするんですが、私の知識程度では、このあたりでやり繰りしています。

あとは、見た目の良い物を見つけられるかどうかです・・・自分で作れないので・・・。


引用・見出しで見た目に凝る


[Blogger]記事投稿ページの引用ボタンを活用する。(blockquot引用スタイルの変更) - sunabox
これ、どういう時に使うんだろう?と気になって調べてみると、他の人が書いた文章などを引用する時には「”」を付けて引用文だと明示するのがいいらしい・・・。 引用のスタイルは、CSSの追加で変更可能。 ...
▲引用スタイルの設定です。引用だと示す事は大事ですし、どうせならブログイメージにあった感じにしたいですよね。また、カスタムCSSを使うので、色々出来るんだという事を実感出来ます。

[blogger]見出しにスタイルを付けたい!付箋風スタイルとクレヨンっぽいのを設定してみた。 - sunabox
▲bloggerでは、h2が「ガジェットタイトル・日付」、h3が「投稿タイトル」、h4「コメント」という、ちょっと不思議な設定になっています。変更する事も考えたのですが、どうもはっきりしなくて迷っています。というわけで、ココではh5を使っての設定と、h2,h3の見た目を変更しています。

先に見出しレベルを調整してしまうのも1つです。「"blogger" 見出し」などで検索すると、そういった話が出てきますので、確認してみて下さい。


あとがき

と、こんな感じだと思うんですね、私の知識レベルは(「・ω・)「
何にも分からなくても、Googleさんが育ててくれるという例ではないでしょうかw

育ったというほどのものではないでしょうが・・・。それでも、一応納得出来るくらいにはブログの見た目を変更出来ています。Googleでひたすら探し続けて2ヶ月でこれくらいです。
もしかしたら、初めからHTML・CSSの勉強!というルートで行けば、もっと深い知識レベルにいけたのかもしれませんが、それは目的ではなかったので。

bloggerのデザインを変えたいけど、どこを見たらいいのか・・・と思っている人は、こんな感じに進めてみてはどうでしょう?私なりに、この順番で知識を増やしていくと、順序良くいけるんじゃないかなぁ?と思う順に並べてみました。

ブログを楽しむ助けの1つになれたらと思います。

それではまた!

2 件のコメント:

  1. 嫁子 伊達2012/08/05 12:45:00

    勉強になります。俺もこつこつとカスタマイズしていこうと思います。
    為になる記事、有難うございますm(__)m

    返信削除
  2. お役に立てたなら嬉しいです!
    コメントありがとうございます!(≧∇≦)

    返信削除