• TOP
• ブログ

＜ZELOカスタマイズ記⑮＞吹き出し機能を使えるように設定したはなし

2019-12-26T00:00:00+09:00 2019-12-29T05:44:47Z Blogger ZELO カスタマイズ ブログ

昔の無料ブログにはなかったけれど、今は当たり前に使っている「吹き出し」。

とうきび。も大好きです。（多用しすぎなほど。ぇ( ´ﾟдﾟ｀)）

Wordpressで使っていた無料テーマ「Cocoon」では直感的に設定できたのだけれど、Bloggerではちょっとテクニカルな設定が必要なようで。

ええ、ええ、

吹き出し好きとしてはやらないわけには参りますまい。

今日は「Bloggerの無料テーマ「ZELO」で”吹き出し機能”を使うカスタマイズ」でっす。

ビフォーアフター

ビフォー

※ワードプレスで使っていたもの↓

※Bloggerでテキスト表示させたもの↓

アフター

（左右表示はコードで自由に入れ替えられます）

Blogger「ZELO」で吹き出し機能を使うカスタマイズ

「ZELO」には標準で、「吹き出し機能を使うためのCSS」は設定されているので、それを使えるようにしていく作業です。

（参考）【Orange ZELO】吹き出し機能の使い方

①画像のアップロード

1. フキダシに使う画像をアップロードする用のページを作っておきます
2. フキダシ用の画像をアップロードします
3. アップロードした画像のアドレスをコピーしておきます

②CSSを調整

※かならずバックアップをとってからカスタマイズしてください。

1. テーマから「HTMLを編集」をひらく
2. 「フキダシ」で検索
3. 下記のコードを探す
   .後で使う文字::after {background-image:url(画像URL);}
4. コードを書き換える
   .画像呼び出し用コード（英数字）::after {background-image:url(アップロードした画像のアドレスを貼り付け);}
5. 保存

③記事作成

ZELOのフキダシデザインをカスタマイズ

ZELOに標準搭載されているフキダシのデザインは、このままだとちょっとそっけない印象。

よしっ。

カスタマイズだ！

①HTMLをひらく

※かならずバックアップをとってからカスタマイズしてください。

②編集個所を探す

「フキダシ」で検索

③カラーコードを変更

    /* ---------- フキダシ */

    .entry-content .f-l,

    .entry-content .f-r {

    position: relative;

    width: 70%

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    padding: 16px;

    border-radius: 8px;

    border: 1px solid #FFD54F;

    background-color: #FFD54F;

    z-index: 1;

    }

    .entry-content .f-l {

    margin: 24px 32% 24px 0;

    }

    .entry-content .f-r {

    margin: 24px 0 24px 32%;

    }

    .entry-content .f-l::before,

    .entry-content .f-r::before {

    position: absolute;

    content: "";

    top: 16px;

    width: 11px;

    height: 11px;

    border-right: 1px solid #FFD54F;

    border-bottom: 1px solid #FFD54F;

    background-color: #FFD54F;

    z-index: 2;

    }

④保存

OrangeZELOやPrimeZELOっぽいフキダシデザイン

これで背景ベタ塗り枠線なしの、有料テーマ「OrangeZELO」「PrimeZELO」っぽいフキダシデザインが完成！