今回はブログでよく見る会話形式の吹き出しを作成してみます。
budはC言語を使ったことがありプログラムも少し書いたことあるので楽勝だぜ!!
(多分)
・はてなブログでのCSS変更方法
とりあえずブログを検索してみるとよさげな記事が。このブログを参考にしましょう。
CSSのコードはコピーして下図の{}デザインCSSに貼り付けます。
コードはネットで探してね😉
コードはクラス形式になってます。C言語しか知らないbudは初めてクラスを使ってみて少し感動しました。(C言語は構造体まで)
・実際やってみる
テスト
返す
ちゃんとできております😁
・しかしスマホの壁が
パソコンでは表示できてるのですが、スマートホンには反映されてません。
このご時世スマホに反映されないのは致命的です。なんとかスマホで吹き出しを表現したいです。これを直すには二つの方法があります。しかも無料です。
①レスポンシブデザイン対応のテーマを選ぶ。はてなブログ公式テーマにもレスポンシブ対応のテーマがあります。その場合はテーマを選んで下をチェックするだけでスマホにも反映できます。
ただこの方法だとテーマのデザインが限られることと、1カラムに向いてて2カラムだと不具合が多そうな事が多そうです。
②パソコンと同じHTMLを表示する方法
下記の設定のPCと同じHTMLを表示するをチェックします。
それから、下図の記事上にカスタマイズするCSSを貼り付けます。(記事の冒頭に書いた吹き出しのCSSコードです)
この時書き込むCSSは<style>~</style>で囲む必要があります。
これはHTMLにCSSを反映させるための手段のようです。まあプログラミングは手段でなく目的が達成できればとりあえずはいいので、今はそんなもんだと割り切ってに覚えときます。
・まとめ
結果スマホにも吹き出しを表現することができました。
今後は吹き出しを多用して少しでも見やすいブログを作りたいと思います!
だんだんHTMLとCSSの構造もなんとなく理解してきたので、そこも勉強していきます。