大人のための『夢を叶える学校』

「夢は叶えるもの!」険しい道でも突き進めば、その先に必ず光が見える。実現した経緯や飲食店経営・起業の仕方などについて投稿しています

基本機能を使いこなして、ブログ生活を充実させる【はてなブログ活用法】

(✿✪‿✪。)ノコンチャ♡

前回は『ダッシュボード』の機能について解説しました。

今回は、

基本機能を使ってデザインの変更についてまとめてみました。

hatenablog.com

f:id:success-life:20210915013722j:plain

基本のカスタマイズ①

 

ダッシュボードから【デザイン】をクリックします。

「デザイン画面」からできることは以下の通りです。

  • ブログのテーマの変更
  • デザインのカスタマイズ
  • スマートフォンから見た時のデザインの設定

 

テーマ変更

はてなブログでは、

公式テーマやテーマストアから自由に選択し、

テーマの着せ替えができます。

 

公式テーマ

デザイン画像から【デザインテーマ】タグをクリックすると、

左側に公式テーマが表示されます。

 

f:id:success-life:20210912020405p:plain

公式テーマ①

 

スクロールするとテーマのサムネイルが表示されます。

好みのサムネイルを選択しクリックします。

横のメイン画面に、

選んだテーマを適用した時のプレビューが表示されます。

 

テーマが決定したら、

上部の【変更を保存する】をクリックします。

f:id:success-life:20210912021803p:plain

公式テーマ②

 

テーマストア

サムネイルを最下部までスクロールすると、

【テーマストアでテーマを探す】をクリックします。

f:id:success-life:20210912024813p:plain

テーマストア①

 

テーマストア画面から、

左上のタグからサムネイルを選択できます。

f:id:success-life:20210912024948p:plain

テーマストア②

 

気に入ったサムネイルをクリックすると、

テーマが表示されますので、

【プレビューしてインストール】をクリックする。

f:id:success-life:20210912025230p:plain

テーマストア③

 

すると、

適用した時のプレビューが表示されます。

f:id:success-life:20210912030038p:plain

テーマストア④

 

確認して良かったら【このテーマをインストール】をクリックします。

すると、

ダイアログが表示されますので【OK】をクリックして完了です。

 

f:id:success-life:20210912030300p:plain

テーマストア⑤

 

ブログのカスタマイズ

では次に、

インストールしたテーマをカスタマイズしていきましょう。

 

カスタマイズって、どんなことできるのかって?

それは、

背景やヘッダに画像や色を付けたり、

記事やサイドバーに必要な情報やツールを表示させたりします。

 

デザイン画像から【カスタマイズ】タグをクリックします。

 

f:id:success-life:20210912035524p:plain

カスタマイズ①

 

背景画像

左のメニューから【背景画像】をクリックします。

f:id:success-life:20210912035904p:plain

背景画像①

 

左側から好きな画像を選びクリックすると、

メイン画面に適用された背景画像がプレビューされます。

 

f:id:success-life:20210912041006p:plain

背景画像②

確認して良かったら、

上部の【変更を保存する】をクリックします。

 

オリジナル画像を背景に設定したい場合は、

【ファイルを選択】ボタンから設定することができます。

 

f:id:success-life:20210912041352p:plain

背景画像③

 

画像を設定して反映させると、

メイン画面に適用された背景画像がプレビューされます。

 

f:id:success-life:20210912042635p:plain

背景画像④

適用された背景画像の表示が設定できます。

【位置】

左から開始して配置します
中央 中央に配置します
右から開始して配置します

 

【繰り返し】

繰り返す 画面いっぱいに画像が繰り返されます
水平方向のみ繰り返す 横方向のみに画像が繰り返されます
垂直方向のみ繰り返す 縦方向のみに画像が繰り返されます
繰り返さない 画像は繰り返しません

 

【スクロール】

固定する 記事をスクロールしても背景は動かない
スクロールする 記事をスクロールすると背景もスクロールする

 

f:id:success-life:20210912044647p:plain

背景画像⑤

設定が完了したら、

上部の【変更を保存する】をクリックします。

 

背景色

左のメニューから【背景色】をクリックします。

 

f:id:success-life:20210912045732p:plain

背景色①

 

好みの背景色を選びクリックすると、

メイン画面に適用された背景色がプレビューされます。

 

f:id:success-life:20210912050059p:plain

背景色②

 

決定したら、

上部の【変更を保存する】をクリックします。

 

ヘッダ画像

ヘッダ画像はテーマ全体に表示され、

訪問したユーザーが一番最初に目に入るので、

ブログを印象付けるものです。

また、

レスポンシブデザインのテーマを選択している場合は、

