ブログを書いていると「どうしたら見易くなるのか？」とか「ここの部分はこういう風に変えられないかな？」とか色々思い浮かんでくるようになってきました。記事を公開する前にプレビューを何回も見てチェックするのですが細かいデザインとかも気になってきます。今回のカスタマイズも初心者でも簡単に出来ます！「サイドバーに配置するコンテンツを真ん中に寄せる」方法の記録です。私はサイドバーコンテンツに使いましたがこの方法はブロック内でコードを使う方法なのでブロックが設置できる場所ならどこでも使えます。
今回気になったのはサイドバーのコンテンツ
画像赤い矢印の指す「X（Twitter）のフォローボタン」です。サイドバー内に設置しているこのボタンなのですが左寄りで表示されています。今回はこれを真ん中寄り（Center）の表示に変えてみようと思います。
外観▷ウェジェット▷サイドバー▷該当のブロックへ
今回変更したいX（Twitter）のフォローボタンがあるサイドバーは外観のウェジェット内にあります。ウェジェット内のサイドバーにカスタムHTMLのブロックを使ってボタンを表示してあるのでそこを開きます。画像のカスタムHTMLにあるコードは以前記録した「ブログ初心者でもできました！ブログやサイトにX（Twitter）のフォローボタンを作る方法を調べてみました！」で設置したコードです。
コードを追加する
コードと聞くと「え、専門的？」とか「むずかしそう…」となるかもしれませんが大丈夫です！コードはネットで調べると色々見つかるので使っていいものをコピーして使わせていただきます。そうしている内に少しずつコードの意味や使い方を覚えていくものかなと思います。なので初心者がはじめから難しいコードを一から作ったりとかではないのでご安心を。今回は次のコードを使います。
<div style=“text-align:center;”></div>
で挟んで
<div style=“text-align:center;”>ボタンのコード</div>
とします。このコードは「<div>と</div>の間にあるやつを真ん中に寄せて表示してね！」という感じの内容になります。
『div』はディヴ（ディブ）と読むタグでdivision（ディビジョン）の略です。『div』には分割という意味があり、コンテンツを分割してひとつのグループを造る役割をします。
コードを使うときに気をつけること
「div」を使ったコードでボタンコードを挟むと画像赤枠内のようなコードが完成します。コードを追加したら青枠内「Save」または「保存」をクリックして変更完了になるので忘れないように注意です！
<div>と</div>はセット
<div>で始まり</div>スラッシュつきの<div>で終わるのでこの2つは必ずセットになっています。この2つの間に「こうして！」みたいなコードを書くことでその内容が実行されるのがコードのようなので必ず<div></div>で挟むようにしましょう。
一文字でも間違えるとうまくいかない
英字一文字やスペル、記号などコードは一文字でも間違えるとうまく表示できません。今回の記録でいうと「style」を「styly」と表記してしまって1回、centerの後の「;」を「:」と入力してしまって2回目の見直しをしました。コードでうまく表示されない場合は一旦落ち着いてコードに間違いが無いか見直すと良いと思います。
他のところを変更しないように気をつける
「知らない間に触ってしまたみたいで他のとこ一文字消してた…」とかで他のコードが変わってしまたら追加したコードが間違ってなくても全体でうまくいかなくなります。コードを変更する時は既に入力されている部分は不用意に変更しないように気をつけます。
今回は応用編もあります
左寄せにしたい場合
左寄せ：「text-align:center;」の『center』を『left』に変更する
右寄せにした場合
右寄せ：「text-align:center;」の『center』を『light』に変更する
まとめ：簡単なコードはどんどん使っていこうと思いました！
サイドバー内のフォローボタンを真ん中に表示することが出来ました！これでフォロー率が上がることは無いと思うのですが見た目と全体的なバランス的に整ったと思います。
今回はコードを追加する方法でしたがコードやプログラムは初心者どころか無知な私でも簡単にできました！MMOゲームでマクロ使用しているからですかね？とにかくコードは慌てず扱っていけばブログ製作の幅は各段に広がると思うので少しづつ勉強して使えるコードはどんどん使っていこうと思います。
