のんびりよりみちきっぷ

考えた事や実施したことをのんびりと。

【備忘録】コピペで簡単に。ブログの見た目を変えて読みやすくするHTML

スポンサーリンク

こんにちは。

 

ブログ記事を書いているときに「ここはこんなデザインにしたい」というように、部分的にデザインを変えたい場合が結構あります。

 

ただ、毎回「どうやるんだっけ?」とあまり使っていない物は、すぐに忘れてしまうんですよね。

 

なのでよく使うHTMLをまとめておきます。

 

このブログははてなブログを使っているので、もともツールとして持っている「目次」や「文字の大きさ・太字」などの変更は含めていません。

 

ページ内リンク

リンク元

<a href = "#アンカー名称">文字</a>

例:<a href = "#anchor1">アンカー1に飛びます</a>

 

リンク先

<要素 id = "アンカー名称"

例1:<h3 id = "anchor1">

例2:<div id = "anchor2">

 

画像

カド取り

<img class=クラス名 style="border-radius: 40px;" title="タイトル名" src="画像ファイル" alt="表示名"/>

 

例: 

f:id:yorimichi_ticket:20171005224225j:plain

 

枠線

<img class=クラス名 style="border: 5px solid blue;" title="タイトル名" src="画像ファイル" alt="表示名" />

 

例: 

f:id:yorimichi_ticket:20171005224225j:plain

 

文字

「関連記事」や「Point」などに。囲み枠線

<div><span style="padding: background: color: "文字列</span></div>

<p style="border: padding: fontsize: margin: background-color: position:">

<a href="URL">TITLE</a></p>

 

例1: 

関連記事

そろそろ初心者から中級者??これからブログの収益を上げるために必要なことを考えた。

 

例2: 

Point

そろそろ初心者から中級者??これからブログの収益を上げるために必要なことを考えた。

 

蛍光ペンのような下線の強調

<span style="background: linear-gradient(transparent **%, #**** **%, #**** **%);>文字列</span>

 

例:<p><span style="background: linear-gradient(transparent 55%, #fafa00 55%, #fafa00 100%);">強調します</span></p>

 

結果:強調します

 

文字に影を付ける

<span style="text-shadow: *px *px *px #****;">文字列</span>

 

例:<p><span style="text-shadow:5px 2px 3px #3bb7ff">影を付けるとこんな感じ</span></p>

 

結果:影を付けるとこんな感じ

 

テーブル(表)を作る

基本的な表

<table>〜</table>テーブルの親要素

<tr>〜</tr>テーブル行

<th>〜</th>テーブルセル

 

例:

<table>
  <tr><th>名前</th><th>特徴</th><th>色</th></tr>
  <tr><td>チョコ</td><td>甘い</td><td>黒茶色</td></tr>
  <tr><td>煎餅</td><td>固い</td><td>茶色</td></tr>
</table>

 

結果:

名前 特徴
チョコ 甘い 黒茶色
煎餅 固い 茶色

 

テーブルの幅を固定して中央寄せ

例:

<table style="width: 300px; text-align: center;">
  <tr><th>名前</th><th>特徴</th><th>色</th></tr>
  <tr><td>チョコ</td><td>甘い</td><td>黒茶色</td></tr>
  <tr><td>煎餅</td><td>固い</td><td>茶色</td></tr>
</table>

 

結果:

名前 特徴
チョコ 甘い 黒茶色
煎餅 固い 茶色

※スマホだとCSSで幅を指定してしまっているので変化していません。 

最後に

とりあえずよく使いそうなのはこんな感じです。

CSSで書いてしまってもいいですが、今回だけデザインを変えるって場合には直接書いてしまった方が楽です。

 

他にも出てきたらここに追加していきます。