【保存版】ブログを書く上で知っておきｓｓたい要素を詰め込みつつ、継続力も養えるテスト用のテンプレ記事

これは、はてなブログを書いていく上でのテンプレのようなテストのようなそのような記事になりますので、内容は無さそうで実はあります。新しい技術を試したり、色々と実験をしていく上で非常に使い勝手の良い記事が必要であったので、このようなモノがそんなこれが、あれがこうしてこれになります。語彙力壊滅、支離滅裂。どうもありがとうございます。

ブログを継続するために必要な要素

かれこれ長い間放置していましたが、そろそろブログをガチろうと決心したのです。(何回目)　なのでブログを継続するために重要なポイントをいくつかあげ、毎度読み返し自己研鑽に努めようという事です。

1. 優先順位を一番上に

もう何よりも「まずブログを1記事書く」までは他のことにはなにも手をつけてはいけないと言う事。情報収集や動画鑑賞はもちろん、スマホを触るなんて言語道断です。

2. 旬なモノを瞬時に

情報や感情には鮮度があります。一番HOTな時に旬なモノを提供し、湧き出てきた瞬間にすぐ書き留める。後でやろうは馬鹿野郎。鮮度が落ちた時点で書き手の意欲も駄々下がりしているので、モチベーションを維持するのが難しくなります。湧き出た瞬間に、瞬時に書き始めましょう。

3. 邪念無効化スキルを事前に

せっかく決めたご立派な指針があっても、それを破り楽な方へ楽な方へと堕落していくのが人間というもの。ブログ執筆以外の誘惑や邪念が生まれた瞬間に、「それらを無効化するスキル」を、自動で発動するよう予めプログラミングしておきます。これでもう安心ですね。立派なブログ執筆BOTの完成です。

・発動タイミング

気づいた瞬間に即座に瞬時に迅速に。

・起動タイミング

起床し脳が通常運転を開始したら。

・停止タイミング

ブログを書き終え最終チェックを終「公開」し終えた時点で。複数記事の場合は規定数の記事を「公開」し終えた時点で。

画像を含んだ場合のパターン

ライトモードのみであればあまり関係ない話なのですが、ダークモードに対応するとなると画像の明るさが問題になってきます。

1. 明るめの画像をこちらに

f:id:kanae-alex:20200621230240p:plain

ダークモード中に明るめの画像が来ると一気に眩しくなり不愉快ですよね。なので少しだけ透過させます。「 opacity: 0.7; 」だとこんな感じ。（画像をクリックor長押しで本来の輝度で表示されます）

視認性は下がってしまいますが、見えなくなるわけではないですし、眩しさが軽減されることを考えれば十分にアリですよね。

2. 暗めの画像をこちらに

f:id:kanae-alex:20200621230041p:plain

こちらのような暗めの画像はわざわざ透過しなくても眩しく無いので、視認性が下がる分少しもったいないですが、たった一行cssを追加するだけで眩しさを軽減できると考えれば、マイナスを補って余りあるのでは無いでしょうか。

3. 背景を透過した画像をこちらに

f:id:kanae-alex:20200403002749p:plain

モノにもよりますが、背景を透過すればモードを問わず馴染むので悪くないかも。併せて画像のサイズ（横幅）ですが、アイキャッチのみ横幅いっぱいにして、記事内のものはコンパクトに押さえることでバランスを取りました。

画像メインのサイトや少ない枚数で ”画像を魅せる” ようなブログであれば全てをディスプレイサイズいっぱいにした方が良いですが、このブログのような場合はアイキャッチぐらいで丁度良いかなと。少し角を丸めて(border-radius: 3px;)印象を柔らかに。

各種パターン

1. 引用

引用する場合は、引用元のリンク付きで記事タイトル&サイト名を記載するようにしましょう。

もう何よりも「まずブログを1記事書く」までは他のことにはなにも手をつけてはいけないと言う事。情報収集や動画鑑賞はもちろん、スマホを触るなんて言語道断です。

【保存版】ブログを書く上で知っておきたい要素... - STRAWBERRY

2. コード

CSSやHTMLを記載したい場合に使います。「 > 」「 < 」「 & 」などはタグとして認識されてしまうので、エスケープする必要があります。

 font-family: "Font Awesome 5 Free";
 content: '\f10d';
 position: absolute;
 top: -25px;
 left: 0px;
 color: #3c78a18c;
 font-size: 30px;
 font-weight: 900;

Font Awesome というサイトで使いたいアイコンを探し、「content: '\○○○○'; 」にコードをコピペして使用します。