SteamPunk
蒸気と歯車の世界をイメージしました。イラストレーターがイラストブログのために作ったレスポンシブテーマです。
画像が美しく見えるよう、また初めて来た読者でも使いやすいようユーザビリティに配慮しました。
はてな記法モードと見たままモードで動作確認しています。
レスポンシブデザイン
画面幅の広いデバイスでは2カラムで表示、モバイルでは1カラムで表示します。
このテーマはレスポンシブデザインにつき、利用する際は必ずダッシュボードの「デザイン>スマートフォン」の詳細設定の箇所、「レスポンシブデザイン」にチェックを入れて変更を保存してください。
SteamPunkテーマ 動作サンプル
簡単カスタマイズでオリジナリティを
カスタマイズ不要でそのまま使えますが、カスタマイズのしやすさも存分に確保してあります。
テーマを利用する際に必要な設定まとめ - SteamPunkテーマ デモ
ナビゲーション、シェアボタンに対応。
ナビゲーションの付け方 - SteamPunkテーマ デモ
シェアボタンの設置 - SteamPunkテーマ デモ
Twitterと同じヘッダー画像の利用可能
Twitterと同じサイズのヘッダ画像(1500×500px)設置を推奨します。
このテーマでヘッダ画像を楽しもう! - SteamPunkテーマ デモ
ヘッダー画像を設置しなくてもグラデーションのヘッダーが表示されます。
カード型レイアウト
サムネイル画像が美しく表示されるカード型デザインを採用。
画像リンク対応
サイドバーに貼れる画像幅は280pxまでです。本文には336px幅のダブルレクタングルを貼れます。
ダブルレクタングル対応 - SteamPunkテーマ デモ
簡単編集
白系画像に1pxの枠線を付けたいときは、imgのclassに「border1」を追加してください。はてな記法の場合は画像タグをclass="border1"のdivで囲ってください。
リード文はclass="lead"のdivで
CHECKな囲いはclass="check"のdivでくくってください。
変更履歴
20190219 | 各デバイスでのヘッダ下の余白調整 |
20190216 | ヘッダを「画像だけ表示」にしたときに表示が崩れる問題を解消 |
20190215 | フォローボタン用のcssを追加 |
20190212 | スター営業防止cssのコメントアウト (トップページのみはてなスター表示を消したい方はカスタマイズ方法 https://steam-punk.hatenablog.jp/entry/customize を参照してください) |