ハウリンの雑念だらけで生きている

日々雑念と戦ってます。ゆるゆると書いていきます。

はてなブログ、文字装飾(色・サイズ変更・アンダーライン・リンク・目次など)カスタマイズ。


スポンサーリンク

はてなブログカスタマイズ紹介のアイキャッチ

はてなブログカスタマイズ。

いろんな事が出来ます。

文字装飾ツールバーの使い方を紹介したいと思います。 

記事が黒い文字ばかりだと読みにくいですし、つまらないですよね。

ツールバーを使うといろいろな事が出来ます。

強調したい部分に色がついていたり、大きくしたりすると分かりやすくなりますし、メリハリがつくのでお勧めです。

 

 

 

文字を太くする 

太くしたい文字をドラッグして指定します。

f:id:twistinhaurin:20200811133927p:plain

文章はしょうもないです。

 

ツールバーの赤枠で囲った所をクリックすると。

はてなブログ 文字を太くするボタン画像

 

「そうめん」太字ではっきりしました(^O^)/

夏に食べたいものと言えばいろいろありますが、

やっぱりそうめんじゃないでしょうか。

冷やし中華でもいいかも。

 

 

文字に色をつける

色をつけたいところをドラッグして指定します。

 

赤枠で囲った所をクリックすると、色のパレットが出てくるので好きな色を選んでクリック。 

はてなブログ 文字に色をつけるボタン画像

夏に食べたいものと言えばいろいろありますが、

やっぱりそうめんじゃないでしょうか。

冷やし中華でもいいかも。

 

太字と組み合わせると

夏に食べたいものと言えばいろいろありますが、

やっぱりそうめんじゃないでしょうか。

冷やし中華でもいいかも。

更にはっきり強調されました(^O^)/ 

 

 

文字を傾ける

日本語の文章に斜体を使用しようとしても何も変わりません。

多くのブログでは「メイリオ」というフォントが使われているらしく、

メイリオが使われている日本語の文字を斜体にしようと

クリックしても斜めにはならないのです。

これは、日本語には斜めにする文化がないからだそうです。

じゃあ英語はどうなの?とやってみると

「今一番行きたい所はThailandです。」の

Thailand の部分を指定して、赤枠の所をクリック。

はてなブログ 文字を傾けるボタン画像

 

今一番行きたい所はThailandです。 

斜めになりました(^O^)/

 

 

打ち消し線(打消)をいれる

消したい部分に線を入れるという事です。

 

打ち消し線を入れたい部分を指定して、赤枠の所をクリック。

はてなブログ 打ち消し線ボタン画像

夏に食べたいものと言えばいろいろありますが、

やっぱりそうめんじゃないでしょうか。

冷やし中華でもいいかも。

「冷やし中華」 に打ち消し線が入りました(^O^)/

 

 

アンダーラインを引く

アンダーラインを引きたい部分を指定して、赤枠の所をクリック。

はてなブログ アンダーラインボタン画像

夏に食べたいものと言えばいろいろありますが、

やっぱりそうめんじゃないでしょうか。

冷やし中華でもいいかも。

「やっぱりそうめん」にアンダーラインが入りました(^O^)/

 

 

文字のサイズを大きく(小さく)する 

大きく(小さく)したい部分を指定して、赤枠の所をクリック。

はてなブログ 文字の大きさ変えるボタン画像

 

中(150%)にすると・・・(太字と組み合わせてます)

夏に食べたいものと言えばいろいろありますが、

やっぱりそうめんじゃないでしょうか。

冷やし中華でもいいかも。

「そうめん」の主張が強くなり

 

更に、大(200%)にすると・・・

夏に食べたいものと言えばいろいろありますが、

やっぱりそうめんじゃないでしょうか。

冷やし中華でもいいかも。

相当「そうめん」食べたいんだなぁと思えます。 

 

小(80%)にすると・・・

夏に食べたいものと言えばいろいろありますが、

やっぱりそうめんじゃないでしょうか。

冷やし中華でもいいかも

 「冷やし中華でもいいかも」が控えめになりました(^O^)/

 

 

見出しと目次を作る

見出しを作る

見出しにしたい部分を指定して、赤枠の所をクリック。

