The post CSSセレクタで大文字小文字を区別しないiフラグが便利 first appeared on Fukuro Press.
]]>つい最近とても驚いたこと
CSSセレクタにiフラグが指定可能
それを使うとセレクタに対して「大文字小文字を区別しない」という指定ができます。まさかCSSで正規表現のiフラグが使えたとは...
CSSカスタマイズで役立ちそうなの記録しておきます。
CSSセレクタの大文字小文字を区別したくない場面
例えばこういうHTML要素がある場合...
<img src="hoge.jpg" />
<img src="fuga.JPG" />
<img src="piyo.jpg" />単純にimg要素が並んでるだけだけど、真ん中の画像だけ拡張子がJPGになってます。こういう拡張子とかの大文字小文字が違う場合について
これに対して次のCSSを適用したとします。
img[src*="jpg"]{
width: 100px;
height: 100px;
}このCSSの src*="jpg" はセレクタの正規表現みたいなものです。
このケースだと hoge.jpg と piyo.jpg にのみCSSが適用され、fuga.JPGには適用されません。なぜなら [src*="jpg"] と指定してるからです。
これに頭を悩ませてました・・・
セレクタには正規表現的にiフラグが指定できた！
こんな便利なのを今まで知らなかったとは
実はCSSで正規表現のiフラグが使えます。
これは大文字小文字を区別しないフラグのこと
先ほどと同じHTMLで考えてみましょう。
▼ なんか画像要素が並んでいるHTML例
<img src="hoge.jpg" />
<img src="fuga.JPG" />
<img src="piyo.jpg" />ここで [src*="jpg"] とだけ書くと、fuga.JPG にはマッチしてくれないという問題でした。今まではパータンの数だけセレクタを書いてました。
でもiフラグを使って書くと超スマート
▼ こういうCSSで大文字小文字の区別がなくなる!
img[src*="jpg" i]{
width: 100px;
height: 100px;
}単純に [src*="jpg" i] みたいにするだけ。これだけで大文字小文字が区別されなくなり、fuga.JPGもマッチ対象になるようですね。
そもそも正規表現みたいにiフラグが使えるなんて知らなかった。まさしく目からウロコ。今まで知らなかったのはなんでだろう？
もしかしたらiフラグ以外にもあるかもしれません。
それは少し調べてみようと思います。
属性セレクタでのiフラグのブラウザ対応状況
少し気になるのがブラウザの対応状況
そこでCan i use...で調べてみました。
▼ このような対応状況らしい
| "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. Case-insensitive CSS attribute selectors | Can I use... Support tables for HT... - caniuse.com |
残念ながらIE（Internet Explorer）では全バージョンで使えない模様。でも2022年6月にサポート終了みたいだし、もう気にしなくてOKですね。
主要ブラウザでは全て対応してるので問題ありません。
もちろんjQueryのセレクタでもiフラグは使える
当然ながらjQueryのセレクタでも同じことが可能
大文字小文字の区別をつけさせないことができます。
▼ 例えばこういうコードが書けるってこと
$('[src*="jpg" i]').each(function(i, elem){
$(elem).css({
'width': '100px',
'height': '100px'
});
});これを知らずに今まで非効率なコードを書いてしまっていた。
これは便利なので活用していきたいです。
The post CSSセレクタで大文字小文字を区別しないiフラグが便利 first appeared on Fukuro Press.
]]>The post CSSで文字をキーボード風に装飾する方法【コピペOK】 first appeared on Fukuro Press.
]]>
ブログでPCの使い方系の記事を書きたいとき、
キーボード風に文字を装飾したいってこと ないですか？
↓ 例えばこういう感じで
- F1 , F2 , F3 , F4 , F5
- Ctrl + Shift + Esc
- Fn + Alt + Prt Sc
自分もこのブログでキーボード風の装飾をよく使うこと多いです。
しかも簡単なので、ここでは文字をキーボード風に装飾する方法を紹介します。
あとWordPressで一発でキーボード風に変換する方法も紹介
キーボード風に装飾する２つの手順
キーボード風にテキストを装飾する時・・・
それらしく見せるには次の３点がポイントになります。
- 枠線を少しだけ丸める
キー輪郭は border プロパティで枠線を付けるが、丸めるとより自然な感じに。なので border-radius プロパティで少しだけ丸めておく
- うっすらと影を付ける
影は drop-shadow というプロパティから付けることが可能。下方向に影を付けるとリアルさ倍増
- フォントサイズは小さめに
標準のフォントより小さめにすると、文章の中でもゴチャゴチャしない
このポイントを踏まえると、作り方は次の手順
１．まずキーボード風にしたいspan要素作成
まずはキーボード風に装飾する span要素 を作成
例えば、こういう感じの span要素 を作っておきます。
<span class="keyboard key">
Shift
</span>クラス名に keyboard key を付けているのがポイントですね。
そしてこの中身に Shift とか Alt とかキー名を書いておけばOK
２．キーボード化するためのCSS追加
そしたらブログ・サイト全体に次のCSS追加
.keyboard.key {
padding: 1px 3px;
background-color: #f9f9f9;
background-image: -moz-linear-gradient(center top , #eee, #f9f9f9, #eee);
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 1px 2px 2px #ddd;
font-family: inherit;
font-size: 0.85em;
}このCSSでは次みたいな設定にしてます。
- キーの背景色
薄灰色の #f9f9f9 に指定。薄さは個人の好みで調節可能
- キーの枠線
この例の border: 1px solid #aaa; で1ピクセルの灰色枠線を指定。また border-radius: 2px; で２px分だけ丸めている
- キーの影
この例の box-shadow: 1px 2px 2px #ddd; から設定。左から1px、下方向に2px分だけ影を付けている
- 上下左右の余白
上CSSの padding: 1px 3px; で上下に1px、左右に3px余白を設けている
これらのプロパティは各自の好みで色々調整してみてください。
デフォルトでもいいけど、背景色を変えたりするのも面白いです。
そして・・・次が実際に表示してみたサンプルです。
↓ キーボードキー単体での表示例
↓ 文章の中でキー表示している例
PCとかソフトの説明系の記事を書くとき、
こういうキーボード風の装飾があるとなにげに超便利です。
自分もキー操作が必要な場面でかなり使わせてもらってます。
ちなみにWordPressなら一発挿入も可能
とはいえ、今紹介した方法は少し面倒です。
だっていちいちタグを書かないといけないので
そこで WordPressでタグを一発挿入する方法 もついでに紹介します。
WordfPressでタグの一発挿入と言えば、
やっぱり AddQuickTags を使うのが一番ですね。
↓ この記事で解説したプラグイン
この記事で解説したように、ボタンから一発でタグ挿入できる優れものです。
基本的な使い方については、上記事で大体分かると思います。
今回のキーボード風の場合なら、
次みたいにタグの登録画面から登録できます。
↓ まずはこういう感じでタグ名とタグ本体を入力
↓ あと右側からチェックを入れるのも忘れずに
そして「変更を保存」ボタンを押せば、投稿画面から挿入できるようになります。
やっぱり WordPress って便利です。
まとめ
以上 CSS で文字をキーボード風に装飾するやり方でした。
簡単なCSSコピペでできるので、説明系の記事とかで役立つこと間違いなし
少しの手間を加えるだけでも、記事がかなり読みやすくなるはずです。
The post CSSで文字をキーボード風に装飾する方法【コピペOK】 first appeared on Fukuro Press.
]]>The post CSSだけで画像をバウンドアニメーションさせる方法 first appeared on Fukuro Press.
]]>
記事下とか注目させたいリンク画像があるとき、
"ぼよよん" とバウンドするアニメ効果を付けると効果的です。
自分が記事を読んでる側になると分かりますが、
ポツン... と画像があるより、躍動感のある方が注目されやすいに決まってます。
そこで CSS だけで画像をバウンドアニメーションさせる方法 を紹介
面倒な jQuery とかのスクリプトもありません。
本当に CSSだけ でできるので超簡単です。コピペＯＫなので初心者にも安心
ぼよよんバウンド させる基本的なCSS例
バウンドには次のCSSプロパティと@規則を使えばできます。
- transform プロパティ
このプロパティに
scale関数を渡すと、要素を相対的に大きくしたり、小さくできる。たとえばscale(1.5)とすると、元要素に対して1.5倍の大きさ - @keyframes
要素に対して適用するアニメーションを作成するための＠規則。これがあるから面倒なスクリプトとか書かずにアニメーション可能
- animationプロパティ
要素に
@keyframesで作成するアニメーションを適用するためのもの。ここでアニメ時間とか方向とか実行回数とかを細かく指定できる
実際にどういう風に実装するのか、その手順は次の通り
１．バウンドアニメさせたい画像要素を作成する
まずは・・・バウンドさせたい画像要素作成します。
↓ たとえばこういう画像要素を作成
<div class="bound-img-wrap">
<img src="dance.png" />
</div>画像を bound-img-wrap という要素で囲んでるのがポイント。
このクラス名はなんでもいいんですが、ここでは仮でこういう名前にしておきます。
２．バウンドさせたい要素にこういうCSSを適用
そしたらこの画像に対して、次のCSSを適用
/** デフォルトの大きさは1.0倍 */
.bound-img-wrap img{
transform: scale(1);
}
/** 画像ホバー時のアニメを設定 */
.bound-img-wrap img:hover{
-webkit-animation: bound 1s ease-in;
-moz-animation: bound 1s ease-in;
animation: bound 1s ease-in;
}
/** アニメーションの定義 */
@keyframes bound {
/** 開始時は１倍の大きさ */
from { transform: scale(1); }
/** 0%～25%にかけて1.15倍する */
25% { transform: scale(1.15); }
/** 25%～50%にかけて0.95倍する */
50% { transform: scale(0.95); }
/** 50%～75%にかけて1.05倍する */
75% { transform: scale(1.05); }
/** 終了時は元の大きさに戻す */
to { transform: scale(1); }
}大まかに何をしてるかはコメント参照
この例では１秒かけて、要素を 1倍 ⇒ 1.15倍 ⇒ 0.95倍 ⇒ 1.05倍 ⇒ 1倍 と時間変化させることでバウンドして見えるように調整してます。
このタイミングとか倍率については、各自で調整してみてください。
実際に適用されるアニメは次のGif動画みたいな感じです。
自分で言うのもアレだけど "ぼよよん感" が出てる気がする
こういう面白いアニメ効果がついてると、画像がもっと目立ちやすくなりますね。
バウンドアニメをリピートさせ続けるには
ちなみに今紹介したCSSの場合、
ホバーしてアニメが終わると止まってしまいます。（一度限り）
もしホバー中にアニメをし続けたいなら、少し工夫が必要です。
そのやり方は animation プロパティに infinite を追加するだけ
例えば先ほどのCSSだったら、こういう風に書き変えます。
.bound-img-wrap img:hover{
-webkit-animation: bound 1s ease-in infinite;
-moz-animation: bound 1s ease-in infinite;
animation: bound 1s ease-in infinite;
}@keyframes のところは一切書き変えなくてＯＫ
こうすると、ホバー時に永遠とバウンドアニメーションする画像になります。
↓ こういう風に延々とバウンドし続ける
画像要素をもっと強調したいときは、
ループさせると目立ちやすくなるかもしれません。
一度限りにするか、ループさせるかは個人の好み次第
まとめ - バウンドさせると目立ちやすい
こういうアニメ効果がついてると、
何か面白くて気になるし クリックもしたくなります。
テキストには使えないけど、画像リンクなら汎用性高そうです。
以上、CSSだけでバウンドアニメ効果を付ける方法でした。
The post CSSだけで画像をバウンドアニメーションさせる方法 first appeared on Fukuro Press.
]]>The post CSSだけでキラキラ光るリンクボタンを作る方法 first appeared on Fukuro Press.
]]>
テキストリンクを目立たせたい場合・・
よく使われるのがリンクをボタン化すること
でもリンクボタンをもっと目立たせたい場合、
ボタンを光らせればクリック率アップがさらに期待できます。
そこで CSSだけでキラリと光るリンクボタンを作成する方法 をまとめました。
CSSが良く分からない人でもコピペOKなので、是非お試しください。
ピカピカ光るリンクボタンの作り方手順
その手順は次の２つ
- サイト全体にCSSを追加
- 光るボタン要素を作成
順に説明していくと次の通りです。
１．サイト全体にCSSを追加
まずボタンを光らせる用のCSSをサイト・ブログ全体に追加します。
特にWordPressを使っている場合、
CSSを全体追加するならプラグインとか使うのが安全ですね。
特にオススメなのが、次記事で紹介した Custom CSS & JS というプラグイン
オリジナルのCSSを追加するなら、こういったプラグインを使ってみてください。
ではCSSを追加する準備ができたら、
サイト全体に次のカスタムCSSを追加してみましょう。
.my_flash_link_btn{
display: block;
text-align: center;
}
.my_flash_link_btn a{
display: block;
position: relative;
overflow: hidden;
width: 100%;
padding: 8px 16px;
background: #f00;
color: #fff;
text-decoration: none;
box-shadow: 0 3px 4px #800;
transition: box-shadow .5s;
}
.my_flash_link_btn a:hover{
box-shadow: 0 6px 8px #800;
}
.my_flash_link_btn a:before{
content: "";
display: block;
width: 30px; height: 100px;
position: absolute;
left: -30%; top: -50%;
background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255, .8) 50%,rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,.8)),color-stop(100%,rgba(255,255,255,0)));
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
animation: shine 3s infinite linear;
-webkit-animation: shine 3s infinite linear;
}
@keyframes shine {
0% { left: -30%; }
25% { left: 130%; }
100% { left: 130%; }
}
@-webkit-keyframes shine {
0% { left: -30%; }
25% { left: 130%; }
100% { left: 130%; }
}これは本当に 丸々コピペでOK です。
「コードの一部を変更しなきゃいけない」、とか面倒な作業もありません。
とりあえず自分のサイト・ブログに上コードをそのまま貼り付けてください。
２．専用の光るボタンを作成する
あとは光らせたいリンクに少し細工すれば、光るボタンが作れます。
ただし、
リンクテキストは改変禁止になっている場合も多いはず
例えば、アフィリエイトリンクとかが改変禁止の代表例ですね。（下記事参照）
この記事で書いたみたいに、「リンクタグを直接変更してもOKだよ！」と規約に書いてるASPは中々ありません。（ もしも とかは例外的に許可してるけど...）
そこで、ASP規約に違反しない形で光るリンクボタンを作ってみます。
そのやり方は次の通りです。
まず次みたいなテキストリンクがあるとしましょう。
<a href="https://example.com/xxx" target="_blank">キラキラ光るボタン</a> <img src="https://example.com/xxx" width="1" height="1" />
こういうリンクの下に1x1の画像があるというタイプ・・・アフィリエイトリンクとかだと良く見かけるはずです。
こういうタグは直接改変できないので、工夫が必要という訳です。
ではどうやって光るボタン化するのか・・・
そのやり方は専用クラスのついたdiv要素で囲めばいいだけ（次コード参照）
<div class="my_flash_link_btn"> <a href="https://example.com/xxx" target="_blank">キラキラ光るボタン</a> <img src="https://example.com/xxx" width="1" height="1" /> </div>
黄色でハイライトした１行目、４行目に注目
見れば変わるように my_flash_link_btn というクラス名を持つdiv要素で、リンク全体を囲んでいます。
たったこれだけでリンクを光るボタンに変えることができます。
ちなみに・・・
実際どういう見た目とか光り方をするかは次の通り
３秒おきに左から右にキランッと光るエフェクトをつけてます。
もしCSSに詳しい方は、光らせ方とか調整してみてください。
あとこのボタンにホバーしたとき、
ボタン下の影を濃くするというアニメ効果もつけてます。
実際にホバーしたときの様子が次動画
ボタンがちょっと浮いた感じになってるの分かりますか？
キラキラ光る効果に加えて、ホバー時にもさりげないアニメ効果をつけているので、クリック率のアップが少しだけ期待できるかも
もちろんCSSが読めて書けるなら、
影の大きさとか色とかも調整してみるのもオススメです。
ボタンが光ってくれない場合の対処法
「CSSを追加したのにボタンが光ってくれない・・・」
「それどころかリンクのボタン化すらできない・・・」
そういう場合は次のことを試してみてください。
１．ブラウザキャッシュの削除
まずやるべきことの１つめはブラウザキャッシュの削除
ブラウザでは表示速度を速くするために「キャッシュ」というのを使っています。
これが逆に悪さをして、CSSが反映されない原因になることが結構あります。
なのでブラウザのキャッシュをまずは削除してみましょう。
もしChromeブラウザユーザーなら、
次記事で紹介した Clear Cache っていう拡張機能も便利です。
ワンクリックでキャッシュ削除できるので、
- キャッシュ削除を時短したい、
- よくCSSでカスタマイズする、
という人にもオススメ、私も愛用してます。
２．コードが間違えてないかの確認
お次にやるべきことはCSSコードが間違えてないかの確認
タイトルにも【コピペOK】と書いてますが、
使用ブログサービスによっては変な自動補完とかが働いてる可能性があります。
コードが正しいのに動かないなら、その可能性も疑ってください。
あとWordPressユーザーの場合・・・
絶対にテキストエディタ内にCSSを貼り付けちゃいけません！
それをすると自動補完が働いてしまい、正しく反映されないです。
詳しくは次記事で解説したので、気になる方はチェック
WordPressは超便利なんですが、自分でCSSを書くときは落とし穴も多いです。
そういうのに引っかからないように気を付けましょう。
まとめ
以上、CSSだけで光るリンクボタンを作る方法でした。
リンクボタンをもっと目立たせたい人は今紹介したテクニックを試してみてください。キラキラ光ってると見た目的にもお洒落になります。
The post CSSだけでキラキラ光るリンクボタンを作る方法 first appeared on Fukuro Press.
]]>The post なぜかWordPressでbrが効かない！その問題の”超簡単”な対処法 first appeared on Fukuro Press.
]]>
WordPressで記事を書いたり、ウィジェットを設置する場合・・・
なぜか遭遇してしまうのがbrタグが効かないという問題
私自身、そういう問題に直面して困ったことがありました。
そこで、WordPressでbrタグが効かない場合の一番簡単な対処法を紹介します。
ウィジェットでbrタグが効かない問題に遭遇
私がこの問題に遭遇したのは記事下にウィジェットを設置していた時
HTMLを直書きし、保存してページを開くと・・・
なぜかbrタグを入れた箇所が改行されていない！
そんな感じでこのbr問題について気づいたわけです。
とはいえPCではちゃんと改行されてます。
例えば次みたいなHTMLをウィジェット内で書いたとしましょう。
<p>
PCでのbr表示テスト<br>
こっちは改行されて問題なし
</p>そうすると次画像みたいにしっかり改行してくれます。
↓PCならbrタグは問題なく表示できる
まあbrタグは段落内で改行するタグなので、当然と言えば当然ですが・・・
でもスマホで見た場合、改行が "なぜか" 表示されません。
例えばウィジェット内に次みたいなHTMLを直書きしたとします。
<p>
スマホでのbr表示テスト<br>
なぜか改行されずに１行で表示される・・
</p>これで保存して、実際のページでウィジェットを見たときの様子が次画像
↓なぜか改行されない・・・なぜ？
もちろんbrタグを書き忘れたとかじゃありません。
実際、HTMLソースを開いて見るとスマホでもbrタグはしっかり見つかります。
今までWPを使っていて、こういう事態に遭遇したのは初めてです。
なので「え？なんで？」という感じで少し動揺しましたね。笑
でも調べていくうちに、原因がすぐに判明しました。
brタグが効かない原因はテーマだった...
brタグが効かない原因・・・
それは使用テーマでスマホのみbrタグが無効化されてたから
より正確にいうとスマホの記事下ウィジェットでのみ、そういう設定になってたみたいです。
なぜそれが分かったかというとChromeの開発者ツールで調べたため
このツールを使うと、ある要素にどういうCSSが適用されてるかなども分かります。
それを使って問題のウィジェットを調べたところ・・・
なんとbrタグに次のようなCSSが適用されてたことが判明！
@media screen and (max-width: 639px)
.article br {
display: none;
}
@media screen and (min-width: 639px)
.article br {
display: block;
}多分CSSを全く知らない人には「？？？」な内容だと思います。
これは分かりやすく文章にするなら
- 画面幅が639ピクセル以上の端末ではbrタグ表示
- 画面幅が639ピクセル以下の端末ではbrタグ非表示
という命令です。
つまり 画面幅が639ピクセル以下のスマホなどではbr自体が非表示 ということ
それならbrタグをいくら書いても改行されなくて当然という訳です。
もちろんこれは私の場合なので、brタグが効かない原因は色々あると思います。
- プラグインの影響だったり、
- 自分で追加したCSSの影響だったり、
- テーマの補完機能が原因だったり、
一概に「brタグが反映されないのは、アレが原因！」とは断言できません。
でもbrタグを表示するという解決策はどのような原因でも同じです。
なので次にWPのbr問題を解決できる、最も簡単な対処法を詳解したいと思います。
brが効かない問題への簡単な対処法
対処法と言っても大したものじゃありません。
ただ単純にbrタグを表示するCSSを追加するだけなので
もちろんCSSの知識が全く無くても丸丸コピペでいけます。
そのやり方を簡単に解説すると次の通り
まずWordPressの左メニューから「外観」ー＞「テーマエディター」を選択
ちなみにWordPress5.1以前だとこの項目は「テーマの編集」なのでそっちを開けばOKです。
そうしたら今使用しているテーマの style.css というファイルが開きます。
これはテーマのデザインを構成する重要なファイルなので、万が一の場合を考えてバックアップは取っておいてください。
あるいは次記事で紹介したみたいに、子テーマを作っておくと安全ですね。
取りあえずバックアップでも子テーマでもいいので、何かしら安全に作業できるための対策はしておきましょう。
では style.css を開いたら、次のCSSを最後に追加してみてください。
/** brタグをどんな場合でも表示 */
br{
display: block !important;
}あとはこの内容で保存すれば、brタグが正常に反映されるようになったはず
もし「あれ？追加しても反映されない・・」という場合はブラウザのキャッシュを消去してみましょう。それで上手くいきます。
ちなみにChromeの場合、 Clear Cache という拡張機能 がキャッシュ削除に便利です。
まとめ
以上がWordPressでbrタグが効かない場合の対処法
本当に単純なCSSを追加すればいいだけなので、超簡単です。
もしテーマとかプラグインなどの影響で改行できない場合、この方法を試してみてください。必ず表示されるようになります。
The post なぜかWordPressでbrが効かない！その問題の”超簡単”な対処法 first appeared on Fukuro Press.
]]>The post CSSやjQueryを特定ページでだけ読み込ませる方法 first appeared on Fukuro Press.
]]>
WordPressはテーマやプラグインが使えるので自分でCSSを書いてデザインを追加したりjQuery(JavaScript)で独自の機能を追加したり、ということは少ないと思います。
それでもテーマやプラグインでカバーできない部分はオリジナルのコードやスクリプトを書かなければ実現できないことも当然あります。
そして全てのページではなく、特定のページでだけ動作させたいCSSやスクリプトもあるかもしれません。
そこでここでは特定のページでだけオリジナルのCSSやjQueryコードを読み込ませる方法について紹介します。
そのやり方とは・・・
ではどうやって特定のページでだけ特定のCSSやスクリプトを読み込ませるかというと「カスタムフィールド」を使います。
これは記事のタイトルと本文以外の情報をページに埋め込むためのWordPress独自の機能のことです。
この機能を使って埋め込めるのは情報の例をいくつか挙げるとすると・・・
- 検索エンジン上での記事タイトルやデスクリプション
- 独自のCSSやJavaScriptコード
- 商品やサービスに対する評価
- 画像、日付、位置情報、その他色々
などなど・・・
これらの情報を記事とは切り離して埋め込むことで後から編集もしやすくなり、情報を利用しやすくなりますよね。
そしてここでやることはカスタムフィールドを使って編集画面上で独自のCSSやスクリプトの埋め込みのオン・オフを切り替えできるようにすることです。
といっても自力でカスタムフィールドを扱うのは知識が必要な上に手順も面倒なので、「Advanced Custom Fields」というプラグインの力を借りましょう。
このプラグインを使えば次の画像のように独自の設定を用意し、チェックボックスがチェックされているときだけCSSやjQurtyなどのコードを読み込む、といったことが可能になります。
しかも編集画面にオリジナルのフィールドを簡単に作成できるので、特別な知識は必要ありません。
設定手順
それでは独自CSS・JSの埋め込みを行う設定を編集画面に作ってみましょう。
その手順は次の通りです。
- Advanced Custom Fieldsの導入
- カスタムフィールドの作成
- 各ページでのCSS・スクリプトの出力を制御
この３つの手順について順に解説します。
Advanced Custom Fieldsの導入
最初に「Advanced Custom Fields」をWordPressに導入します。
これは誰でもカスタムフィールドを簡単に扱えるように作られたプラグインで編集画面に次のようなフィールドを作成することが可能です。
- テキストエリア
- 数値入力
- セレクトボックス
- チェックボックス
- ラジオボタン
- その他色々・・・
操作方法も難しくなく標準機能だと扱いの難しいカスタムフィールドを簡単に作成することができるのでおすすめです。
このプラグインの導入から基本的な使い方については次の記事でまとめてあるので、インストール・有効化して使える状態にしておきましょう。
カスタムフィールドの作成
プラグインをインストール・有効化したら次に投稿ページの編集画面にCSS・jQueryなどのカスタムコードの埋め込みをオン・オフできるフィールドを作成します。
ではまずWordPressメニューから「カスタムフィールド」と書かれた項目を開いてください。
開いたら新しいフィールドグループを作成するために「新規追加」ボタンを押しましょう。
新規追加画面が開いたらまず上の方に「ここにタイトルを入力」と表示されたテキスト欄があるのでフィールドグループのタイトルを入力します。
タイトルは分かりやすければ何でもいいですが、ここでは「カスタムコードの切り替え」という名前をつけておきます。
タイトルを入力したら編集画面に表示するフィールドを追加するために「フィールドを追加」ボタンを押してください。
このボタンを押すとフィールドの設定項目がずらずらと出てきますが、絶対に入力しなくてはならないのは次のオレンジで囲った３つの項目です。
ここではこの３つの項目に次のような内容を入力・選択します。
- フィールドラベル
編集ページに表示される名前。ここでは分かりやすいように「コードの切り替え設定」と入力
- フィールド名
フィールドの値を取得するために必要な名前。ここでは「enable_custom_code」と入力
- フィールドタイプ
編集画面に表示されるフィールドの種類。ここでは「真/偽」を選択
つまり次の画像のように設定すればOKです。
フィールドタイプには「真/偽」を選んでいるので、チェックボックスがフィールドとして表示されます。
ではこの３つを設定し終わったら次は下の方に進み、「メッセージ」の横にあるテキスト欄にチェックボックスの右側に表示したいメッセージを入力しましょう。
ここでは「カスタムコードを有効にする」というメッセージに設定しておきます。
この設定が済んだらさらに下の方に進み、「オプション」ー＞「Style」からフィールドのスタイルを選びます。
ここでは標準的なフィールドとデザインを合わせるために次の画像のように「Standard (WP metabox)」を選んでおけばOKです。
最後に「公開」ボタンを押してカスタムフィールドを公開しましょう。
以上でカスタムフィールドの作成は完了です。
各ページでのCSS・スクリプトの出力を制御
ここまでで作成したカスタムフィールドは投稿ページの編集画面で次のように表示されるようになります。
このようにそれらしく表示されるもののこの段階では単にチェックボックス付きの設定項目がが編集画面上に追加されただけです。
次はこのフィールド内のチェックボックスのON・OFFに応じてカスタムCSSやJSコードを書くページで切り替えできるように設定していきます。
では今使っているテーマに切り替え用のPHPコードを追加する必要があるので、まずは「functions.php」というファイルを開きましょう。
もしWordPress内でこのファイルを編集するならメニューから「外観」ー＞「テーマの編集」を開くことで直接funtions.phpが編集可能です。
functions.phpを開いたらファイルの最後に次のような内容を追加します。
/** カスタムコードが有効になっているページでだけコードを出力 */
function my_custom_code(){
if(get_field('enable_custom_code')){
echo <<<EOM
<style>
/** カスタムCSSをここに記入 */
</style>
<script type="text/javascript">
/** カスタムJSをここに記入 */
</script>
EOM;
}
}
add_filter('wp_footer', 'my_custom_code');このPHPコード中の「/** カスタムCSSをここに記入 */」という部分にカスタムCSSを、「/** カスタムJSをここに記入 */」という部分にカスタムJSコードを挿入してください。
この内容を追加してfunctions.phpを保存すれば各ページでカスタムコードの出力の制御が可能になります。
カスタムフィールドが機能するかどうかの確認
最後に、ここまでで作成したカスタムフィールドが正常に正常に機能するかを確認します。
確かめ方は簡単で適当な投稿ページの編集画面を開き、先ほど追加したカスタムフィールドのチェックボックスにチェックを入れるだけです。
チェックを入れて投稿を保存したらページのソースを開いてみてください。ちなみにChromeなら「Ctrl + U」キーを同時押しすることで開けます。
コードに間違いがなく、カスタムフィールドが正常に機能しているなら次のようにカスタムコードが埋め込まれているはずです。
以上が特定ページでカスタムコードを切り替える手順です。
自分でコードを追加しなくてはならない部分はあるものの、プラグインを使えば簡単にカスタムフィールドが作れて最初からコードを書かかなくて済むのでこれが一番楽な方法だと思います。
まとめ
特定のページでだけ特定のCSSやJSコードを埋め込みたいならここで紹介した方法がおすすめです。
一部のページでしか使われていないコードを全てのページで読み込むのはパフォーマンス的には良くないので表示速度を犠牲にしたくないならこの方法を試してみてください。
以上ここでは編集画面にカスタムフィールドで設定を作り、特定のページでだけオリジナルのコードを読み込ませる方法について紹介しました。
The post CSSやjQueryを特定ページでだけ読み込ませる方法 first appeared on Fukuro Press.
]]>The post WordPressで見出し横にアイコン画像を表示する方法 first appeared on Fukuro Press.
]]>
h1タグやh2タグで作られる見出しに画像を表示すると見出しをより強調することができます。
例えば次のように見出しの横にチェックマークをつけるとそのタイトル下の内容がチェックすべき内容だとはっきり分かりますよね。
別にタイトルの横に画像が無くても内容は伝わりますが、読者に分かりやすく伝えたいならこのような工夫も必要です。
そこでここではWordPressでh2やh3などのタイトル横に画像を表示する方法を解説します。
まずアイコンを用意しよう - 便利なダウンロードサイト
まず最初にアイコンをダウンロードできる便利なサイトをいくつか紹介します。全て商用利用OKなサイトなので見出し横のアイコンを探すのにどうぞ
１．イラストAC
多くのクリエイターが所属していてアイコン素材も見つかりやすいサイト。
画像は加工・編集・商用利用OKで、使用時に著作権やライセンスを明記する必要もありません。ダウンロードできる画像の種類はJPEG、PNG、AI-EPSの３種類に対応しています。
とにかく素材数が豊富なので素材探しに役立つこと間違いなしです。
２．Icon-rainbow
アイコンのサイズや色などを変更してアイコンをダウンロードできるサイト
チェックマークを始め記号系素材も豊富なのでタイトル横に表示するアイコンも見つけやすいです。商用利用OKで著作権・ライセンスの明記も必要ないので安心して使えます。
３．ICOON MONO
基本的に使用報告の必要なしで無料アイコンをダウンロードできるサイト
アイコンサイズは16・32・48・128・256・512ピクセルの中から選択可能。複雑すぎず縮小しても見やすいシンプルなアイコンが手に入ります。
その他のダウンロードサイト
これ以外の画像素材サイトについては次記事で詳しくまとめました。
著作権表示などは一切必要ないので安心して利用可能です。もし素材探しに困っているならこちらの記事も是非ご覧ください。
見出しの横にアイコンを表示する手順
ではアイコンが用意できたらそれを見出し横に表示する設定をしていきましょう。
その手順を簡単に説明すると次の通り
１．アイコンのアップロード
まずタイトル横に表示するアイコン画像をアップロードします。
メニューから「メディア」ー＞「ライブラリ」を選択し、そこで画像をアップロードしてください。
アップロードしたらメディアライブラリ内でアップロードした画像をクリックすると「添付ファイルの詳細」が出てくるのでその中で「URL」の右に表示されているURLをコピーしてください。下の画像でオレンジ色の枠で囲った部分です。
このURLがタイトル横に表示される画像のURLです。
２．Simple Custom CSS & JS のインストール
次にWordPressのヘッダーでカスタムCSSを追加するために「Simple Custom CSS and JS」というプラグインをインストールします。
メニューから「プラグイン」ー＞「新規追加」と進み、プラグイン名で検索すると検索結果にプラグインが表示されるので「今すぐインストール」を押してインストールしてください。
ダウンロードして使う場合は以下のプラグインページからダウンロード可能です。
https://ja.wordpress.org/plugins/custom-css-js/
インストールしたら「有効化」ボタンを押して有効化するのを忘れないでください。
別にプラグインを使わなくてもテーマや子テーマのstyle.cssにCSSコードを追加することもできますが、テーマがもし変わった時にカスタムCSSを追加しなおさなくて済むようにプラグインを使います。
３．カスタムCSSの追加
ではメニューから「Custom CSS & JS」ー＞「Add Custom CSS」を選択してください。
すると次のようなカスタムCSSの編集画面が出てきます。
「ここにタイトルを入力」という欄にカスタムCSSの名前を入力して、その下のCSSコードの入力欄にカスタムCSSコードを入力します。
次がh3タグによる見出しの横にアイコンを表示するカスタムCSSです。このCSSコードをカスタムCSSコードの入力欄に追加しましょう。
h3.check{
font-size: 24px;
}
h3.check:before{
content: "";
display: inline-block;
width: 18px; height: 18px;
background-image: url("[コピーしたURL]");
background-size: 18px;
background-repeat:no-repeat;
vertical-align: middle;
padding-right: 6px;
}ただし [コピーしたURL] は先ほどコピーした画像URLに書き換えてください。
上記のようなカスタムCSSを追加したら「公開」ボタンを押してカスタムCSSを公開すればOKです。
そして横にアイコン付きの見出しを表示するには投稿の編集画面でHTMLエディタを開き、次のようにh3タグに「check」というクラス名を指定します。
<h3 class="check">チェック項目</h3>
この見出しはカスタムCSSが適用されるので次のように横にアイコンが表示されるようになります。
以上が見出し横にアイコンを表示する手順です。
まとめ
シンプルな見出しだとちょっと物足りないな、と感じたらチェックマークなどのアイコンをつけると他と差別化できて分かりやすいですよね。
少しCSSの知識が要りますが、基本コピペでOKなので見出しを目立たせたいときにこのテクニックが役立つと思います。
以上WordPressで見出し横にアイコン画像を表示する方法についてでした。
The post WordPressで見出し横にアイコン画像を表示する方法 first appeared on Fukuro Press.
]]>The post WordPress Popular Postsで順位番号をアイキャッチ内に表示する方法 first appeared on Fukuro Press.
]]>
WordPressで人気記事を表示するのによく使われるのが Popular Posts プラグイン。
簡単にきれいな人気記事リストが作れて便利ですよね。
でも物足りないのが 順位番号の表示ができないこと
そこで Popular Postsのアイキャッチ内に順位番号表示する手順 をまとめました。
CSSを使った方法ですが、丸々コピペでいけるから難しくはありません。
Popular Posts ウィジェット側の準備
最初にサイドバーに設置したウィジェット側でいくつか準備をしておきます。
その手順は次の通り
まずメニューから「外観」－＞「ウィジェット」を開き、
今設置しているPopular Postsウィジェットの設定項目を展開してください。
このウィジェット内でアイキャッチ表示が有効でないなら表示を有効にしておきましょう。
↓ 次画像のように「アイキャッチ画像を表示」にチェックを入れればOK
次にウィジェットの「カスタムHTMLマークアップを使う」にチェックを入れてください。
そしてウィジェットを保存すれば次のような設定項目が現れます。
↓ カスタムHTMLを有効にしたときの様子
この時、デフォルトの状態だと、
「投稿のHTMLマークアップ」には次のHTMLが表示されているはずです。
<li>{thumb} {title} <span class="wpp-meta post-stats">{stats}</span></li>
この内容を次のように 書き換え してみてください。
<li><div class="wpp_thumb_wrapper">{thumb}</div> {title} <span class="wpp-meta post-stats">{stats}</span></li>何が変更したかというと {thumb} を wpp_thumb_wrapper というクラス名のついたdiv要素で囲みました。
囲むdiv要素のクラス名は何でもいいですが、ここでは説明のしやすさの為に wpp_thumb_wrapper という名前を使っていきます。
以上の設定が終わったらウィジェットの「保存」ボタンを押して変更を保存
これでウィジェット側での下準備は終わりです。
Popular Posts に次のCSSをコピペ
では次にアイキャッチ画像内に順位番号表示するCSSを追加していきます。
その手順は次の通り
まずテーマあるいはその子テーマ内にある「style.css」というファイルを開いてください。
このファイル内に順位番号を表示するためのCSSを追加していきます。
もしWP内で直接編集するならメニューから「外観」ー＞「テーマの編集」をクリック
※ ちなみにWP4.2以降は「テーマエディター」という名前
そうするとテーマの編集画面が開き、使用中テーマの style.css が表示されるはずです。
では style.css を開いたらファイルの最後に次のようなCSSを追加しましょう。
/** 人気記事のアイキャッチ内に順位番号を表示 */
body{
counter-reset: rank_number;
}
.wpp_thumb_wrapper{
position: relative;
}
.wpp_thumb_wrapper:after{
counter-increment: rank_number;
content: counter(rank_number);
display: block;
position: absolute;
left: 0;
width: 20px;
height: 20px;
background: rgba(50, 50, 50, 0.8);
color: white;
font-size: 14px;
text-align: center;
border-radius: 2px;
}この内容を追加したらファイルを保存してください。
そしてサイドバーに設置してある人気記事ウィジェットを見てみると次のように順位番号が表示されるようになります。
もし順位番号が表示されないならブラウザのキャッシュをクリアしてみてください。
CSSにコピペミスがない限りは正しく反映されるはずです。
以上がPopular Postsで順位番号を割り振って表示するやり方
もう一度その手順をまとめておくと次の通りです。
- 人気記事ウィジェットでアイキャッチの表示を有効化
- ウィジェット内のアイキャッチをdiv要素で囲む
- 番号表示用のCSSを使用中のテーマのstyle.cssに追加
順位番号を表示するにはただCSSを追加するだけではだめなので、
手順２番目のアイキャッチをdiv要素で囲むことは絶対忘れないでください。
順位番号のカスタマイズ
順位番号の表示手順は以上ですが、CSSを変更すれば色や形を変えることもできます。
そこで今紹介したCSSを少しだけ改造して、
自分好みにカスタマイズするチップ集をいくつか紹介します。
１．ランク番号を丸で囲む
CSSでボーダーの角を最大限まで丸くすると次の画像のように番号を丸で囲めます。
背景を丸にするには「.wpp_thumb_wrapper:after」というセレクターでborder-radiusプロパティを次のように変更するだけ
border-radius: 20px;これで角が完全になくなって丸形になります。
全体のCSSコードはこちら
２．ランク番号ごとに色を変える
例えば次の画像のように１位なら赤色、２位なら青色、３位なら緑色のように順位番号ごとにに色付けしたいとします。
そういう場合は次のCSSを追加すればOK
.wpp-list li:nth-of-type(1) .wpp_thumb_wrapper:after{
background: rgba(255, 50, 50, 0.8);
}
.wpp-list li:nth-of-type(2) .wpp_thumb_wrapper:after{
background: rgba(50, 50, 255, 0.8);
}
.wpp-list li:nth-of-type(3) .wpp_thumb_wrapper:after{
background: rgba(50, 255, 50, 0.8);
}このCSS内にある「nth-of-type」はある要素のn番目に対してだけCSSを指定するための疑似クラスです。
これを使えば「nth-of-type(1)」などとしてそれぞれの順位の番号に対して背景色を変えたりなどができるようになります。
全体のCSSコードはこちら
ここでは１位に赤、２位に青、３位に青と指定しています。
それ以外の順位の背景色は灰色のままで変わりません。
まとめ
Popular Postsは便利なプラグインですが順位番号の表示には対応していないので紹介した手順が役に立つはずです。
またCSSを少しアレンジすれば背景を変えたり、順位番号に色付けもできるのでオリジナリティある人気記事ランキングが作れると思います。
以上 WordPress Popular Posts に順位順位を表示する手順についてでした。
The post WordPress Popular Postsで順位番号をアイキャッチ内に表示する方法 first appeared on Fukuro Press.
]]>The post WordPressでリストの点部分をオリジナル画像に置き換える手順 first appeared on Fukuro Press.
]]>
リストを作るには「ul」や「ol」あるいは「dl」などのリストタグが使われます。
そのリストの各項目の横にはulタグなら点（ドット）マーク、olタグなら数字が表示されますが、この点部分はCSSを使えば好きな画像に置き換え可能です。
ここではWordPressでリスト項目の点部分を画像にする方法を解説します。
点（ドット）部分に使用する画像を用意しよう
まず点部分に表示したい画像を用意する必要があります。
あまり大きな画像を使えないので小さ目な画像が探せる次のアイコンダウンロードサイトを使うのがおすすめです。
１．イラストAC
イラストAC はクオリティの高いイラストを無料でダウンロードできるサイト
全ての画像は加工や商用利用OKで著作権やライセンスをサイトに明記する必要もありません。ダウンロードできる画像の種類としては JPEG、PNG、AI-EPS の３種類に対応しています。
とにかく素材数が豊富で記号系の素材も見つかりやすいので素材探しに役立つと思います。
２．Icon8
Icon8 は約68300個の無料フラットアイコンをフリーでダウンロードできるサイト
メールアドレスとパスワードを入力するだけで簡単に登録でき、自分の探したいアイコンのキーワード入力で検索できます。
ただしサイトで使う場合は Icons8 へのリンクが必要になるようです。
３．Material Icons
Material Icons は９００種類以上のマテリアルアイコンを無料ダウンロードできるサイト
登録不要ですぐにダウンロードできるうえにクレジットやリンクの表記は不要です。アイコン色は黒か白かのどちらかが選べます。
その他のダウンロードサイト
無料で商用利用できる便利な画像素材系サービスについては次の記事でジャンル別にさらに詳しくまとめて紹介してあります。
著作権やライセンス表示も一切必要ないので安心して利用できます。素材探しに困っているは是非この記事もご覧ください。
リスト項目を画像に置き換える方法
WordPressでリスト項目の点部分を用意した画像に置き換える手順は次の通りです。
１．CSSを扱えるプラグインの導入
ここではテーマの切り替えをしても同じCSSコードが適用されるように「Simple Custom CSS and JS」というプラグインを使います。
テーマで用意されているcssファイルを編集してもいいですが、デザインを崩す恐れがある上にテーマが変わる度にCSSコードを編集しなおす必要があるのでプラグインを使った方が確実です。
ではメニューから「プラグイン」ー＞「新規追加」と進んで「custom css」などと検索すると次のようなプラグインが検索結果の上あたりに出てくるので「今すぐインストール」を押してインストールしてください。
以下のプラグインページから直接ダウンロードして使うことも可能です。
https://ja.wordpress.org/plugins/custom-css-js/
インストールしたら「今すぐインストール」ボタンが「有効化」ボタンに変わるので必ずそれを押して有効化しておきましょう。
２．リストの点部分に使う画像のアップロード
次にリストの点部分に使用する画像をアップロードします。その手順は次の通りです。
まずメニューから「メディア」ー＞「ライブラリ」をオープン
そしてライブラリ画面で次の画像で示したように「新規追加」ボタンを押し（①）、「ファイルを選択」ボタンを押して（②）点部分に表示したい画像をアップロードしてください。
アップロードが完了すると下の方にアップロードした画像のサムネが表示されているのでそれをクリックしてください。
そうすると「添付ファイルの詳細」が開くので「URL」という部分に表示されている画像URLをコピーしてください。
ここでコピーしたURLがリストの点部分を置き換えるのに使われる画像URLになります。
３．リストの点をカスタムするcssの追加
最後にリストの点部分をオリジナル画像に置き換えるカスタムCSSを追加します。
まずメニューから「Custom CSS & JS」ー＞「Add Custom CSS」をオープン
すると次のようなカスタムCSSの新規追加画面が表示されます。
新規追加画面の「ここにタイトルを入力」と書かれたテキスト欄にはカスタムCSSの分かりやすい名前をつけてください。
そしてその下のCSSコード記入欄に次のようなCSSを記述します。
.entry-content ul {
list-style-type:none;
}
.entry-content ul li{
background-image: url('[コピーした画像URL]');
background-repeat:no-repeat;
background-position:left center;
background-size: contain;
-moz-background-size:contain;
-webkit-background-size:contain;
padding-left: 2em;
}ただし、[コピーした画像URL] は先ほどメディアライブラリ画面でコピーした画像のURLに置き換えてください。
このCSSではliタグの背景画像を設定することでドット部分を置き換えています。ここで背景部分に関わっているのは次のプロパティです。
- background-image
背景画像を設定するプロパティ。「url('画像のURL')」のような形式を指定するとその要素内の背景が画像になります。
- background-repeat
背景画像を繰り返すかどうか指定するプロパティ。デフォルトだと繰り返されてしまうので「no-repeat」を指定しています。
- background-position
背景画像を要素のどの位置に表示するか指定するプロパティ。ここでは「left center」という値を指定することで左方向で垂直方向には中央寄せで表示されるようになります。
- background-size
背景画像のサイズを指定するプロパティ。ここでは「contain」を指定して背景領域に収まる最大サイズになるように設定しています。
以上の内容を入力したら「公開」ボタンを押してCSSを公開しましょう。
サイトでリストがあるページを開いてみると次のようにドット部分がオリジナルの画像に置きかわっています。
もし置き換わっていないようならブラウザのキャッシュをクリアしてみてください。
読みやすい記事を書くには次の工夫も必要！
ここまでがリストの点部分をオリジナル画像に置き換える手順
注意事項とかチェック事項を並べるときに便利なテクニックです。
また今紹介した以外にも読みやすい記事を作るテクニックは他にもあります。
例えばいくつか例を挙げるとすると・・・
- アイキャッチを最適化する
- 行間・文字間隔を調整する
- 語尾のバリエーションを増やす
- 誤字脱字を少なくする
- 定期的に記事のリライトをする
・・・などなど
私自身、こういった工夫を記事を書くときに必ずしています。
詳しくは次の 読みやすい記事の作り方レイアウト編＆書き方編 で解説しました。
１つ１つは地味なテクニックです。でも、面倒くさがらず工夫していけば今までの数倍・数十倍も読みやすい記事にできます。
誰でも簡単にできることオンリーなので、是非お試しあれ
まとめ
以上、WordPressでリストのドット部分を画像に置き換える方法でした。
画像を用意してカスタムCSSを追加すれば簡単にできます。リストを目立たせて表示したい場合に役立つこと間違いなしですね。
The post WordPressでリストの点部分をオリジナル画像に置き換える手順 first appeared on Fukuro Press.
]]>The post WordPressでキャラ同士が話す会話形式の記事を作る方法 first appeared on Fukuro Press.
]]>
記事を書くときに一番大事なのは情報を分かりやすく伝えることです。
そのための手段の１つが次のように二人以上のキャラ同士が話し合うような会話形式にすることで、こうするだけで記事が読みやすくなりますよね。
会話形式にすることで記事の内容に興味を持ってもらいやすくなり、読者が疑問に思っていることをキャラに喋らせることで共感を得やすくなります。
またキャラにセリフを喋らせることで読者に記事の内容に対して親近感を持ってもらえるので、実際にこういう会話形式で記事を書いているサイトは多いです。
そこでここではこのような会話形式の記事をWordPressで書く方法について解説します。
キャラ画像のダウンロード
まず最初にセリフをしゃべらせたいキャラ画像を用意する必要があります。
でもキャラ画像を自作するのは手間がかかってしまうので、次の無料素材をダウンロードできるサイトを利用すると便利です。
１．イラストAC
イラストACは無料イラストをダウンロードできるサイト
全ての画像は加工や商用利用OKで著作権やライセンスを明記する必要もありません。ダウンロードできる画像の種類としてはJPEG、PNG、AI-EPSの３種類に対応しています。
とにかくこのサイトは素材数が豊富で探したいイラストは大体見つかります。動物とか人物とかのキャラ探しにもかなり役立つはず
２．イラストレイン
イラストレイン可愛いイラスト素材を無料でダウンロードできるサイト
登録は不要で画像使用時に著作権表示やクレジット表記は必要ありません。画像の形式としては背景透過ありのPNG形式に対応しています。
絵本や漫画に出てくるようなかわいい＆ゆるいデザインのイラスト画像が多く、動物系のキャラ画像が多く揃っているので会話形式のブログで使いやすいです。
３．Icon-rainbow
Icon-rainbowは無料で商用利用可能なアイコンをダウンロードできるサイト
ここも画像の使用時に著作権表示やラインセンス表示は必要ありません。対応している画像形式は PNG、JPEG、SVG の３種類でサイズと色を好きなように選ぶことも可能です。
あまり可愛い絵柄ではないものの、動物アイコンも多いので会話形式のブログを作るのに使えるイラストが探せるかも
その他のダウンロードサイト
この他の無料で商用利用可能な画像ダウンロードサイトについては次の記事でさらに詳しくまとめてあります。
著作権やライセンス表示などは一切必要ないので安心して利用可能です。もし素材探しに困っている方はこちらの記事もご覧ください。
会話形式の記事を書く手順
では次に用意したキャラ画像を使って会話形式の記事を書く方法を紹介します。
その手順は次の通りです。
キャラ画像のアップロード
まず会話させたいキャラ画像をアップロードします。画像の大きさは正方形で30x30ピクセル～50x50ピクセルくらいだとセリフの邪魔になりにくいです。
その手順ですがまずメニューから「メディア」－＞「ライブラリ」と進みます。
するとメディアライブラリ画面が開くので、上の方にある「新規追加」ボタンを押し(①)、表示された枠の中にある「ファイルを選択」ボタンを押してキャラ画像をアップロード(②)してください。
アップロードが完了するとメディアライブラリ下に追加された画像が表示されるのでそれをクリックして「添付ファイルの詳細」を開きます。
「添付ファイルの詳細」ダイアログが開いたら「URL」に表示されている画像URLをコピーしてください。
ここでコピーした画像URLが記事内でキャラ画像を表示させるのに使用されます。
カスタムCSSを追加するプラグインの導入
次にヘッダー内に文章を会話形式にするためのカスタムCSSを埋め込むために「Simple Custom CSS and JS」というプラグインを導入します。
テーマや子テーマのstyle.cssに直接カスタムCSSを書くこともできますが、もしテーマが変わった場合、スタイルを追加しなおさなければならないのでカスタムCSSは一応テーマとは分離させておきます。
ではメニューから「プラグイン」ー＞「新規追加」を選んでください。
そしてプラグインの新規追加画面で「custom css」などと検索すると検索結果の上の方に「Simple Custom CSS and JS」が表示されるので「今すぐインストール」ボタンを押してインストールしましょう。
インストールしたら「有効化」ボタンを押して有効化するのを忘れないようにしましょう。
カスタムCSSの追加
次にプラグインを使って文章をキャラ同士の会話形式にするためのカスタムCSSを追加します。
まずメニューから「Custom CSS & JS」ー＞「Add Custom CSS」を選択します。
すると次のようなカスタムCSSコードを新規追加する画面が出てくるので「ここにタイトルを入力」と書かれた欄にカスタムCSSの名前をつけてください。
そして行番号が振ってあるテキスト欄にカスタムCSSを書くのですが、キャラ同士が会話しているように見せるには次の２種類のカスタムCSSを追加する必要があります。
- 右側のキャラ用のスタイル
キャラが記事内右に配置され、吹き出しがそのキャラの左側からでるようなスタイル
- 左側キャラ用のスタイル
キャラが記事内左に配置され、吹き出しがそのキャラの右側からでるようなスタイル
この２つのCSSの書き方について順に説明します。
右側キャラ用のCSS
初めに次画像みたいに右側に表示されるキャラ用のCSSを追加します。
↓実際にセリフを喋っている右キャラの例
キャラは右にいるので吹き出しも右から出ているように調整しないといけません。
こういう右キャラ用に必要なCSSコードは次の通り
/** 右側キャラ用スタイル */
.right{
position: relative;
display: block;
margin: 24px 12px;
margin-left: auto;
margin-right: calc(50px + 15px);
padding: 5px 15px;
background-color: #adf;
color: #333;
font-weight: bold;
text-align: right;
font-size: 15px;
}
.right p{
display: inline-block;
text-align: left;
}
.right:after{
content: "";
position: absolute;
top: 50%; left: 100%;
margin-top: -15px;
border: 15px solid transparent;
border-left: 30px solid #adf;
}
.right:before{
content: "";
display: block;
position: absolute;
width: 50px; height: 50px;
top: calc(50% - 25px);
margin-left: calc(100% + 15px);
background-image: url('コピーした画像URLに置き換え');
background-size: 50px;
background-repeat: no-repeat;
}基本コピペOKですが、CSSコード最後当たりの「コピーした画像URLに置き換え」という部分は先ほどアップロードしたキャラ画像のURLに置き換えてください。
そして記事内で右側のキャラに喋らせるには次のようなdiv要素を作ります。
<div class="right">
こんにちは、うさぎです。ヨロシクね☆
</div>上のようにキャラに喋らせたいセリフを書いたdiv要素に「right」というクラス名をつけます。またビジュアルエディタではなくHTMLタグが使えるテキストエディタ内に必ず書いてください。
左側キャラ用のスタイル
次は下画像みたいに左側のキャラ用のCSSを追加します。
↓実際にセリフを喋っている左キャラの例
右側キャラと逆で今度は左側から吹き出しが出ているように調整すればOKです。
こういう風な右キャラ用のCSSコードは次の通り
/** 左側キャラ用スタイル */
.left{
position: relative;
display: block;
margin: 24px 12px;
margin-right: auto;
margin-left: calc(50px + 15px);
padding: 5px 15px;
width: auto; height: auto;
background-color: #adf;
color: #333;
font-weight: bold;
font-size: 15px;
}
.left:after{
content: "";
position: absolute;
top: 50%; right: 100%;
margin-top: -15px;
border: 15px solid transparent;
border-right: 30px solid #adf;
}
.left:before{
content: "";
position: absolute;
width: 50px; height: 50px;
top: calc(50% - 25px);
left: 0;
margin-left: calc(-50px + -30px);
background-image: url('ここを画像URLに置き換え');
background-size: 50px;
background-repeat: no-repeat;
}右側キャラの時と同じく「ここを画像URLに置き換え」という部分は先ほどアップロードしたキャラ画像のURLに置き換えてください。
そして記事内で右側のキャラに喋らせるには次のようなdiv要素を作ります。
<div class="left">
ネコだニャ。よろしくニャ。
</div>上のようにキャラにしゃべらせたいセリフを持つdiv要素に「left」というクラス名をつけます。これもビジュアルエディタではなくテキストエディタ内で書いてください。
PCで見たとき用のスタイル
これでほとんど完成ですが、画面幅の広いPCで見ると次のように吹き出しが幅いっぱいで表示されてしまいます。
これでは少し見た目が良くないので画面幅が700ピクセル以上の場合に限り幅いっぱいに広がらないようにする次のCSSを追加します。
/** PC向け */
@media screen and (min-width: 700px){
.right{
margin-left: 160px;
margin-right: calc(160px);
}
.left{
margin-right: 160px;
margin-left: calc(160px);
}
}
このようなCSSを追加すると次の画像のように左右にマージンが空いて吹き出しが中央に表示されるので見栄えも良くなります。
まとめ
ここでは会話形式で記事を書く方法について紹介しました。
もしもっと読者に記事の内容に興味を持ってもらいたかったり、記事を分かりやすくしたいならこのように会話形式にするのも１つの手です。
The post WordPressでキャラ同士が話す会話形式の記事を作る方法 first appeared on Fukuro Press.
]]>