キオレオピンぶろぐ

皆さんと共感し合えるような場になれますように!

〈初心者必見〉iPadで吹き出しっぽいCSSをデザインしてみた!

f:id:kioreopin:20190704150626p:plain


どうも、バリバリ初心者ブロガーのキオレオピンでございます。

 

今回は吹き出しを使って会話っぽくすることに取り組んでみたので、そちらの設定方法などを書いてみたいと思います。

 

こーんな感じ!

 

 

「設定する前に」

初心者ブロガーにとっては特に、ネタを考えることから構成を考え、書き終えるまでが本当に大変ですよね😅

私も日々葛藤しながらもこの記事を書いているのであります。笑

 

ブログを始めて1ヶ月半経ち、現時点で30記事ほど生産したのですが、私はここらへんで「デザイン」にもこだわった方が見て下さるユーザーの満足度が上がると考え取り組んでみようと思いました!

 

実際に取り入れてみた結果なのですが、かなり見栄えが変わりました。

どう変わったかというと、文字と写真(動画)だけだと文章だらけで強調したいところが分かりづらくなってしまうことや、文字をダラダラと並べると読んでいて飽きてしまったり関心が薄れやすくなってしまうというデメリットが、かなり緩和されたように思います!

 

このような会話形式を使っている多くの記事を見ていると、

①大半を吹き出しを使って会話形式で進めていき、要所要所で文章で説明

②大半を文字で説明→最後に会話形式でより分かりやすく

 

という流れで書いているサイトが多かったです。

多いだけあって、とても見やすく、会話形式にすることで内容もスッと入ってくると感じます!

特に、私が主に書いているような技術系についてのサイトだと文章が多くなりがちで、ユーザーにとってどうしても見にくいサイトになりがちだと思うのですが、会話形式の部分があるだけでかなりリラックスして見ることができるメリットがあるのです!

 

勉強よりゲームの方が興味湧きやすいのと同じだね。

そうかもね。ユーザーにとって見やすいサイトを作ることは、サイト運営者にとって必須だと言えるよ!

このサイトはまだまだだなぁ。

頑張ります。。。

 

 

「設定の仕方」

私はこちらの記事を参考にしました☟☟☟ 

saruwakakun.com

 

こちらに紹介されている手順に沿って進めれば誰でも会話形式を使うことができますし、他のデザインも使用できるようになるのでかなり参考になります。

 

基本の手順は同じだったのですが、「画像を設定する時」の説明がiPhoneiPadでの設定画面と少し違ったので、iPhoen・iPadでの設定方法を紹介しようと思います!

 

僕のデザインどうですか?

 

iPhoneiPadでの画像設定方法 」

◉まず初めに写真を「はてなフォトライフ」にアップロードする作業からです

 

・自分のサイトのトップページで右上「Hatena」をタップ

f:id:kioreopin:20190621002827p:image

 

・「アップロード」をタップ

f:id:kioreopin:20190621004335p:image

 

・ここをタップ

f:id:kioreopin:20190621004354p:image

 

・フォルダまたは写真を撮ってアップロードする

f:id:kioreopin:20190621004430p:image

 

 

◉次に<image>タグコードの取得方法です

 

・取得したい写真をタップ

f:id:kioreopin:20190621003236p:image

 

チェックボックスにチェックを入れて、「ブログに貼り付ける」をタップ

f:id:kioreopin:20190621004926p:image

 

・コードが表示されるので架線部分をコピーする

f:id:kioreopin:20190621004704p:image

・これで<image>タグコードの取得が終わりです。

 

 

※コピーしたコードはHTMLのテンプレートに追加してメモなどに貼っておくと、後は「文章を入れる」の部分に文章を打ち込むだけなので、すぐに使えて便利です☟

f:id:kioreopin:20190621005241p:image

 

初心者にとってはテンプレートがあるのは本当にありがたいよね!

楽チンだー♪

 

「まとめ」

今回は初心者ブロガーまたはまだデザインCSSをいじっていない人向けの内容でした。

 

見た目を変えるだけでもかなりサイトのクオリティが上がっていき、より多くの人の興味を引くことができるようになるでしょう!

 

文章を考えることに精一杯で中々CSSを使ったデザイン編集に手をつけられない人も多いと思いますが、記事が20、30個ほど書けたら一度設定してみるのもいいかもしれません。

 

ユーザーの満足度が向上し、ブログを書く時のモチベーションの向上になると私自身感じています!

 

 

ポチッとお願いします☟

ブログランキング・にほんブログ村へにほんブログ村