こんにちは、クラインフェルター症候群のタクです。長いので下記KSと略します…と言いたいところですが、今回はKSまったく関係ないので使うことはないでしょう。
実は最初超まじめな記事を書いてたんですが、途中から
「俺のブログ読みにくすぎワロタ」
とネガティブモードになったので、一旦中断してデザイン記事を書くことにしました。
見出し（中）
見出し（中）
これなら一発で見出しだとわかりますね！
↓タグはこんな感じ
<h3 style="width:65%;background:#fee1fc;-webkit-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #ffc0cb,15px 15px 1px -4px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px fee1fc,15px 15px 1px -4px rgba(0,0,0,0.2);box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fefee1,15px 15px 1px -4px rgba(0,0,0,0.2);padding:15px;margin-left: 20px;">中見出し</h3>
見出し（小）
見出し（小）
<h4 style="width:70%; border-bottom: 2px solid green; padding-top: 5px;padding-left: 10px;margin-left: 17px;padding-bottom: 5px;">小見出し</h4>
元々の色がピンクと赤の中間色のような可愛らしい色だったんですが、緑は癒しの効果を与えるってことで緑に変えちゃいました。
上のタグの、<h4 style="width:70%; border-bottom: 2px solid green;
会話形式も入れる
今まで自分語りのコメントは「」で使ってたけど、流行りの会話形式がアメブロ様でも使えることがわかったんで採用しました。
これは見てて楽しいし、華やかになるからマジでおすすめ。
会話形式ならこんなふうになるよ。オシャンティ！
KSって結構暗いネガティブな話が多くなりがちなので、それを和らげたくて可愛らしいイラストを自分の分身にしました。
体型も俺に似てる
タグはこんな感じ
<div class="topic" style="display: flex;"><!-- この行からLINE風吹き出し（左から） --> <div style="width: 20%; margin-right: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 20px 20px 0; border-color: transparent #e0e7fa; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #e0e7fa; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（左から） --> <p> </p>
でも何故か吹き出しが上手くいかない。テンプレートのせいなのかな？
もう少しバリュエーションを増やします。
ネガティブ担当のデビルくんだぜ！よろしくな！
デビルくんを採用しました。この子にはマイナスな発言を担当してもらおうと思ってます。
タグはこんな感じ
<div class="topic" style="display: flex; flex-direction: row-reverse;"><!-- この行からLINE風吹き出し（右から） --> <div style="width: 20%; margin-left: 3px;"> <p style="text-align: center; margin: 0;">ここに画像</p> <div class="l-text-center" style="font-size: 12px; font-weight: bold; text-align: center; margin: 0;">ここに名前</div></div> <div style="width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent #71f520; transparent transparent; margin-top: 20px;"></div> <div style="width: 70%; margin: 0;"><div class="l-p-l" style="min-height: 50px; background: #71f520; border-radius: 12px; padding: 15px; margin: 0;"> <p class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 0;">ここに会話文</p></div></div></div><!-- この行までLINE風吹き出し（右から） --> <p> </p>
更にもう１人（？）
ポジティブ発言担当の天使ちゃんです
実際問題３体も使うことはまず無さそうだけど、まあ良しとしましょう。
ちょっと色がクドい気もするが…。
上に戻るボタンの追加
ブログとかによく設置されてる、上に戻るボタンを設置してみました。
赤枠で囲んでるボタンをクリックすれば一瞬で一番上に戻るので、読み手も少しは読みやすくなった。はず…。
タグはこんな感じ
<div style="position:fixed; bottom:30px; right:30px; z-index:10;">
<a href="#" style="color:#999999; text-decoration:none;">
<span style="border:1px solid #999999; border-radius:10px; padding:15px 12px; background:#ffffff; box-shadow:2px 2px 2px #cccccc;">▲</span>
</a>
</div>
アメブロはHTMLが弄れないから苦戦したけど、フリースペースプラグインからやれば良いことに２時間触ってから気づきました。
記事ヘッダー画像の追加
見栄えがよくなるのでこれからは画像も載せますかね。
やっぱり画像って大事ですね。書いてて楽しいから、モチベーションもアップ。
関連記事とテーマの追加
記事の最後に関連記事を表示するよう設定してみました。
ついでにテーマも。これでクラインフェルター症候群の記事が見やすくなったんじゃないでしょうか。
画像貼らないと見にくいけどな…。
まだ弄りたい箇所はいくつかあったんですが、あまりカラフルにしても目に優しくない気がするのでここまでにします。
これで読み手に少しでも優しい記事になると良いんですが。