budの株式投資ブログ

個人投資家budがの資産形成日記です。

CSS変更で吹き出しを作ってみた

にほんブログ村 株ブログへ
にほんブログ村 /*1AX吹き出し*/ /*2AX見出し*/ /*3AX目次*/ /*4AX*/ /*5AX*/

今回はブログでよく見る会話形式の吹き出しを作成してみます。
budはC言語を使ったことがありプログラムも少し書いたことあるので楽勝だぜ!!
(多分)

 はてなブログでのCSS変更方法

とりあえずブログを検索してみるとよさげな記事が。このブログを参考にしましょう。

mamazakki.hatenablog.com

 

CSSのコードはコピーして下図の{}デザインCSSに貼り付けます。
コードはネットで探してね😉

 

f:id:bud_2020:20201121064421p:plainf:id:bud_2020:20201121064816p:plain

 コードはクラス形式になってます。C言語しか知らないbudは初めてクラスを使ってみて少し感動しました。(C言語は構造体まで)

 ・実際やってみる

テスト

返す

 ちゃんとできております😁

 

・しかしスマホの壁が

パソコンでは表示できてるのですが、スマートホンには反映されてません。
このご時世スマホに反映されないのは致命的です。なんとかスマホ吹き出しを表現したいです。これを直すには二つの方法があります。しかも無料です。

①レスポンシブデザイン対応のテーマを選ぶ。はてなブログ公式テーマにもレスポンシブ対応のテーマがあります。その場合はテーマを選んで下をチェックするだけでスマホにも反映できます。

f:id:bud_2020:20201121065852p:plainf:id:bud_2020:20201121070034p:plain

 ただこの方法だとテーマのデザインが限られることと、1カラムに向いてて2カラムだと不具合が多そうな事が多そうです。

②パソコンと同じHTMLを表示する方法

下記の設定のPCと同じHTMLを表示するをチェックします。

f:id:bud_2020:20201121065852p:plainf:id:bud_2020:20201121072134p:plain

f:id:bud_2020:20201121072225p:plain

それから、下図の記事上にカスタマイズするCSSを貼り付けます。(記事の冒頭に書いた吹き出しCSSコードです)

f:id:bud_2020:20201121072839p:plainf:id:bud_2020:20201121073039p:plain

この時書き込むCSSは<style>~</style>で囲む必要があります。
これはHTMLにCSSを反映させるための手段のようです。まあプログラミングは手段でなく目的が達成できればとりあえずはいいので、今はそんなもんだと割り切ってに覚えときます。

 

・まとめ

結果スマホにも吹き出しを表現することができました。
今後は吹き出しを多用して少しでも見やすいブログを作りたいと思います!
だんだんHTMLとCSSの構造もなんとなく理解してきたので、そこも勉強していきます。