にせもんのホンモノ

普通の人"にせもん"による雑記ブログ

最初に書いた記事が酷かったのでリライトする|にせもんのホンモノ

f:id:nisemon_honmono:20190721235236p:plain

昨日は参議院議員選挙

もちろん、わたしも行ってきましたよ!

テレビをつければ選挙速報ばかりで子供達はウンザリしてましたが・・・。

 

さて、土日は家事の手伝いをしがなら昔の記事をリライトしていました。ブログを始めてもうすぐ一年経ちますが、久し振りに読んでみると酷いですね。。。

最初のブログなんてたった3行!

 

"ブログはじめました"

"色んな記事を書いていきたいです!"

"よろしくお願いします!"

 

ヒドイったらありゃしない!

 

リライトしましたのでご覧ください。

nisemon-honmono.hatenablog.com

 

いくつか試してみた

せっかくリライトするんだし、これまでの経験を生かそうとHTMLやCSS、新たな取り組みを盛り込んでみましたので紹介します。

 

自己紹介を盛り込む

プロフィールは最初から設定していますが、名前やブログ名の由来は書いていませんでした。(文章が長くなるので)

なので、最初の記事で整理しました。

 

Canvaをフル活用する

先日紹介した Canva

使ってみると結構便利なので今回もフル活用してみました。文章をただ羅列するより写真やイラストを織り交ぜると印象良くなりますよね!

nisemon-honmono.hatenablog.com

 

HTMLやCSSでリンク設定

最近覚えたHTMLやCSSでリンク設定してみました。ブログ開設初期の頃から比べると随分読みやすくなったんではないでしょうか?まだまだ改善点は多いですけどね…。

 

ブログを階層化

ホームページやサイトでは、TOP>カテゴリー>〇〇>△△といった具合に階層化しているので複数ページを閲覧しやすい構成になっています。

 

ブログでも階層化できないかな? 

ブログは新着記事のみアップされますが、たいてい1記事読み終われば離脱というパターン。できれば2記事、3記事と複数記事読んでほしくないですか?

カテゴリーの中に人気記事などをリンク設定すれば、新規ユーザーの回遊性が高まらないかなーって試してみました。

 

自己紹介記事>カテゴリー>人気記事>リンク記事・・・

TOP>カテゴリーor人気記事>リンク記事・・・

 

ブログでは回遊性を高めるのは難しいかもしれませんが、やっぱり色んな記事を読んでほしくないですか?

 

これでアクセス数が増えれば嬉しいですけどね。

 

最後まで読んでいただき、
ありがとうございます! 

===========================
ブログランキングに参加中です!

励みになりますのでポチッとしてください!
===========================

にほんブログ村 サラリーマン日記ブログへ
にほんブログ村


日記・雑談ランキング

 

素敵なWebデザインへの第一歩!HTMLの基本的な役割を知ろう|にせもんのホンモノ

f:id:nisemon_honmono:20190716234004p:plain

HTMLの基本的な役割を知ろう

Webページを作成するのに重要な「HTML」

テキストや画像をタグづけすることにより、その意味を明確にさせて人間にもコンピュータにも理解できるドキュメントの構造を作るのがHTMLの役割です。

普段何気なく利用している段落や装飾もHTMLによって構成されているため、役割をキチンと理解して分かりやすいWebページを目指しましょう。

 

HTMLの一般的な書式を理解する

記事を書く中で”段落や装飾がおかしいな”と思ったことはありませんか?
もしかするとHTMLタグが原因かもしれません。

ここでは、一般的に用いられる基礎的なHTMLタグを改めて理解し、記事全体をよりまとめやすくすることを目的としました。タグの適用範囲や効果的な手法など日頃の疑問が解決できれば幸いです。

 

見出し・段落・改行

見出しや段落タグは文章を書く基本。

慣れてくるとスラスラと文章が書け、文字数も増えてくると思います。 

タグ 意味 使用例
< h1 >~< h6 > 見出し < h3 >見出し(大見出し)< /h3 >
< p > 段落 < p >この文章で一行です< /p >
< /br > 改行 キリがいいので< /br >改行します

けど少し待ってください!

アナタの記事は読みやすく整理されていますか?文章を分かりやすくするために見出しや改行を効果的に活用しましょう。

 

見出しによる効果

見出しを活用することで文章が区分されて読みやすくなります。さらに見出しはキーワード検索するときに有効となるので積極的に活用することをオススメします。

 

文字サイズ・文字の装飾

文字サイズや文字の装飾は文章にメリハリをつける必須。

長い文章がだらだら続くと飽きてきますよね。大事なところ強調も必要です。 

タグ 意味 使用例
font-size 文字の大きさ < span style ="font-size: 200%;">文字のサイズを大きく< /span >
< strong > 文字を強調 < strong >太字にする< /strong >
< em > 斜め文字 < em >斜め文字にする< /em >
< u >または
underline
アンダーライン < u >文字の下に線を引く< /u >
< span style ="text-decoration: underline;">文字の下に線を引く< /span >
< s >または
line-through
取り消し線 < s >取り消し線を引く< /s >
< span style ="text-decoration: line-through;">取り消し線を引く< /span >

 

まとめ

今回は一般的に用いられる基礎的なHTMLタグを紹介しましたが、HTMLは起点と終点があることをしっかり覚えておきましょう。プレビューで文章や装飾がおかしいと思ったときは始点(または終点)位置がズレている可能性が高いです。

Webサイトやブログを沢山読んで、良いところがあれば真似してみるのもアリかもしれません。HTMLタグを使いこなして読みやすい文章を作成しましょう!

 

最後まで読んでいただき、
ありがとうございます! 

===========================
ブログランキングに参加中です!

励みになりますのでポチッとしてください!
===========================

にほんブログ村 サラリーマン日記ブログへ
にほんブログ村


日記・雑談ランキング

 

色彩検定(2019年度夏期検定)合格発表!無事3級合格しました!!

f:id:nisemon_honmono:20190718210801p:plain

7月17日は色彩検定【3級】の合格発表日

 

色彩検定協会HPにて合格者の受検番号が掲載されましたね。

色彩検定協会/カラーコーディネーター

 

合格してたーーー!!

ホントよかった・・・
といっても3級なんですけど。

 

今回の色彩検定【3級】合格ラインは140点/満点200点だそう。

前から思ってたけど、7割以上正解しないといけないってハードル高くない?
問題数も多くて時間ギリギリだったので正直言って自信がなかった。

 

合格者には合格証書が送付されるようですが、受験番号を勘違いしてて不合格通知が来るなんてオチがないよう祈っておきます!

  

 

最後まで読んでいただき、
ありがとうございます!

 

===========================
ブログランキングに参加中です!

励みになりますのでポチッとしてください!
===========================

にほんブログ村 サラリーマン日記ブログへ
にほんブログ村


日記・雑談ランキング