2017年1月24日火曜日

Bloggerをがんばってカスタマイズしてみた!

,

昨日ははじめてStackEditで書いた記事をBloggerにアップしてみました。すごく簡単にできたんで、るんるん気分だったんですね。でも自分のブログにアクセスしてみると、なんだか思ったのと違うんです。なんか全体的にださいというか…
で、きれいにする方法はないかなって思って調べていたら、やっぱりBlogger使いの人は自分なりのカスタマイズをしているんですね。そこで私も見やすいブログを目指してカスタマイズしてみることにしました。この記事はそのときの記録です。(Bloggerのカスタマイズが主であまりStackEditに特化した話はでてきません)

全体的なレイアウト、フォント

以下のカスタマイズはBloggerの標準的なメニューから実施しました。

  • ブログ全体: 1000px
  • 右側のサイドバー: 180px
  • 本文のレイアウト: 左本文と右側サイドバー1列
  • フッターのレイアウト: 3列

以下のカスタマイズはBloggerのテンプレート→上級者向けから実施しました。

  • ブログのタイトル
    フォントサイズ: 20px
    フォントスタイル: ボールド

  • 日付ヘッダー
    フォント: Cherry Cream Soda
    フォントサイズ: 10px
    フォントスタイル: ボールド
    テキストの色: #7109b8

  • 記事タイトル
    フォント: Oswald
    フォントサイズ: 24px

説明のフォントを小さくする

Bloggerのブログの説明のフォントサイズを変えたいを参考に、Bloggerのテンプレート→上級者向け→CSSの追加に、下記コードを追加して「ブログに適用する」と反映されました。
なお、CSSの追加の画面では上にエディタ、下にプレビューが表示されるんですが、エディタでCSSを書くと有効なCSS担った瞬間、プレビューに反映されるので、とっても素早くCSSの変更ができるようになってます。さすがGoogle + Bloggerです。

.Header .description {
  font-size: 100%;
}

ブログタイトルの高さを小さくする

上記と同じく、CSSの追加で、下記コードを追加。もう少し小さくしたかったけど、構造がわからず断念。まぁ、ゆるくいきましょう。

.content-inner {
  padding-top: 0px;
}

記事タイトル、見出しを飾る

見出しと本文の間隔をひろくする

この2つは同時にできました。見出しのデザインをCSSのみでカスタマイズする（一部CSS3対応）を参考に見出しのデザインを変更しました。

なお、Bloggerのデフォルトでの見出しタグの使い方ではうまくいかないため、この後StackEditで書いた記事用にテンプレートに対してHTML編集をする予定です。

この作業中に不思議な現象に遭遇しました。はじめは記事タイトルとして「見出しサンプル７」を使おうとしていました。参考サイトに掲載されているCSSを追加してブログトップから記事を見たときはちゃんと吹き出し部分の三角形が表示されていたんです。
トップページの記事タイトル


でも記事をクリックして記事を個別に見てみると、三角形がない! フォントもなんか小さい! という現象に出くわしました。
個別ページの記事タイトル


なんとも不思議ですが、飾りが少ない見出しを使うことにしました。調査するとまた時間がかかりそうなので、装飾の少ないデザインで妥協しちゃいました。(てへぺろ

本文の字を大きくする

bloggerのフォントと文字サイズを変える方法のサイトを参考に次のようにしました。

.post-body {
  font-size: 140%;
  line-height: 1.5em;
}

これからやりたいカスタマイズ

まだまだカスタマイズしたりないです! まだまだできることありそうです。他にもこんなことできるよっていうのがあったら教えてください。

  • 画像がはみ出ているのをなんとかしたい
  • コードや数式をきれいに表示したい
  • 投稿日付を日時にしたい
  • 前の記事、先の記事を記事タイトル付近に表示したい

参考サイト

投稿者 時刻:
ラベル: ,
2 件のコメント:

気づいたこと、不具合、ご意見など、コメント待ってます!

登録: コメントの投稿 (Atom)