一つの画像で、

PC用とスマートフォン用のどちらも自動的に変換されます。

では早速、

ヘッダ画像の設定をしていきます。

 

左のメニューから【ヘッダ】をクリックします。

f:id:success-life:20210912172621p:plain

ヘッダ画像①

 

【ファイルを選択】をクリックして、

好みの画像を選択します。

f:id:success-life:20210912172711p:plain

ヘッダ画像②

 

選択した画像が表示され、

位置の調整ができます。

位置が決まったら左下の【適用】をクリックします。

f:id:success-life:20210912172735p:plain

ヘッダ画像③

 

設定されたプレビューが表示されます。

f:id:success-life:20210912172759p:plain

ヘッダ画像④

 

ヘッダ画像に『タイトルテキスト』を非表示にしたい場合は、

「表示設定」で【画像だけ表示】にチェックします。

f:id:success-life:20210912172934p:plain

ヘッダ画像⑤

 

設定が完了したら、

上部の【変更を保存する】をクリックします。

 

次に、

ヘッダの下にブログの説明文を入れてみましょう。

「タイトル下」のテキストボックスに、

HTMLを使って説明文を入力します。

『HTML』については後記事で詳しく解説しますので、

今は考えずに進めていきましょう。

f:id:success-life:20210912174932p:plain

ヘッダ画像⑥

 

テキストボックスをクリックすると、

テキスト入力ができます。

f:id:success-life:20210912180229p:plain

ヘッダ画像⑦

 

説明文を入力したら、

上部の【変更を保存する】をクリックします。

 

f:id:success-life:20210912180341p:plain

ヘッダ画像⑧

このように、

入力したテキストがヘッダ画像の下に表示されます。

 

テキストボックスに入力した時には改行して2行のテキストだったのが、

実際にブログに表示されたテキストは1行になっていることに、

気付きましたか?

 

これは、

テキストボックスには『HTML』を使った記述をすることで、

ブログへ反映させることができます。

『HTML』については後々学んでいきましょう。

 

例えば、

HTMLで<p></p>は一つの段落、<br>は改行の意味を持ちます。

これを使ってフッタに説明文を入れてみましょう。

 

フッタ

左のメニューから【フッタ】をクリックします。

f:id:success-life:20210913005643p:plain

フッタ①

 

開いたテキストボックスをクリックします。

 

f:id:success-life:20210913005712p:plain

フッタ②

 

先程解説した『HTML』を使ってテキストを入力します。

入力したら、

上部の【変更を保存する】をクリックします。

 

f:id:success-life:20210913005739p:plain

フッタ③

 

メイン画面に反映させたのを確認すると、

2行に改行されテキストが表示されています。

 

f:id:success-life:20210913005807p:plain

フッタ④

 

メイン画面のヘッダとフッタに、

テキストを表示させることができました。

同様に記事ページの上下にも情報を表示させることができます。

 

記事

左のメニューから【記事】をクリックします。

f:id:success-life:20210913021239p:plain

記事ページ①



【記事ページをプレビュー】をクリックして編集をします。

f:id:success-life:20210915003011p:plain

記事ページ②

 

下にスクロールすると、

『記事上』『記事下』を編集するテキストボックスがあります。

前項と同様「HTML」を使って記述します。

 

f:id:success-life:20210915002935p:plain

記事ページ③

では実際にテキストを入力して、

どのように表示されるかを確認した方が理解しやすいと思います。

入力が完了したら【変更を保存する】をクリックします。

忘れないようにしましょう。

 

記事下

記事上のテキストボックスに入力します。

f:id:success-life:20210915004900p:plain

記事上①

 

するとプレビュー画面に反映されます。

f:id:success-life:20210915005008p:plain

記事上②

 

このように、

記事タイトルと記事本文の間に表示されることが確認できます。

 

記事下

同様に記事下のテキストボックスに入力します。

f:id:success-life:20210915005407p:plain

記事下①

 

するとプレビュー画面に反映されます。

f:id:success-life:20210915005544p:plain

記事下②

 

このように、

記事の下に表示される「はてな広告」の下に表示されています。

 

さいごに

少し長くなりましたがお疲れさまでした。

今回は、

ブログの見た目をカスタマイズする基本操作について解説しました。

 

あなた自身のブログを着飾ることで、

オリジナル性のあるブログが出来上がると思います。

ブログ活動をする上での、

モチベーションが上がること「間違い無し!」

 

さて次回は、

カスタマイズの基礎操作『後半』に入ります。

ご期待ください。

はじめにやってしまえば、

後は『記事作成』に集中できます。

 

では、

またお会いしましょう。