はたらきアリの節約コンシェルジュ

「手取りアップ作戦」を実行中。手元に残せるお金を増やす方法について書きます!

はたらきアリの節約コンシェルジュ

  •  

【はてなブログ】吹き出し調記事の挿入をカスタマイズしました

スポンサーリンク

f:id:finana:20190612005601p:plain

 こんばんわ。はたらきアリです。@hatarakiari0818

 

ここ最近、はてなブログのカスタマイズにハマっていました。

 

はてなブログのテーマは【ZENO-TEAL】を利用していることは前の記事でも述べましたが、非常に人気のあるテーマデザインです。

 

 そしてインターネットの賢人の力を借りまくってカスタマイズをしていったのは前の記事の通りです。

www.worker-ant0818.work

 

 そして今回はその総仕上げともいうべき、2つのカスタマイズをすることで私的にはワードプレスに近づけたと思っているのです。笑

 

 

寝る間を削りまくってカスタマイズのしたのが以下になります。

※ボトムナビゲーションは次回の記事にさせていただきます。

 

  

はてな記事に吹き出し調の文章を挿入

 

以前から気になっていたんだよなぁ~はてなだとこんな吹き出し作れないもんなぁ~

 

吹き出しはワードプレスしか無理だって!はてなは簡単なデザインしか作れないんだから

 

はい!

 

作ることが出来ました。

 

なんていい感じの吹き出しなのでしょう。会話調からの記事作成。 

 

ワードプレスのサイトならよく見るこのやり取り。

 

初心者向けの記事作成には欠かせないこの吹き出し。見事にはてなブログでも設置することが出来ました。

 

このカスタマイズにあっては以下のサイトを参考にさせていただきました。

www.notitle-weblog.com

※以下、サイトの記事から吹き出しの設置方法を引用させていただきます。

 

CSSとChrome拡張を使って会話形式の記事を書く

 

Google Chromeの拡張機能を設置

 

まずは、はてなブログの見たままモード編集を補完するGoogle Chromeの拡張機能を設置します。

 

Chrome Add-on for Hatena – Chrome ウェブストア

使い方の説明はこちら。

はてなブログ編集用のChrome拡張機能を作りました(使い方の説明) | SHIROMAG

このChrome拡張は、h2タグでの見出しやテキスト・画像の中央寄せが簡単にできます。しかし、この拡張機能の一番の目玉は、pタグにclassを挿入することができる点です。

今回はこれを使います。Chromeに追加しておいて下さい。

 

CSSにコードを追加

 

下記のコードをデザイン→カスタマイズ→デザインCSSにコピペするのですが、コードの一番下にある項目は、ユーザー自身で書き換える必要があります。

一旦メモ帳か何かにコピーして、書き換えてからペーストすると良いでしょう。

/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

 

書き換えるのは一番下の「クラス名」の部分と「画像のURL」の部分です。

「クラス名」には分かりやすく覚えやすい名前を付けて下さい。

クラス名で使用できる文字は、半角の英数字、ハイフン( – )、アンダーバー( _ )です。アルファベットで始めなければなりません。(数字や記号で始めてはならない)

固有名詞をアルファベットで書くのがおすすめかな。他とかぶらないから。

はてなフォトライフの画像を使う場合は、使いたい画像のページ(↓↓このページ)に行って、「右クリック」→「画像アドレスをコピー」して上記コードの「画像のURL」の部分にペーストして下さい。

f:id:finana:20190612005829p:plain

【例】

.shiroma::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiromatakumi/20160908/20160908183210.png);}
.xevra::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiromatakumi/20160923/20160923232839.png);}

一度CSSに追加しておけばあとは簡単。記事で使う方法をこの後紹介していきます。

.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

このコードはクラス名が重複しなければ、いくら増やしてもOKです。今後使いそうな人物やキャラをどんどん追加しておきましょう。

 

見たままモードでChrome拡張機能を使ってみよう

 

上の設定が完了したら、後は簡単です。まず、吹き出しにしたい文章を選択します。

f:id:finana:20190612010018p:plain
選択したら、ブラウザの右上にあるChrome拡張のボタンをクリックしてポップアップを出します。

f:id:finana:20190612005936p:plain

吹き出しを左側(画像が右側)にしたい場合は「l-fuki クラス名」と入力して「Add Class」をクリック(EnterキーでもOK)します。「l-fuki」と「クラス名」の間には半角スペースを空けて下さい。  

 

吹き出しを右側(画像が左側)にしたい場合は「r-fuki クラス名」と入力して「Add Class」をクリック(EnterキーでもOK)します。「r-fuki」と「クラス名」の間には半角スペースを空けて下さい。 

 

クラス名というのは、CSSで付けた任意のクラス名です。表示する画像と紐づいています。表示したい画像のクラス名を入力して下さい。見たままモードの編集画面では変化しているように見えませんが、プレビュー画面で見るとちゃんと吹き出しがついて会話形式になっているのが分かります。

 

最後に

 

以上のようにはてなブログでは不可能と思っていた吹き出し記事をはてなブログでも設置することが出来ました。

 

これはずっと探していた記事作成方法だったので、とても嬉しかったのです。

 

最後にこの記事を書かれていたSIROMA様に改めて感謝!

 

※追記

⇩このサイトにおける【ZENO-TEAL】カスタマイズを総まとめした記事はこちら

www.worker-ant0818.work