1. HOME
  2. その他
  3. ブログのテーマ第2弾に変更しました!

ブログのテーマ第2弾に変更しました!

その他

約一ヶ月前となりますが、ブログのテーマを新しく作成しました!
いまさらではありますが簡単にどんなデザインか紹介します。

まずブログのタイトルを変更しました

前回のテーマの記事では【miki's weblog】だったのですが、ポートフォリオサイトを作るにあたってポートフォリオサイトを親ブログで、ブログを子ブログに落とそう!と考えた結果..........weblog......ポートフォリオなのにドメインがblogか。
ということになり変更しました。

新しいタイトル【木々録】
まず英語ばっかり使うのはやめよう。と思い立ち漢字のタイトルに。
名前が自然物の漢字ばかりだったのでせっかくだから取り入れたいと思い、苗字の「林田」の「林」をわけて「木木」から「木々」になっています。
たまに気付いて下さる方もいたりします。

本題。デザインについて

今回のデザインは【デザインよりもコンテンツ重視!】をテーマに作りました、なのでワンカラムです。
もうひとつの理由としては、サイドにカテゴリーなどを置いておいても押されることはほぼないということが結果として出ていたので、じゃあ潔く下に落としてコンテンツに力を入れようという考えもあります。

文字サイズ

前回は約16pxと少し大きめでしたが、今回は約14pxと小さめにしてあります。
webのことについて書いていると文章が続くので、少しでもシャープにまとめたいと思い14pxをチョイスしました。

フォント

あまりフォントを気にしていませんでしたが、今回から気にしました。使用しているのは【游ゴシック】です。
メイリオよりもやわらかく綺麗にまとまって見えるので使用しています。

行間

1.8から1.5に変更

文字色

#383838から#444に変更

見出しを特に重視

前回はh2,h3までしか見出しをデザインしておらず、記事内でh3までしか使えない状態で反省だったので、しっかりとh5までデザインをつけました。
しっかり区切りとしてわかりやすいようなデザイン、フォントサイズという点を意識しています。

見出し2です

見出し3です

見出し4です

見出し5です

他にもがらっとテーブルやリストのデザインも変えました。おいおい記事ないで出てくると思うのでぜひ確認してみてください。(変なところがあればぜひご指摘ください。)

a-blog cmsについて

前回のテーマは初めてa-blog cmsで自作テーマをつくったということもあり、機能としては最低限で、うまく動作していないところもしばしば........。今回のテーマは昨日としては俄然増えてるかと思います。

メイン画像を別で設定できるように

やり方はこちらで紹介しましたが、メイン画像をエントリーのカスタムフィールドで表示できるようにしました。

関連エントリーの表示

最後までエントリーを読んでもらうという前提で同じタグのついたエントリーを表示しています。この記事で言えば前回のテーマの紹介記事がでますね。
タグフィルターモジュールを使用しています。

絞り込み結果もでるように

検索窓は使用皆無だったので廃止に。
以前は【index.html】と【entry.html】だけで【top.html】を使用していなかったため、カテゴリーなどで絞り込んでも、今なにで絞り込まれた結果なのかが表示されていなかったため、見出しとして検索結果を出すようにしました。
タグでの絞り込みでは複数を同時に絞り込みできたりなどいろいろできたりします。

パンくずリスト

パンくずリストを設置しました。いらないかな〜と思っていたので設置してありませんでしたが、現在地を示すのと、カテゴリーで絞り込みもできるので便利だなということで設置してみました。
前まではパンくずリストもうまく設置できなかったというのも一つの理由だったりします。

あとがき

ざっと変更点を紹介しました。今回はデザインよりも機能をちゃんとすることに重点をおいています。
少しはa-blog cmsは前よりわかってきたような気がします。
まだまだ改善点が山ほどあるので直していかなければいけませんが、つけたい機能としてはアーカイブのところをカレンダーでの表示に変えたいということを思っていたりします。
アーカイブを多くなってきましたし、カレンダーの方が更新頻度がわかりやすいので、ぜひチャレンジしてみたいと思います。


ブログデザイン

この記事を読んだ方におすすめ