はてなブログの引用、そのままだとさみしくないですか？
html？CSS？……調べれば調べるほど分からなくなる…
自分は四苦八苦したので、分かりやすくまとめてみます。
※環境 はてなブログ無料版 Android端末でブラウザからPC版サイト表示
※基本見たままモードで書く初心者向けです
1.引用文を書き、はてなブログの引用ボタンを押す
2.HTML編集にする
↓開くとこんな感じのはず↓
<blockquote>
<p>世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。</p>
</blockquote>
↓表示↓
世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。
3.下記のマーカー部分を追記
↓黄色いマーカーのところを足す↓
<blockquote style="background-color: lightgray;">
<p>世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。</p>
</blockquote>
↓表示↓
世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。
※赤文字「iightgray」を変えれば、その背景色になります。
上記の様なサイトから引っ張りましょう。#d3d3d3のような表記でも大丈夫です。
4.必要なら背景に丸みを足す
↓赤マーカー部分を足す↓
<blockquote style="background-color: lightgray; border-radius: 10px;">
<p>世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。</p>
</blockquote>
↓表示↓
世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。
※青字「10px」をいじれば丸みが変わります
5.必要なら出所表記し、サイトタグをつける
↓青マーカー部分を足す↓
<blockquote style="background-color: lightgray; border-radius: 10px;">
<p>世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。</p>
</blockquote>
<p><cite>リンスりんす,2023/12</cite></p>
↓表示↓
世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。
リンスりんす,2023/12
6.必要ならはてなブログの機能で整える
引用文を太字に、出所表記は右寄せ、文字サイズを小にしました
↓表示↓
世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。
リンスりんす,2023/12
if.出所も囲いの中に入れるなら
↓先程作った6.必要ならはてな〜のhtml↓
<blockquote style="background-color: lightgray; border-radius: 10px;">
<p><strong>世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。</strong></p>
</blockquote>
<p style="text-align: right;"><span style="font-size: 80%;"><cite>リンスりんす,2023/12</cite></span></p>
↓赤文字を切り取り後ろに貼り付ける↓
<blockquote style="background-color: lightgray; border-radius: 10px;">
<p><strong>世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。</strong></p>
<p style="text-align: right;"><span style="font-size: 80%;"><cite>リンスりんす,2023/12</cite></span></p></blockquote>
↓表示↓
世界は広い、でもお前の心の方が広いと思う。だって、そう思ったから、だって、別に良いじゃん。
リンスりんす,2023/12
ほか諸々もいじりたければ、「CSS」というキーワードで調べられると思います。
記事内で説明したものは「htmlの要素タグ内にCSSを記述する」という方法みたいです。
自分も勉強中です…
PR 前回記事
にほんブログ村