ブログの改善を図る②【aboutページ編集と定型文貼り付け機能の使い方】

こんにちは、いとまきです。

このあいだ、はじめて「予約投稿」機能を使いました。

なんとなく存在は知っていたのですが、

いままでずっとスルー。

人に言われて存在を思い出し、

ついに使ってみました！

とても便利ですね( ˘ω˘ )

いままでは記事を完成させておいて、

「公開する」ボタンをクリックする

という手間がありました。

それが省けるだけで、

その分編み物の時間にあてられます～

なんでも時短って大事だなと

つくづく思う今日この頃です。

今日は、

当ブログの最近改善した点について

続きを書いてみたいと思います。

前回はこちらです。↓

meriyasu-is-knit.hatenablog.com

前回の記事と合わせて

よかったら見てみてください。

初心者向けで恐縮ですが、

自分への勉強メモとして残しておきます(/・ω・)/

◆目次◆

ブログ改善点③aboutページの編集

ブログ改善点④定型文貼り付け機能をつかう

ブログ改善点③aboutページの編集

このブログで言うと、この部分ですね。↓

わたしのブログのプロフィール画面。

ほかの方のブログに

アクセスさせてもらったら

いつもプロフィールのところも拝見しています。

ここを押すと入れるページです。↓

赤丸の辺りの画像やはてなID、ニックネームをクリック。

このaboutページ、

意外と編集していない人も多いみたい。

……なんてことも気づきました。

わたしはaboutページの作成を

ブログ開設時にすぐ取り掛かろうとしました。

しかし！

「設定」からaboutページ編集画面へ。

これはすでに完成してる状態ですが……

編集画面を見ていただければ

お分かりだと思いますが、

「HTML」モードになっています。

わたしはそこのところの知識が全くない状態。

しかもブログ開設したばかり……。

ほかにもやりたいこともあったので、

結局aboutページを編集しないまま

１カ月経ちました。 

しかし、いざ編集しようと思い

Google検索をしてみると……

簡単な方法が出てきました！

それをお伝えしていきますね(*'ω'*)

まずは、「記事を書く」から

ブログ作成画面へいきます。

では、いつも記事を書く感じで

「編集見たまま」の状態でプロフィールを書いてみましょう。

たとえばこんな感じ。↓

文字色や文字サイズなどはいつも通りに。

デザインをふくめて完成させたら、

「HTML編集」をクリックします。

すると……。↓

記号だらけ！難しそう(´；ω；`)ｳｯ…

こんな感じで勝手に

HTMLコードの編集画面ができていますね。

この画面の文字列をすべて

さきほどの「aboutページ編集」画面の

「ブログの紹介文」の枠内にコピペ！

そして、

そのページの一番下の

青い「変更する」ボタンをクリック。

変更するボタンは忘れずに押してください。

これで完了です。

コピペでできました( ˘ω˘ )

HTMLコードについて詳しい方や

勉強してみたい方は、

この方法を使わず編集するのもアリです。

しかし、この方法なら

時間もかからず簡単です！

もし、まだaboutページを編集していない方は

チャレンジしてみてくださいね。

ブログ改善点④定型文貼り付け機能をつかう

わたしのブログの最近の記事には、

下のような枠が使われるようになりました。↓

背景色のみで枠なし

二重線で角丸の枠

ブログをやっている方にとっては、

これくらいの装飾は当たり前かと思います。

しかし、わたしはやはり

やり方を知りませんでしたし、

ほかの方のブログを見ては

「いいな～」と思っていました。

そこで、さっそくGoogle検索。

（分からないことはすぐ検索する現代人代表）

ここからやり方をざっくりお伝えします。

※注意※

HTMLやCSSコードについては、ほかの方のサイトでたくさん紹介されています！

サイトによっても様々なデザインのものがありますので、

ご自身で検索などをして使いたいデザインの枠を探してみてください。

探してきたコードを、以下の手順で貼り付ければできますよ(*'ω'*)

 まずは、「記事を書く」から記事編集画面へ。

そのページの右のほうには

「写真を投稿」「カテゴリー」などがあるサイドバーがありますよね。

そのマークの下にある「＋」をクリックすると

下のような画面になります。

その中にある「定型文貼り付け」をクリックして

いつでも使いやすいようにしておきます。↓

この作業をしておけば、いつでも好きな枠やデザインを記事に取り込めます。

こんな感じに表示されていれば、まずOK。

それでは、本題のコードの登録のやり方です！

さっそく今表示させた「定型文貼り付け」を

クリックしてみましょう。

いつも出てきたものをクリックするだけ、それなら簡単なのに。

ここからが本番！

この画面になりましたか？(/・ω・)/

やっと、コードが登場します（笑）

では探してきたコードをコピーして、

下の大きい方の枠に貼り付けてください。

コードの貼り付ける際の注意点などは、

コードを紹介している方のページを参照しましょう。

これで完了しました！

最後に、定型文を記事に挿入してみましょう(^^♪

「定型文貼り付け」を開いたときの画面。

いままでと同じように「定型文貼り付け」を開くと、

上の画像のように

登録済みのものが出てきます。

それをクリックで選んで、

下の「選択した定型文の貼り付け」を押すと

本文に枠が出てきますよ！

簡単ですが、定型文機能の使い方は以上です。

ちなみに、コード内を少し変えれば

枠の色を変えることも可能です！

「HTMLカラーコード」と呼ばれるものを使います。

好きな色のコードに書き換えてあげると、

自分好みのデザインにカスタマイズできます！

それについては

また別で記事にできたら……

と考え中です( ;∀;)

まとめ

今日もここまでお読みいただき、

ありがとうございます！

画像を挿入しまくっていますが、

分かりにくいところもあるかもしれません。

そこんところは、この先もしっかり精進して

わかりやすいページ作りを頑張ります(´；ω；`)ｳｯ…

編み物もそうですが、

ホームページのデザインについても

見る人が「いいな！」と思うものであることが大切だな……

とひしひし感じています。

見た目だけでは価値は決まりませんが、

「こだわっている」ということが見る人に伝われば

もっと興味をもっていただける可能性が広がります。

デザインなどの勉強はしたことありませんが、

センスの部分ももっと磨いていきたいです！

おわり。