HTMLとCSSを追加して読みやすいブログ投稿ページを作ろう

HTMLとCSSを追加して読みやすいブログ投稿ページを作ろう

WordPressを使ってブログを書いている人やHTML、CSSを追加できるブログサイトを利用している人であればオリジナルでHTML、CSSを追加することで読者に読みやすい投稿ページを作成することができます。
ある程度HTML、CSSの知識は必要ですが今回コピペで使えるHTMLとCSSを紹介したいと思います。

運営環境の確認をしよう

ブログサイトを運用している環境によって追加方法が変わってきます。

ワードプレスを使用している人であれば子テーマを追加しておいた方がCSSを追加した際idやclassを設定した時、別の投稿ページにもCSSを使用することが出来ます。

しかし今回は、複雑な設定などをしないパターンのCSSファイルを使用しないパターンで紹介したいと思います。

ワードプレスであれば投稿ページ内の表示を[テキスト]に変更すればHTMLを追加することが出来ます。

HTML、CSSを追加してみよう

外部ページにリンクを飛ばしてみよう!
<a href="飛ばしたいURL">リンク先の名前</a>

打ち消し線を追加してみよう!
<s>テキスト</s>

マーカーを追加してみよう!
<mark style="background: #ffff00;">テキスト</mark>

文字サイズを変えたい!
<p style="font-size: 20px;">テキスト</p>

文字の色を変えたい!
<p style="color: #ff0000;">テキスト</p>

まとめ

今回は、基本的なブログで使えるものを紹介しました。

記事内の文字の色を変えたいことや文字を大きくしたり重要な箇所にはマーカーを付けたいということもあると思います。

HTMLやCSSの技術を身につけてしまえば簡単にこういったものを追加できるようになります。

プログラミングと違って簡単に学ぶことができるのでHTMLとCSSを学んでおいて損はないのでぜひこの機会に学んではいかがでしょうか。