はてなブログ 見出しを作るボタン画像

「大見出し」「中見出し」「小見出し」とでてくるので指定します。

このブログでの「大見出し」は⇩になります。

はてなブログ 見出しの例画像

 

「中見出し」だと⇩こんな感じ

はてなブログ 見出しの例画像

 

「小見出し」だと⇩こうなります。

はてなブログ 見出しの例画像

私はあまり「小見出し」まで作る事はないのですが、いろいろ試してみると楽しいかもしれません。

 

目次を作る

見出しを作ったら「目次」を作成してみます。

「目次」を表示させたい所にカーソルを置き、

赤枠の部分をクリック・・・

はてなブログ 目次を作るボタン画像

 そうすると

はてなブログ contentsの文字画像

と表示されます。

編集画面では⇧上の表示だけですが、プレビューにはちゃんと簡単な「目次」が出来上がってます。

はてなブログ 目次の例画像

「中見出し」は1つずれて表示され、「小見出し」は更に1つずれて表示されます。

 

※使っているテーマや設定した見出しのコードによって違いますのでご了承下さい。


もう少し「目次」をカスタマイズしたい方は⇩こちらをご覧ください。 

www.haurin-zatunenlife.com

 

 

 

箇条書きにする

リストを書き出したりする時に「・」を使って揃えたりしますが、「箇条書き」をクリックして揃えた方がSEO的にも良いみたいです。

 

例えば

はてなブログ 箇条書きにするには画像

こんな風に指定して

 

赤枠の所をクリックすると

はてなブログ 箇条書きボタン

 「・」が表示されて、箇条書きに表示されました。

はてなブログ 箇条書きの例

 

しまった!!あと1行追加したい!という時は、カーソルを「カレー」の最後に置いて

「Enter」をクリック。

f:id:twistinhaurin:20210923121919p:plain

リストを追加できる様になります。

※使っているテーマによって表示されない場合があります 

 

 

番号付きリストを作る

箇条書きを作る時と同じように、「番号付きリスト」にしたい部分を指定して、赤枠の所をクリック。

はてなブログ 番号付きリスト作るボタン

番号が付いたリストになりました(*^^*)

はてなブログ 番号付きリストの例

こちらもリストを増やしたい時は、カレーの最後にカーソルを置いて「Enter」をクリックすれば増やせます。

※テーマによって表示されない場合があります 

 

 

外部リンクを貼る

 ⇩こちらで詳しく載せてます。 

www.haurin-zatunenlife.com

 

 

続きを読むを使う

トップページが「全文形式」の場合「続きを読む」機能を使うと便利です。

ブログのトップページに新しい記事から表示されていますが、全文表示ではなく1部分まで表示させて、残りは「続きを読む」をクリックしてから見れる様にします。

 

ここまでは表示させたいと思う所の下にカーソルを合わせます

はてなブログ 続きを読むの作り方

 

 赤枠の所をクリック。

はてなブログ 続きを読むを作るボタン

 

 そうすると、この様に点線が表示されます。

はてなブログ 続きを読むの例

 

トップページを見てみると

はてなブログ 続きを読むの例

「続きを読む」が表示されました(*^^*)

 

 

引用文を使う

引用文としたい分を指定します。

はてなブログ 引用文の作り方画像

 

赤枠の所をクリック。

はてなブログ 引用文作るボタン

 

 編集モード画面には下の様に表示されますが、

はてなブログ 作った引用文の例

 

プレビュー画面で、文章が囲まれていたら引用成功です!

はてなブログ 作った引用文の例

 

 

 脚注をつける

脚注にしたい部分を指定して、 

はてなブログ 脚注の付け方の例画像

 

赤枠の所をクリックすると、  

はてなブログ 脚注ボタン

 

編集画面では(( ))で挟まれた表示になります。

はてなブログ 脚注の例


プレビューを見てみると *1 と表示され

はてなブログ 脚注の例

 

記事の一番下に⇩表示される様になりました!

はてなブログ 脚注の例


 あとがき

今回ツールバーの使い方を記事にしてみて、

改めていろいろな事が出来ると思いました (*^^*)

文章を上手く書ける方だったら使いこなせるのではないでしょうか?

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。