| 記事の種類 | はてなブログの使い方、はてなブログの書き方 |
| SEO対策 | 関係なし |
| SXO対策 | 関係あり |
| 難しさ | かんたん |
| 重要さ | 重要 |
次のような方にオススメ！
- 広告やテキストを中央寄せにしたい
- 広告やテキストを右寄せにしたい
- 中央揃えのブログ記事を作りたい
- オシャレなブログ記事にしたい
ぴっぴです！
ぴっぴもブログを始めた頃、テキストを中央や右に寄せて、オシャレな記事を作りたいと思ったことがあります。
そんなぴっぴも今では、テキストを中央や右に寄せれるようになりました。
その証拠が下のボタン。
そのような訳で今回の「ぴっぴのはてなブログでアフィリエイト」では、はてなブログで【中央寄せや右寄せ】の記事を作る方法を紹介します。
- 中央（右）に寄せる部分を指定する
- 「中央（右）寄せ」ボタンを押す
- 中央（右）寄せになる
また本記事では、はてな記法やHTML、Markdownでの中央（右）寄せについても紹介しています。
それぞれの詳細を知りたい方は、下記のリンクより知りたいところにジャンプしてくださいね。
知りたいことにジャンプ！
そして、オシャレなブログ記事で閲覧者の方の心をゲットしちゃいましょう！
ところで、画像の中央寄せや右寄せの詳細を知りたい方は、下記のリンクより本ブログの記事「HTMLで画像の位置を中央や左右に固定する方法｜はてな記法とMarkdownのやり方も紹介 」をご覧くださいね。
▶「HTMLで画像の位置を中央や左右に固定する方法｜はてな記法とMarkdownのやり方も紹介」を読む
中央（右）に寄せる方法
はてなブログの中央（右）に寄せ方は、編集方法によって違います。
| 見たまま編集 | 寄せる箇所の指定 ⇀ ボタンをクリック |
| SEO対策 | HTMLの貼り付け |
| 見たまま編集 | |
| 見たまま編集 |
このように寄せ方が違います。
なので、編集方法別に寄せ方を解説します。
見たまま編集
見たまま編集の寄せ方は、次のとおりです。
- 中央（右）に寄せる部分を指定する
- 「中央（右）揃え」ボタンを押す
- 中央（右）寄せになる
このように3ステップで、テキストや画像を寄せることができます。
寄せたい部分を指定します。
次に中央（右）揃えボタンを押してください。
すると上の画像のように「指定した部分」の位置が変わります。
このように見たまま編集の中央（右）寄せは指定して、ボタンを押すだけなので簡単です。
機械の操作が苦手な方でもストレスなく行えるので、ぜひ「キレイな記事」作りにお役立てくださいね。
その他の編集
見たまま編集以外は、次のコードを書けば、中央（右）寄せができます。
<!-- 中央寄せ -->
<p style="text-align: center;">内容</p>
<!-- 右寄せ -->
<p style="text-align: right;">内容</p>
<p style="text-align: end;">内容</p>
<!-- 左寄せ -->
<p>もともと左寄せなので、何もしなくもOK</p>
<p style="text-align: left;">内容</p>
<p style="text-align: start;">内容</p>
「内容」の部分に寄せたいテキストや画像を入れてください。
テキストだけでなく、HTMLタグにスタイルを充てれば、見出しや画像なども位置を変えられます。
ところで、「style="text-align: ;"」を定型文に登録しておくと、コードを入力しなくて良いので便利ですよ。
定型文機能の詳細を知りたい方は、下記のリンクよりを「はてなブログの定型文機能で作業効率アップ！」をご覧ください。
注意点
中央（右）寄せをするときの注意点は、次のとおりです。
- ユーザビリティの考慮
- <center>タグは非推奨
- 長い文の中央（右）寄せは工夫が必要
この3点に気をつけて中央（右）揃えを行ってくださいね。
ユーザビリティの考慮
テキストや画像（以下、要素という）などの中央（右）寄せ自体には、アクセシビリティを悪くする要因はありません。
しかし全体的なデザインや他要素のスタイルとの組み合わせによっては、ユーザー体験に影響を及ぼす可能性があります。
なので要素の中央（右）寄せを行うとき、ブログの全体的なデザインとユーザビリティを考慮しましょう。
<center>は非推奨
現在、<center>タグは非推奨になっています。
非推奨:この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
なので、見たまま以外の編集方法でHTMLを使う場合、<center>タグを使わないでくださいね。
長い文の中央（右）寄せは工夫が必要
長い文の中央（右）寄せは、工夫が必要です。
単語の位置変更は、問題ありません。どんどん寄せてください。
しかし、長文の位置変更には工夫が必要になります。
例えば長い文を中央に寄せると、次のようになります（注：タブレットだと、折り返さずキレイに表示されていると思います）。
長文を中央に寄せると、このように変なところで文が折り返してしまいます。
見栄えが悪いですよね？
何よりも読みにくいので、閲覧者の方にご迷惑をおかけします。
なので、長文を中央や右に寄せるなら、次のような工夫をしましょう。
【危険】
長文の中央に寄せ！
変なところで文が折り返すから。
中央寄せや右寄せをした感想
見たまま編集では、要素の中央（右）寄せは簡単でした。
理由は、次のとおりです。
- wordと同じ操作
- 他のブログサービスと同じ操作
- 指定してボタンを押すだけ
このような理由で、はてなブログの中央（右）寄せを簡単だと思いました。
もちろん他の編集方法も、HTMLを書くだけなので同じく簡単です。
ただHTMLやCSSを書ける立場としては、HTMLに直接スタイルを充てるのに抵抗を感じてしまいます。
でも、操作性や記事ごとのメンテナンスを考えると、ボタンを押してHTMLタグに直接スタイルを充てられるのは重宝するかなって。
何よりも、中央揃えに「center」タグを使っていないことには、とても嬉しく思いました。
はてなさん、お忙しいのにアップデートしていただき、ありがとうございます！
まとめ
今回は、はてなブログの中央寄せや右寄せの記事を作る方法を紹介しました。
| 見たまま編集 | 寄せる箇所の指定 ⇀ ボタンをクリック |
| SEO対策 | HTMLの貼り付け |
| 見たまま編集 | |
| 見たまま編集 |
このように「はてなブログ」の中央寄せや右寄せは、とても簡単です。
今回のポイントを抑えて、中央（右）寄せをすると良いですよ。
記事の内容
- ユーザビリティの考慮
- <center>タグは非推奨
- 日本語の中央寄せはセンスが必要
3つめは少し難しいかもしれませんが、練習してステキな記事を作ってくださいね。
これから記事を書く方へご案内
ぴっぴのはてなブログでアフィリエイトでは、編集画面の使い方が分かる「画像でわかる【はてなブログの記事の書き方】」をご用意しています。
今回のポイント
- 使用頻度の高い【機能の使い方を21枚の画像】で紹介
- オススメの記事の内容
- ネタの探し方
- 記事の品質の上げ方
このような盛りだくさんの内容になっています。
「良い記事を書きたい」または「検索する手間を省きたい」という方は、下記のリンクより「画像でわかる【はてなブログの記事の書き方】」をご覧ください。
