Bloggerのカスタマイズ｜会話式ブログ

楽しそうなブログに見える？

ブログに派手さが必要だとは考えていませんが、撮影した写真やキレイな画像を使っているブログを見るとやっぱり見栄えがするなと思います。

見る人にしても、楽しそうなブログの方が読む気になるとも思います。
著名なブロガーや秀逸なアフィリエイトサイトは、ファーストビューにインパクトがある気もしますよね。

WEBに慣れる意味も含めて、吹き出しを使う会話式の実装をやってみました。

会話用のアイコン素材をつくる

アイコンはブログ練習の意味合いもあったので、画像はなんでもよかったのですが、Illustratorを触れるので頑張って描きました。

もう少しキャラクターみたいにしたかったんですけどね。だって、パンダってもっとかわいいと思うんですよ。なんか意地悪パンダに見えるし。



大変だったのはアイコンのサイズ調整です。だ～れだで使用した「でしゃばりくま」はイラストのみの余白なし状態なので、画像指定をしたらドアップになりました。

文頭の会話で使用した「控えめくま」はアイコンに納まりました。余白の参考までにアイコンにしたくまをアップしておきます。

サイズは大きすぎると読み込みが遅くなりそうなので小さめにしましたが、最適なサイズの感覚がまだわかりません。。。

でしゃばりくま 控えめくま

Google フォト 

話はそれますが、記事に画像を挿入するようになって気づいたことがあります。
記事を書き、「画像の追加」からアドレスをコピーして指定画像の設定しようとすると、「Google フォト アーカイブから」という項目があります。

いつの間にかGoogleフォトも使うことになりました。無料なのはうれしいですね。
ただ、画像の大きさが分からなかったので、不必要にアップロードしたサイズ違いの画像がたくさんあります。

写真や動画を削除すると、同期しているすべての端末からも削除されるので注意が必要とのこと。試行錯誤でやっているので整理が追い付かないです。

見栄えのするブログにしようと考えたら、アイキャッチとして著作権フリーの画像やイラストの使用を考慮してもいいかもしれません。

画像を多用するブログは、Photoshopなどの画像編集ソフトが必須になりそうですね。
画像のサイズ調整はペイントでしていたので疲れました。

会話形式の実装

カスタマイズするときは、HTMLをいじる・いじらないに関係なく、バックアップは必ず取るようにしています。

参考にしたのは、ヤマチヨさんのブログです。
Bloggerで使える「吹き出し」で会話形式の記事を書く方法
詳しく書かれているので助かりました。

BloggerテーマにCSS追加、記事のHTML形成で会話編集

・CSS追加
CSSは、PC用とレスポンシブ用の記述があります。

【Bloggerダッシュボード】「テーマ」→「HTMLの編集」でHTML内のPC用とレスポンシブ用、それぞれ対応するところに追加しました。

/*--------------------------------------*/
/*****会話のCSSここから*****/
.talk-wrap{
 display: block;
 clear: both;
 margin:0 auto 3px auto;
 }
.talk-wrap p{
 margin:0;
 }
 .left-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 background: no-repeat;
 background-size: 180%;
 background-position: center;
 float:left;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa;
 border: 3px solid #fff;
 margin-bottom: 10px;
 }
 .talk-left{
 float:right;
 position: relative;
 background: #fff;
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa;
 margin-bottom: 10px;
 }
.talk-left:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #666;
 position: absolute;
 left: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-left:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-right-color: #fff;
 position: absolute;
 left: -16px;
 top: 25%;
 margin-top: -8px;
}
 .right-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius:50%;
 background: no-repeat;
 background-size: 180%;
 background-position: center;
 float:right;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa;
 border: 3px solid #FFF;
 margin-bottom: 10px;
 }
 .talk-right{
 float:left;
 position: relative;
 background: #fff;
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa;
 margin-bottom:10px;
 }
 .talk-right:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #666;
 position: absolute;
 right: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-right:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-left-color: #fff;
 position: absolute;
 right: -16px;
 top: 25%;
 margin-top: -8px;
}
.talk-end{
 clear:both;
}
/*****会話のCSSここまで*****/
/*--------------------------------------*/

/*--------------------------------------*/
/*****会話のCSSレスポンシブ設定*****/
@media screen and (max-width: 480px){
 .left-icon{
 width: 80px;
 height: 80px;
 }
 .talk-left{
 width: 65%;
 }
 .right-icon{
 width: 80px;
 height: 80px;
 }
 .talk-right{
 width: 65%;
 }
 }
 @media screen and (max-width: 380px){
 .left-icon{
 width: 60px;
 height: 60px;
 }
 .talk-left{
 width: 65%;
 }
 .right-icon{
 width: 60px;
 height: 60px;
 }
 .talk-right{
 width: 65%;
 }
 }
/*****会話のCSSレスポンシブここまで*****/
/*--------------------------------------*/

・会話の記述
記事内の会話は、記事の「HTML」形式で編集する必要があります。

下記のコードを記事のHTML形式にコピーし「画像のURL」の設定と「ここに左（右）の会話に書く」を記述します。

画像のアドレスはグーグルフォトなどでアップした任意の画像を、右クリックして画像アドレスをコピーすれば大丈夫です。

<!--左の会話-->
<div class="talk-wrap">
<div class="left-icon" style="background-image: url('画像のURL');">
</div>
<div class="talk-left">
ここに左の会話を書く
</div>
</div>
<div class="talk-end">
</div>

<!--右の会話-->
<div class="talk-wrap">
<div class="right-icon" style="background-image: url('画像のURL');">
</div>
<div class="talk-right">
ここに右の会話を書く
</div>
</div>
<div class="talk-end">
</div>

・本文が会話に追加された
会話の後に本文を記述しプレビューを見たら、会話に追加。。。

どうやら</div>の位置が違ったみたいで、「HTML」形式で文末にあった</div>を会話の後に戻したら解消しました。

・会話形式の後にスペースが欲しい

会話形式ではなくて、セリフは一人だけど、心の声や突っ込みに使っているブログもありますね。ポイント、ポイントで使えばやっぱり目が移るので効果的だと思います。