ブログのデザインを変更する(スマートフォン)

デザイン設定画面の「スマートフォン」ページでは、デフォルトのスマートフォン表示をカスタマイズできます。

f:id:hatenablog:20190327150912p:plain:w400

スマートフォンのデザイン設定の操作

「スマートフォン」ページには次の設定項目があり、それぞれ項目名をクリックすると設定内容が開きます。
設定項目ごとに操作方法を説明します。

変更した内容は「変更を保存する」ボタンを押すまで反映されません。

アクセントカラー

ヘッダのロゴ色やリンク色を、15種類から選んで変更することができます。

f:id:hatenablog:20190327150915p:plain:w400

ヘッダ

スマートフォン画面で見た際のタイトル画面やブログアイコンを編集できます。

f:id:hatenablog:20190327150920p:plain:w400

ブログアイコン

ブログアイコン(PCと連動)の設定ができます。

タイトル画像

タイトル画像の変更や、ブログタイトルのテキスト表示の有無を設定できます。
ブログタイトルを非表示にしたい場合は、「表示設定」から「画像だけ表示する」を選択してください。また、タイトル画像の高さを変更したい場合は、「サイズ設定」から変更できます。

タイトル下(はてなブログPro)

タイトル下」では、PC版と同じようにタイトルの下にHTMLを自由に記述できます。

「タイトル下」は有料プランである「はてなブログPro」ユーザー向けの機能です。

記事

PC版と同じように、記事上下にHTMLを自由に記述できます。

記事プレビュー

記事ページをプレビュー」をオンにすると、右画面が記事を1つだけ表示するページに変わり、変更点がわかりやすくなります。

f:id:hatenablog:20190327150924p:plain:w400

カテゴリー

記事に設定したカテゴリーの表示位置を選べます。

関連記事

表示されている記事に関連する記事を自動的に表示します。

関連するとされる記事がない場合は表示されないこともあります。

記事上下

記事上下にHTMLを自由に記述できます。

パンくずリスト

パンくずリストを設定する場合は、「記事ページにパンくずリストを表示する」を選択してください。

f:id:hatenablog:20190327150927p:plain:w400

フッタ(はてなブログPro)

スマートフォン独自の「ページャ下(前後の記事へのリンクの下)」欄と、ブログ全体の下部の「フッタ」欄にHTMLコードを自由に配置できます。

  • 「フッタ」にはPC版と同じHTMLを表示させることもできます。

「フッタ」は有料プランである「はてなブログPro」ユーザー向けの機能です。

詳細設定

レスポンシブデザイン

レスポンシブデザイン」をチェックすると、スマートフォンでもPCと同一のデザイン設定を使用します。
ご使用中のテーマがレスポンシブデザインに対応しているかの確認は「 現在選択中のテーマを確認する」から行えます。
ご自身でレスポンシブデザインに対応したテーマCSSを記述する場合は、CSSが適切に記述されているかお確かめください。

f:id:hatenablog:20190327150931p:plain:w400

※テーマが正しくレスポンシブデザインに対応していないと、単にPC版の画面サイズを縮小しただけで表示されるなど、かえって見づらくなるおそれがあります。

レスポンシブデザインをオンにした場合、スマートフォンのデフォルト表示は使用しないので、「スマートフォン」タブの他の設定項目はすべて無視されます。

AMP用CSS(はてなブログPro)

AMPを配信しているときにAMP用CSSを設定できます。

f:id:hatenablog:20190327150934p:plain:w400

「AMP」は有料プランである「はてなブログPro」ユーザー向けの機能です。

関連項目

関連記事(はてなブログ開発ブログ)