gram demo

はてなブログテーマの"gram"のデモブログです

テーマについて

f:id:gorislog:20190512053559p:plain


”gram” 概要

gramは、はてな公式が公開しているテーマカスタマイズ用のデザインCSSの土台となる『Boilerplate』のコードを利用し、syttg(制作者)がCSSをカスタマイズしたテーマです。

 

デザイン

gramはレスポンシブデザインに対応しているので、表示端末に合わせて最適な表示方法がされます。レスポンシブデザインを使用する際は以下の手順で設定してください。

スマホ・タブレットをレスポンシブデザインに設定する【gram】 - iiie

 

配色は、『白色・灰色・青色』をベースに、シンプルで見やすいブログになるよう心掛けました。

ただ、背景色のデフォルトはCSSの都合上、無指定(白色)になっていて、おすすめはグレー系、もしくは薄いパステルカラーです。簡単に背景色を変える方法を掲載しているので、設定してみてください。

ページ背景(画像・色)を簡単に設定する【gram】 - iiie

 

ブログタイトルのモーションやフルスクリーンメニュー等をCSSに記載しているので、簡単に使用することができます。※タイトルモーションはデフォルト、フルスクリーンメニューはhtml追記が必用です。

フルスクリーンメニューを設置する【gram】 - iiie

 

ブログタイトルのモーション

f:id:gorislog:20190427104018g:plain

 フルスクリーンメニュー

f:id:gorislog:20190425224004g:plain

 

その他、デザイン調整や新しい動き等、凝ったカスタマイズなども掲載、紹介しています。

設定・カスタマイズ - gram demo

 

gramは『一覧形式』を前提としたテーマとなっています。全文形式でも問題にならないよう調整はしていますが、アーカイブページ等で表示方法が異なる可能性があるので、より自然なページビューをするために、一覧形式をお勧めしています。

※設定→詳細設定内のトップページの表示形式より『一覧形式』を選択、なお一覧形式を使用する為には、はてなブログPro化が必要です。

 

表示例

PCデザイン(テーマ投稿者のメインブログ)

f:id:gorislog:20190424224745p:plain

 

スマホ・タブレット表示(テーマ投稿者のメインブログ)

f:id:gorislog:20190424224829p:plain

  

 

 

以下、投稿アイテム・装飾サンプル

 

 

sample:目次

 

sample:大見出し

大見出しのデザインは、一文字目が変色+拡大、アンダーラインをエントリーエリアいっぱいまで広げるデザイン

sample:中見出し

 中見出しは見出し左側に縦ライン

sample:小見出し

 小見出しは見出し前に■ブロックを表示

 

sample:引用

引用のデザインは、四角枠

sample

sample

sample

samplesamplesamplesamplesamplesamplesamplesample

 

文字装飾

太線

イタリアック

 打消し

アンダーライン

 

文字サイズ

大(200%)

中(150%)

標準(100%)

小(80%)

 

リスト

  • 箇条書き
  • 箇条書き
  • 箇条書き

 

  1. 番号付きリスト
  2. 番号付きリスト
  3. 番号付きリスト

 

画像表示

f:id:gorislog:20190415000136j:plain

 

画像表示は、記事領域(白背景)いっぱいまで掲載されます。