ブログ記事HTML?CSS?たまに聞くけどサッパリ・・・でもブログデザインはオシャレにしたいそんな方に向けてお話をしたいと思います。具体的には、上のような吹き出しの文章なんかも『実は簡単に自作できますよ』といった内容で”小難しいことは一切省いて”説明していきたいと思います。(コピペで使えるものも公開します)吹き出し系を簡単に導入できるプラグインは有料だったりするので経費削減にもなっていいかと思いますよ。[ブログアイキャッチなどをオリジナルにしたいなら]ブログの雰囲気をいい感じに変える画像加工ツールもくじHTMLやCSSとは?簡単に説明しますCSS&HTML召喚術をすぐに使えるようになる方法CSSの召喚魔法の巻物はどうやって用意するか?どうやってHTML呪文を唱えるようにすればいいかさっそく、吹き出し風を作ってみる呼び出したいデザインのCSSとHTMLを決めるCSSを入力して召喚可能状態にするブログ記事編集画面にてHTMLで呼び出すサイトのデザインの重要性HTMLやCSSとは?簡単に説明しますまず、用語の解説をしますと以下になります。文章を囲むボックスや吹き出しを入れたりブログ全体のデザインを変えたりすることも可能になるんです。意味がよく分からないと思いますので簡単にいいますとCSSが、召喚呪文の巻物HTMLが、それを呼び出すために唱える呪文の言葉だと思ってください。サンプルこのクリップを召喚する巻物(CSS)には、こんなことが書かれています。2;}そして、これを呼び出す呪文(HTML)がこちらです。class="clip-box-b">テキスト</div>一見難しそうですが、簡単にできてしまう方法があるのでそれをお伝えしますね。ここでは、CSSを呼び出すのがHTMLなんだなとザックリと把握していただければ大丈夫です。※当ブログでは、専門的な知識はほぼ省いています。深く知りたい場合は『HTMLとは?』『CSSとは?』などでググってください。CSS&HTML召喚術をすぐに使えるようになる方法CSSの召喚魔法の巻物はどうやって用意するか?CSSの召喚魔法の巻物は自作できなくもないですが、CSSの専門特化ブロガーでないのでしたらそこに割く時間がもったいないと思います。ここにおすすめのサイトを用意しましたのでよければ活用してください。吹き出し風のCSSを手に入れるならこちらボックス系のCSSを手に入れるならこちら※私の使っている吹き出しでよければ後ほどコピペで使えるものをお教えしますどうやってHTML呪文を唱えるようにすればいいかCSSで吹き出しやボックスを登録しHTMLで呼び出すためにはまずテーマの編集から『スタイルシート(style.css)』に例の長い文章を書き込み、CSSを召喚可能な状態にします。(後ほど詳しく解説します)既にたくさんの暗号のような記述があると思いますが一番下の行から追加でコピペすれば問題ありません。何かあったら嫌・・と言う方は以下のプラグインを導入すると捗ります。CSS』※ワードプレスの方のみですまた、呪文を唱える際にもおすすめのプラグインがあります。それがこちらの『AddQuicktag』です。※同じくワードプレスの方のみこの準備が整ったら早速、CSS&HTMLを使って『吹き出し』を使えるようにしてみましょう。吹き出し風を作ってみる吹き出しを簡単に作れてしまう手順は以下の3つです。ブログ記事編集画面にてHTMLで呼び出す呼び出したいデザインのCSSとHTMLを決めるここからは、CSSを設定しHTMLで呼び出す手順を説明します。この記事の冒頭で使用した、こちらを例にします。HTML?CSS?たまに聞くけどサッパリ・・・まず、これを呼び出す召喚の巻物(CSS)はこちらです。#ffeebf;}そして、これを呼び出す呪文(HTML)がこちらです。</div></div></div>右側に表示させる場合はこちらです。</div></div></div>※『コメ』の部分に喋らせたい文章を入力してください他のサイトから吹き出しやボックスのデザインを使う場合も、必ずCSSとHTMLの記述を書いてくれているはずです。それらをコピペすれば使えます。このCSSとHTMLをどこにコピペすればいいのかを説明します。CSS』をプラグイン新規追加画面で検索し「いますぐインストール」→「有効化」の順にクリックして有効化していただくとワードプレスのダッシュボードの画面のハケのようなマークのところに『カスタムCSS』という項目が増えているはずです。ここをまずクリックします。すると編集画面になるので後は以下の手順でオッケーです。実際に記述するとこんな感じです。これでCSS側の準備は完了です。基本的に順番は関係ないので、ボックスデザインを2個3個と増やしていくときは毎回、最下部にコピペしていけばオッケーです。『テーマ編集』→『スタイルシート(style.css)』の順に移動して同じく一番下の行にコピペしてください。ブログ記事編集画面にてHTMLで呼び出す今度は、記事の編集画面での説明になります。呼び出す場合は、以下のように『テキスト(HTML)モード』に切り替えHTMLをコピペします。毎回コピペしていては面倒ですよね。そこで役立つのが先ほどの『AddQuicktag』というプラグインです。こちらを有効化すると、設定のところに『AddQuicktag』の項目が追加されているはずです。こちらをクリックしてください。次のような画面に移ります。class=”balloon-text-inner”>コメント</div></div></div>3のこりの</div>を貼り付ける4全てにチェックを入れる5変更を保存で完了これでブログ記事の編集画面でボタン一つで呼び出せるようになります。実際に呼び出してみましょう。ブログ編集画面に『Quicktags』という項目が追加されているはずです。ここに先ほど『1』でつけた名前があるはずですのでそれをクリックします。※この時は、テキスト(HTML)モードにしなくて大丈夫です。すると以下のように表示がされるはずです。ここからの手順は以下です。『コメント』の部分を好きな文章に変更すればオッケーです。うまくできてるかしら?こんな具合ですね。使いたいデザインのCSS、HTMLを見つけたら『カスタムCSS』『addquicktag』にそれぞれコピペするだけです。「そもそもサイトデザインって大事なの?」と思われているかも知れません。視覚的に読みやすくなる点で断然有利です。自分が読む人がをイメージしていただくと分かりやすいですが論文のような文字だらけの記事は読者の離脱率が上がります。今回の話で「意外とCSSとHTMLって簡単そうだな」と思われたら色々やってみてください。面倒に感じた人は元から色々使えるテーマを使うのが一番です。僕のオススメはこちらです。種類はありますがどれも一瞬で上級者並みのブログデザインになります。記事の内容より見た目のデザインで”信頼できるサイト”と判断する読者も多いのでそういった読者に効果は絶大です。今回の解説に使った画像の作成・編集はこちらの無料ツールを使っています。コメントをキャンセルメールアドレスが公開されることはありません。名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。無料プラグインを紹介します。05:54アフィリエイトを始めるなら、おすすめの有名ASP6選【比較が大事】アフィリエイトを始めたくてもASPがたくさんありすぎて、どれがいいのか分からない。康介@ko_suke_buz資格:古物、FP古物商許可を取ってせどりをしたり、その情報を発信したりして独立ネットで学んできた知識を活かしてネット副業を始めたい人のためにブログを始めました。ネット副業、ブログ運営術、ライフスタイル(お金、旅行、音楽など)について書いてます。Optimization-.。