SWELLの吹き出しと枠線をSwallowのようにしてみた

2019 11/19
SWELLの吹き出しと枠線をSwallowのようにしてみた

今からお伝えするWordpressテーマ『SWELL
はっきり言って、めちゃくちゃいい!!! です。

WordPress初めてだわって人にも、使いやすくてわかりやすい。
今までWordpressの仕様が変わってから『Classic Editor』を使っていた私でしたが、すんなりと今の投稿管理画面に慣れました。(ここのところのお話がわからない方はすっ飛ばして下さい)

とにかく、小説サイトはシンプルにしたかった私。自分でテーマを作った方がいいかと思い、奮闘するも二週間程度の知識と技術で挑むべきではなくあえなく撃沈してしまいました。
そんななかで出会えた『SWELL』!
これは私のために作ってくれたに違いない……そう勘違いするほどのテーマにうっとりする毎日です。もう表現がおかしくなるくらい興奮しています。

よく使われているテーマから移行するための子テーマも装備されていますし、制作者の了さんは天才に違いありません。
もう、本当に本当にありがとうございます!!
これで私はWordpressテーマを作らなくて済みました!!!

とはいえ、やっぱりお気に入りであったSwallowスワローのデザインも捨てがたい。
ってなわけで、お気に入りのデザインの部分のみ変えてみました!

目次

吹き出しのデザインと色を変更

完成はこのような感じです↓↓

画像
乙女ゲーム風小説サイトで変更しました。

なんと、吹き出しの枠線の色も変えちゃいましたよ♪
子テーマが「STORKストーク」対応なので、吹き出しの形がスワローと異なります。

画像
以前、ストークを使っていた時の吹き出し画像です。結構違いますよね。

こちらの吹き出しデザインをスワローのようにするには、以下のコードを「カスタマイズ」→「追加css」に入力することが必要です。ついでに枠線の色も変えられるようにしておきました!

枠線のデザインスタイル変更コード

/* 吹き出し */
.voice{
margin: 1em 0 1.3em;
font-size: 0.95em;
}
.voice .voicecomment{
border: 5px solid rgba(213, 213, 213, 0.5);
margin-top: 1em;
padding: 2.5%;
position: relative; width:86%;
border-radius: 0 1.2em 1.2em 1.2em;
}
.voice.l .voicecomment{
float: right;
}
.voice.r .voicecomment{
float: left;
border-radius: 1.2em 0 1.2em 1.2em;
}
.voice.l .voicecomment:before, .voice.l .voicecomment:after{
border-right-style: none;
}
.voice.r .voicecomment:before, .voice.r .voicecomment:after{
border-left-style: none;
}
.voice .voicecomment h2, .voice .voicecomment h3, .voice .voicecomment h4, .voice .voicecomment h5{
margin: 10px 0!important;
padding: 0;
}
.voice .voicecomment p{
margin-bottom: 1em;
}
.voice .voicecomment p:last-child{
margin-bottom: 0;
}
.voice .icon{
width: 12%;
text-align: center;
}
.voice.l .icon{
float: left;
}
.voice.r .icon{
float: right;
}
.voice .icon img{
border-radius: 50%;
margin: 0;
border: 4px solid rgba(213, 213, 213, 0.5);
}
.voice .icon .name{
font-size: 0.65em;
padding: 0.4em 0;
}

/* スマホ用吹き出し */
@media only screen and (max-width: 480px) {
.voice .icon{
width: 18%;
}
.voice .voicecomment{
width: 80%;
font-size: 0.95em;
}
}

枠線の色も変更する場合

/* — 吹き出し(枠と背景色変更) — */
.voice.myu .icon img {
background-color: #fff;
border-color: #c4eff2; /*—好きなカラーコードを入力(水色になってます)—*/
}
.voice.myu .voicecomment{
border-color: #c4eff2;
background-color: #fff;
color:#102326;
}
.voice.l.myu .voicecomment:before{
float:right;
border-right-color: #c4eff2;
border-right-style: none;
}
.voice.l.myu .voicecomment:after{
border-right-color: #c4eff2;
border-right-style: none;
}

コードにある「.voice.myu」の「.myu」の部分はお好きなID(名前)にして下さい。
ストークやスワローでの吹き出しコード内で指定するIDとなります。
IDについてやストーク・スワローのカスタマイズの記事はこちら

基本的にアイコンが左に表示される吹き出しのスタイルです。アイコンを右に表示させたい場合は、「.voice.l」の「l」を「r」に、「right」を「left」に変えて下さい。

文章を囲う枠線のスタイルを変更

こちらは先程のように「追加css」への記入と、投稿画面でのコード入力の二つの作業をしてもらいます。

このような枠が作れます。

追加cssに入力するコード

/* 枠 */
.waku{
background:none;
color: inherit;
border: 5px solid rgba(100, 100, 100, 0.15);
border-radius: 0.2em;
padding: 4% 4% 4%;
margin: 20px 0;
border-color: #edece6;
}

投稿画面で入力するコード

<div class="waku">ここに文章を書きます。divが枠線だと思って下さい。</div>

以上が吹き出しや枠線のデザインを変更する方法でした!
SWELL自体の吹き出しのカスタマイズはまた追記します。
こちらは現段階の私の技量ではカスタマイズ出来なかったので、STORK用の子テーマを利用している方に向けて吹き出しのショートコートを記載しておきます。

「voice icon=”画像のURL” name=”アイコンの名前” type=”l”」「/voice」
ここの「」を[ ]に変えて下さい。

一ツ屋有美子@声優小説家
このように表示されます。線の色を変えたい時は、「type=”l 〇〇”」の〇〇に先程設定したIDを入力して下さい

お読み下さり、ありがとうございます^^




この記事が気に入ったら
いいね または フォローしてね!

関連記事

目次