はてなブログのデザインテーマに新しいテーマをリリースしました。
テーマ名は「cosmo」です。トップページと記事ページでレイアウトが変わり、ブログだけどひとつのホームページのように美しく表示されるのが特徴です。
ブログはトップページという概念があまりなく記事ページと同じようなレイアウトで表示されるのが特徴です。ですが記事内の文章などがそのまま表示されるためどうしても素人感がでてしまいますよね。
今回のテーマは美しさにこだわったデザインテーマです。とくにトップページという概念を導入しているので憧れのトップページがあなたのブログに出来上がります。
デモサイトはこちら ：デザインテーマ「コスモ」
ダウンロードはこちら：美しさにこだわった「cosmo」 - テーマ ストア
| メインカラム | トップページ：1カラム 記事ページ ：右カラム |
|---|---|
| レイアウト | カード型レイアウト |
| レスポンシブ |
レスポンシブデザイン対応 検証端末：iphone 7Plus |
| 対応ブラウザ |
トップページは1カラムで記事をカードで表示します
通常ブログというのは、トップページと記事ページで同じようなレイアウトになるのが特徴ですが、それだとブログ特有の初心者っぽさが出てしまいます。
このデザインテーマではトップページは1カラム、記事ページは2カラムになりブログよりもよりホームページとしての美しさを追求しています。
ナビゲーションの実装もできるため、ブログでありながらホームページのような完成度の高さを求めることができます。
トップページのメイン画像（アイキャッチ）の指定について（有料版の方）
はてなブログ有料版（Pro版）をお使いの方はアイキャッチ画像を指定することができるので記事編集オプションの歯車アイコンからアイキャッチ画像を指定してください。特に画像がない場合ははてなブログでデフォルトの画像を指定できますのでそちらをお使いください。
トップページのメイン画像（アイキャッチ）の指定について（無料版の方）
無料版の方は機能上の問題でアイキャッチ画像の指定はできません。記事内で使用した一番最後の画像がメイン画像で表示されます。
何も画像を入れていない場合ははてなブログデフォルトの画像が表示されます。
メインビジュアルの変更方法について
ブログのメインビジュアルになっている星っぽい画像ですがデザインから別のものに変更できます。
メインビジュアル背景の色変更
メインビジュアルの土台になっているデフォルトの背景色が紫系なのですがこちらも変更できます。下記コードをデザイン→CSSに追記して好きな色に変更してください。
一番下に追加してください。
以下のサンプルコードは薄いピンク色に変えるコード。
#container #container-inner #blog-title, #footer {
background-color: pink !important;
}
- カラーコード一覧
pink って書かれてるところを変更すると色を変えられます。
| 色 | 名前 |
|---|---|
| 白 | #FFF |
| 黒 | #000 |
| シルバー | silver |
| グレー | gray |
| 赤 | red |
| スカイブルー | lightskyblue |
記事ページは右カラムで読みやすくレイアウトしています
ブログの各となる記事は右カラムのレイアウトを採用しています。左から右に読みやすく記事を探しやすいレイアウトになっています。フォント、行間、文字サイズも各端末に合わせて調整しています。
記事ページにぱんくずリストを表示するとよりきれいに見えます
記事のページはデフォルトではパンくずがオフになっています。今どのページを表示しているかわかりやすくするパンくずリストをオンにすることで読者にとってよりわかりやすいデザインになります。
記事ページのパンくずリストはデザイン→ヘッダからオンにできます
記事ページはデフォルトだとパンくずが表示されません。管理画面「デザイン」の「ヘッダ」よりオンにしてください。
おまけ（開発的な話）
ここから先は開発者メモ。読み込み速度とかそういうのです。
フォントの仕組み
フォントは明朝体を採用しています。ただ、明朝体は旧端末ですとカクカクとした見辛いフォントになってしまうためヒラギノなどのシステムフォントが使用できない場合はgoogleフォントからインストールして見やすいフォントを表示させます。
この設定により読みやすい記事をデザインしつつ読み込み速度の低下もある程度防いでいます。
グリッドレイアウト使ってます
こっそりグリッドレイアウトを導入してカード型レイアウトに使用しています。旧来の不動化を用いて等分させる手法よりもくっきりきっかりきれいに等分されるのが特徴です。
ただこのグリッドレイアウトですがIEなどの旧ブラウザには対応していないので別途それに対応させないといけないです。当テーマではIE11でもきれいに表示されるように調整しているのでご安心ください。
デザインテーマコンテスト開催されてます
はてなのデザインテーマコンテストが開催されています。先行はデザイン性とかいろいろあるんですがインストール数と星の数もそのひとつみたいです。
テーマに星をつけるっていうのが意味不明なのですが、テーマの詳細からブックマークすれば可能なのかな？昔はボタンひとつで星いれられたけど。
よかったら応援してください。おすすめのテーマにも選ばれたことないので…金賞ほしいです…。
