シニアdeアフィリ⑥（記事の装飾、はてなのメリット＆デメリット）

こんにちは
1. ブログの進み具合とアクセス
  1. 「はてなブログ」で複数のサイトを作るには
文章にマーカーをいれる。
アイコンフォントを使う
1. 文字の前にアイコンを付けるhtml↓
2. よく使うアイコンはCSSで登録
はてなブログのメリット＆デメリット
1. メリット
2. デメリット
はてなブログの総評
今回のまとめ

こんにちは

ブログの進み具合とアクセス

２０１９年５月半ば、「はてなブログ」にサイトを追加しました。
「hantenblog」という音楽とギャンブルの話題を書いたブログです。↓

hantenblog

ここでは、雑記風に自身の趣味（ギター、ギャンブル、など）ご紹介します。

ブログを始めてひと月が過ぎ、海外旅行関連のブログを書いていましたが
もっとアクセスを集められるジャンルを探りたくて、ギャンブルと
音楽関連の記事を書いてみる事にしました。

自分の趣味と経験を生かして書き上てみて、我ながらこれは
「いい記事ができあがった。」きっとアクセスがグンと増えるぞ。
と期待していましたが、結果は惨憺たるもの。

旅行ブログより全然アクセスが伸びない。

メインの旅行ブログのアクセスは、一日10～20くらい
サブのブログはと言うと、０～５程度でした。

師匠

自分のライティングスキルを棚に上げてないか？

昭平令

記事を書きながらスキルアップ、です。

どうすれば、みんなに閲覧してもらえるか悩みまくってました。
考えていても中々答えなど見つかりません。
とりあえずは、ブログのボリュームを上げて行こうと
決意するのでした。

「はてなブログ」で複数のサイトを作るには

「はてなブログ」は異なるURLで３つまでサイトを
作ることができます。

別のサイトを作るには「ダッシュボード」を開いて

矢印の「新しいブログを作成」から新たにURLを設定して作ります。

この頃に記事を書く上で勉強してたことを前回に引き続き、
ご紹介します。

文章にマーカーをいれる。

ブログでよく見る蛍光ペンのようなマーカー。

下線だけではものたりない、もう少し文章をオシャレに強調したい
という時に、黄色やピンクのマーカーが使えれば便利ですよね。

まずは「デザインCSS」に次のようなCSSコードを張り付けましょう。

.marker-pink {
background: linear-gradient(transparent 60%, #ffc0cb 60%);
}

.marker-yellow {
background: linear-gradient(transparent 60%, #ffff00 60%);
}

.marker-blue {
background: linear-gradient(transparent 60%, #00bfff 60%);
}

先頭の.marker-pinkはクラス名です。ご自身で覚えやすい単語を自由に決めて
ください。（例：「.mark-p」、「.linepink」などなど）

初めの６０％の部分がマーカーの太さです。数字が小さいほど太くなります。
その横（#00bfff）がカラーコードです。お好きな色を指定してください。

カラーコードの見本は↓

HTML,CSS　カラーコード一覧表　｜　背景色や文字色の設定

HTML,CSS　500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表

そして、はてなの記事編集画面のhtml編集を使い、次のように記述します。

するとこのようになります。↓

アイコンフォントを使う

「はてなブログ」にはあらかじめ「blogicon」がセットされており、
１１８種類のアイコンが使えるようになってます。

（wordpressではFont Awesomeを使う事が多いんですけど、
多少設定が必要になります。）

文字の前にアイコンを付けるhtml↓

このように記述すると

こうなります。

htmlの書き方は、
<span class=”blogicon-アイコン名”> </span>任意の文字
となります。

アイコン名は「Royal Naught」さんのページにある一覧から
選んでください。

 は呪文の様なもの、はてなの場合これを入れないとアイコンが
うまく表示されません。

「Royal Naught」さんのページには念のためaria-hidden=”true”を
付け加えるようになってますが、記述数が多くなり面倒なので
省略しても問題なさそうです。

「Royal Naught」さんで勉強させてもらいました。↓

こちらに、アイコンフォント名とCSSコード名の一覧表もありますので
ぜひご参照ください。

よく使うアイコンはCSSで登録

アイコンフォントの中でもよく使うものは、
CSSコードを「デザインCSS」に記述しておくと便利です。

例えば、

.icon1:before{
font-family: blogicon;
content: "\f017";
}
.icon2:before{ 
font-family: blogicon; 
content: "\f039";
}
.icon3:before{ 
font-family: blogicon; 
content: "\f037"; 
}