SteamPunkテーマ デモ

イラストや写真ブログ向けのテーマです

MENU

テーマの説明

SteamPunk

蒸気と歯車の世界をイメージしました。イラストレーターがイラストブログのために作ったレスポンシブテーマです。
画像が美しく見えるよう、また初めて来た読者でも使いやすいようユーザビリティに配慮しました。
はてな記法モードと見たままモードで動作確認しています。

レスポンシブデザイン

画面幅の広いデバイスでは2カラムで表示、モバイルでは1カラムで表示します。
このテーマはレスポンシブデザインにつき、利用する際は必ずダッシュボードの「デザイン>スマートフォン」の詳細設定の箇所、「レスポンシブデザイン」にチェックを入れて変更を保存してください。

SteamPunkテーマ 動作サンプル

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
を参照してください)
Copyright © AzuLitchi All rights reserved.