aokashi / vertical-blogtheme

Blog Theme for Hatena Blog

Vertical BlogTheme

このテーマははてなブログのデザインテーマです。

開発するには？

このテーマははてなブログの Boilerplate テーマをベースにしています。

• https://github.com/hatena/Hatena-Blog-Theme-Boilerplate

SCSSで開発する場合は、下記の手順でリポジトリのcloneとモジュールのインストールを行います。

必要なもの

• Node.js
  • Windows 環境の場合は 8.x をご用意することをおすすめします。 (10.x 以降では node-sass の実行に失敗する可能性があります。)

モジュールのインストール

$ git clone https://github.com/aokashi/vertical-blogtheme.git
$ cd vertical-blogtheme
$ npm install

通常のテーマ開発

下記のコマンドで、SCSSファイル変更の監視とコンパイルを行います。

$ npm start

また、コンパイル後 build/boilerplate.css が作られます。

つづいて、はてなブログでテーマ検証に使うブログを1つ用意します。ブログの「設定」->「詳細設定」にアクセスし、「headに要素を追加」欄に下記を貼り付けて保存します。

<link rel="stylesheet" href="http://localhost:3000/boilerplate.css"/>
<script async src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>

以降は、ブログを開いた状態でSCSSファイルを保存すると、変更したスタイルが自動的に反映されます。

構成

vertical-blogtheme/
|- scss/
|  |- lib/
|  `- boilerplate.scss
`- build/
   `- boilerplate.css

ライセンス

このテーマのライセンスは CC BY 2.1 JP に従います。本テーマのすべてあるいは一部を使用する場合は、本テーマのクレジットの表記が必要です。

この 作品 は クリエイティブ・コモンズ 表示 2.1 日本 ライセンスの下に提供されています。

vertical-blogtheme's Issues

カテゴリー一覧が途中で改行される

スマートフォンで閲覧すると、ブログ記事のカテゴリー一覧表示で、一部のカテゴリー項目が途中で改行されてさっぱり切られてしまう。

投稿以外のリンクから下線を削除

投稿についてはリンクの可否を確かめるために下線を設けていますが、他の箇所 (特にフッター) についてはデザイン上から下線はなくてもいいのかなと思います。

幅の狭いスマートフォンで閲覧すると広告がオーバーフローする

幅 360px のスマートフォンで閲覧した場合、一部の広告がオーバーフローしてはみ出る問題が発生しています。

はみ出た場合ははみ出した分スクロールバー等で隠す手がありますが、広告を隠すこと自体は 注意事項 に反してしまうので、できれば行いたくありません。

現時点では、広告だけ**に揃え、少しでもオーバーフローしないようにしておく必要があるのではないかと思います。

記事一覧ページを Flexbox を使用したグリッドレイアウトに変更

現在、記事一覧ページでは、左側にサムネイルが表示されている従来のレイアウトだが、サムネイルが大きく表示されるグリッドレイアウトので実装できないか確かめたい。

ただし、サムネイルが画像要素ではなく、背景画像を指定した空の div 要素で、回り込みのスタイルもはてなブログ標準のスタイルシートの中に入っているため、ちゃんとした形での実装は難しいと考えられる。