2014/07/13

bloggerで大きな写真を見せれるブログにカスタムしました

どうも rintaroです
まえからやろうとおもっていたブログの1カラム化をやっとやりました
サイドバーをなくしたので写真を大きく載せられます

1カラムのレイアウトは写真を見せたいブログにぴったりです
ほかにもフォントの指定やら簡単で見栄えのするカスタムをしたのでまとめておきます



1カラムのレイアウトに変更




左メニューから[テンプレート]をクリック
オレンジの[カスタマイズ]をクリックします



[レイアウト]を選択して右に並んだなかから1カラムのものを選択
フッターのレイアウトもお好みでお選びください

このままではサイト幅は700pxなので大きくしましょう
[幅を調整]をクリックして数値を入力します


めんどくさかったのでわたしはキリよく1000pxにしていまいました

細かい話をするとサイトの最適な幅というのはディスプレイの解像度で決まります
かつては980pxが最適と言われていましたが いまでは1180px-1200pxだとか
参考: 見た目で差をつけろ!2013年サイトコンテンツの幅まとめ!

右上の[ブログに適用]をクリックして設定を保存したら[Bloggerに戻る]で完了です



画像投稿時にちょっといじる




画像をいつもどおりいれます
HTMLモードで表示させます


imgタグ内に[s640]という文字があるのでここを[s(表示したい画像幅)]に書きかえます
わたしは[s800]としています

これで大きな画像を呼びだして表示させることができます



フォントを指定する


こぎれいなフォントで表示するだけでありがたみのありそうなブログを装うことができます
参考: フォントを変更して見栄えを良くする方法
簡単なのでオススメです



文字間と行間の調整


KERNTYPEで100点を叩きだすことに快感をおぼえる人いますよね(わたしです)
気になる人は調整しましょう


[テンプレート]をクリックして[HTMLの編集]をクリック


たぶん[.post-body]というセレクタがあるので探します

文字間はletter-spacingで微調整
行間はline-heightで調整ができます



hr要素のスタイルをかえる


よくつかう区切り線(hr要素)のスタイルもいじっておきました


<b:skin>と</b:skin>のなかにいれればオーケーです
参考: [CSS]hr要素をおしゃれにスタイリングする8つのテクニック


以上 細かすぎて伝わらないブログカスタムでした