ブログを書き始めて1ヶ月程経つので、私がブログを作る過程で参考にしたサイトやテンプレートについて備忘録としてまとめていきます。JavaScriptなんかは本格的に勉強している暇がないからほとんど理解していないけど一応紹介。
紹介と言ってもあくまで一日の平均pvが1か2程度の雑魚ブログ運営者のメモ程度の内容。今の時代分からないことはググれば大抵なんとかなるし。
項目は思い出したり新たな発見をしたら逐一追加していきます。暇だったら個別で自分なりに記事を作ろうかとも考えています。
Bloggerの基本中の基本
これから本格的にBloggerでブログを始めてみようという人の出発地点。
言わずもがな公式のヘルプ。
ブログをいざ始めようとなった何も分からない初期の頃、こちらのサイトをまず参考にさせて頂きました。bloggerの仕様と言うかデフォルトでできることを右も左もわからないような初心者向けに丁寧に書いてあります。
ブログを書き始めてすぐにぶち当たるであろうhtml、cssという壁(デフォルトで満足の場合は考えなくてもいいんだけど)があります。こちらのサイトは参考書として。
フォントの設定
フォント関係については正直今では何当たり前なことを言ってんだよと思うようになってしまったけど、最初のうちは分からなかったんだよなこれが。メイリオの導入方法については記事にしやすいためか、なぜかかなりの数のサイトがやり方を紹介しています。
デフォルトの読みにくい日本語フォントをメイリオに変更するために参考にしました。分かりやすい。OSごとにフォントは違うので理解していないうちに適当に指定するのはあまりよろしくないです。
ブログタイトルのフォントをおしゃれにしようと思って検索していたところウェブフォントというものを発見。導入の仕方がまとめてあります。有料のフォントが多いですが、英語フォントなら無料のGoogleウェブフォントが個人的におすすめ。このブログでも使っています。
ブログのエントリータイトルがリンク色になって不快だったので部分的にcssで指定する時に参考にしました。気づけば大したことない。
作成モードの見出しタグなどヘッダーを自分好みにする
慣れてきたら作成モードは使わなくなると思いますが。ブログを記事を含め見やすくかつおしゃれにしようと思ったら必要になってくる見出しタグ関連。
Bloggerのヘッダー(ここではブログタイトル)はウィジェットであるが故に色々不便なことがあります。こちらのサイトではヘッダーの一を動かしたり、ヘッダーを画像にする場合の位置調整なんかを解説しています。おもしろいですがこのブログでは採用しませんでした。
本ブログはこちらのサイトをベースにヘッダータグ(投稿の見出しなんかのスタイルを指定するタグ)を色々いじっています。ちゃっかりSEOの観点から重要だったりします。作成モードでは見出しがh2、小見出しがh3、準見出しがh4と結構ややこしい。
見出しサンプルを紹介しています。色なんかはカラーコードでググってもらえれば好みに変更できると思います。見出しのデザイン自体はcssがよく分からなくても手探りで数値をいじったりコピペしていると何となくできてしまったりする(ブログ開始3日目の私)。
部分的にデザインを設定する
実際にブラウザ表示した状態で編集したい部分を確認する方法。実際にブログをブラウザで表示したときに、ここチョット違和感あるなーとかフォントを変えたいなーとかなったときに部分的に編集する方法ってhtml初心者は分からないですよね。
要素を検証する方法。はじめはこちらのブログで紹介されているようなウィジェットの文字サイズを小さくする方法を探していたときに参考にさせて頂きました。この方法かなり応用が効き、視覚的に編集したいところが分かるので非常に便利。
タイトルヘッダーやフッターの枠を画面いっぱいに広げる
negative marginとoverflowという概念を使って本ブログのヘッダーやフッターのように画面いっぱいに表示する方法。ただし適用したウィジェットのレイアウト設定画面での表示がバグります。
Wordpressの話ですがBloggerでも問題なく応用可能。画像が多くこちらのサイトはめちゃくちゃ分かりやすかったです。要はmarginの値をマイナスに設定し、paddingをその分元に戻すしてスクロールしないようにoverflowをhiddenにするだけという簡単なお話ですけど。
ラベルをタイトル下に表示する
デフォルトだと記事のヘッダーに表示されるラベルですが、記事のタイトル下に表示させることができます。人気のあるブログは大体こうなっている気がします。
レイアウトの設定からやっても反映されなかったため、本ブログではこちらのサイトを参考にして、自己流にアレンジしています。個人的には現状に満足していないけど。
ウィジェットのラベルを階層化する
初心者の私個人的にbloggerの最大の欠点はラベルが階層化できないことで、半ば諦めかけていたらJQueryでの方法が公開されていました。以前はラベルウィジェットを幾つか用意して手動で管理していました。
本ブログのカテゴリーのようにするやり方を紹介しています。作者様には本当に感謝。現状中身について理解できていないので、いつかソースを参考にもっとデザインをおしゃれにカスタムしたいところです。
Bloggerカスタム関連まとめ
最後にカスタム関連を紹介しているサイトやまとめている記事を紹介。どこもとても興味深いですが、まだ私自身が咀嚼しきれていないのでこれから参考にしていきたい。
