ここあです。
WordPressテーマSTORK（ストーク）の
カスタマイズ方法をこちらの記事にまとめていますが
今回はわざわざ1記事にするほどでもない
ちょっとした小ネタのような
カズタマイズ方法もまとめておこうと思います。
いわゆる番外編というやつですね…。
私もSTORKを使うにあたり
いろいろなカスタマイズ方法を
探し回ったりもしましたが
ちょっとしたことを毎回調べるだけでも
結構面倒で時間がかかるんですよね＾＾；
だから…
せめて私のサイトを訪問してくれた方には
私がしているカスタマイズを
わざわざ他のサイトまで探しに行かずとも
分かるようにしておきたいと思ったわけです。
ほんの些細なカスタマイズでも
「これどうやってるんだろう？」って
気になることもあると思います。
ということで…
番外編としてまとめた小ネタは以下の6つ
- 記事中の画像に影を付ける
- 記事中の画像に罫線を付ける
- 記事の本文に蛍光マーカーをつける
- トップへ戻るボタンの色を変える
- ヘッダーロゴのサイズを変える
- 記事本文の行間を調整する
調整方法も記載しておくので
気になる項目があれば目次からジャンプしてくださいね＾＾
STORKをカスタマイズする前に…
STORKのカスタマイズは基本的に
全て子テーマの方で行ってください。
また、今回のカスタマイズはすべてCSSのみだけでできるので
CSSコードは以下の場所に記述してくださいね。
CSSコード記述先は…
ダッシュボードメニューから、外観 → カスタマイズをクリック
以下、追加CSSの部分に
コピーして貼り付けましょう。
ここの編集画面にコードを記述すると
ライブビューで確認しながら作業ができるので
非常に分かりやすく、やりやすいです。
それではカスタマイズ方法をご紹介します。
記事中の画像に影を付ける方法
↑ こんな影
ブログの記事に画像を入れる機会は非常に多いと思います。
画像を挿入した時に
端までちゃんと色のある画像であれば
特に気になることはありませんが…
上記のように、背景が白の画像を挿入した時は
何となく画像に境界線が欲しくなる時ってありますよね。
私は気になったので
画像に影を付けることで境界線を作りました。
画像に影を付ける方法は非常に簡単です。
まずは所定の場所に以下のCSSコードをコピペしましょう。
- 追加CSSにコピペ
img.dropshadow {
box-shadow: 0px 0px 4px #ccc;width:99%;margin:0 auto;}
2行目のdropshadowの文字部分はあなたが
好きな名前を入れてください。
例えば、aaaでもabcでも構いません＾＾
コードが書けたら必ず設定は保存してくださいね。
※できればアルファベットの方が良いです。数字だけはやめてください。
上記コードが追加CSSに記述できたら
あとは記事中の画像にコードを読み込ませるだけです。
記事中に貼り込んだ画像をクリックすると
以下の画面になるので、鉛筆マークをクリックします。
鉛筆マークをクリックすると画像の編集画面に移動するので
先ほど追加したCSSコードのclass名dropshadowを
画像CSSクラスの部分に入力します。
※上級者設定の中にあります。
入力後は画面右下に出る更新ボタンをクリックし
設定を保存すれば、プレビュー画面に
影付きの画像が反映されるようになります。
設定は以上です。
もし最初のCSSコードを
img.aaa {
box-shadow: 0px 0px 4px #ccc; width:99%; margin:0 auto;}
とした場合は、画像CSSクラスの部分には
aaaと入力すればOKです。
ちなみに#cccのカラーコードを変えると
影の色や濃度を変更することができます。
また、影とのバランスを考え
画像サイズの幅が99%になるように
設定してありますのでご了承ください。
あまり影がキツくなりすぎないよう
品の良い濃度にしてあるので物足りないという場合は
調整してみてくださいね。
記事中の画像に罫線を付ける方法
↑ こんな罫線
今度は先ほどと同じ感じではありますが
画像に影をつけるのではなく
罫線を付けて境界線をハッキリさせようというやり方です。
CSSコードは以下の通り
- 追加CSSにコピペ
img.line {
border: solid 1px #808080;
width:99%;
margin:0 auto;
}
今回のCSSクラス名はlineなので
先ほどと同様、画像に反映させる場合
CSSクラス名は、このようにlineと記述します。
この場合のCSSクラス名もあなたの好きなものに
変更してもらっても全然大丈夫です。
ただし、クラス名を変更した場合は
画像にCSSを反映させる時に
クラス名を間違えず記述するようにしてくださいね。
また、#808080のカラーコードを変えれば罫線の色を変えられるし
1pxを2pxや3pxにすると罫線の太さも変えられます。
さらにsolidを…
dashedにすれば破線にdottedにすれば点線に
することができます。
お好みで調整してみてください＾＾
画像に罫線を入れる方法は以上です。
簡単ですよね。
画像に影を入れるにしても、罫線を入れるにしても
あなたのお好みで構いませんが
影を入れるコードと、罫線を入れるコードは違うので
あらかじめ両方設定しておけば
画像のCSSクラスにdropshadowを入れるのか
lineを入れるのかで使い分けができるので非常に便利です。
記事の本文に蛍光マーカーを付ける方法
実は、私が一番最初にやりたかったのが
この蛍光マーカー風のカスタマイズ＾＾
使っている方も多いですよね。
この蛍光マーカー風のラインもCSSで簡単に追加できます。
追加CSSにコピペするコードは…
- 追加CSSにコピペ
.marker1 {
background: linear-gradient(transparent 30%, #ffffbc 30%);
}
たったこれだけ。
ついでに水色とピンクのコードも書いておきますね。
↓ ピンク色マーカーのコード
- 追加CSSにコピペ
.marker2 {
background: linear-gradient(transparent 30%, #ffdfef 30%);
}
↓ 水色マーカーのコード
- 追加CSSにコピペ
.marker3 {
background: linear-gradient(transparent 30%, #cce5ff 30%);
}
ひとまずCSSコードを貼り付けたら保存します。
今度は、マーカーが使いやすいように
ワードプレスのプラグインを使います。
ご存知の方も多いと思いますが
AddQuicktagというプラグインと
STORKは非常に相性がいいです＾＾
「AddQuicktag」のプラグインの追加方法
AddQuicktagのプラグインを追加していない場合は
非常に便利なプラグインなので追加しましょう。
追加の仕方は簡単。
ダッシュボードメニューから
プラグイン → 新規追加をクリックし
検索画面にAddQuicktagと入力すれば
以下の画面になります。
AddQuicktagのプラグインが表示されたら
今すぐインストールをクリックし
インストールが完了したら有効化します。
「AddQuicktag」の使い方
続いて、ダッシュボードメニューの設定から
AddQuicktagをクリックし
AddQuicktagの設定画面を開きます。
設定画面を開いたら
以下の画面の通り入力しましょう。
画像が少し見ずらいので記述しておきますね。
こちらからコピーしてください。※違うのは数字だけです。
- 蛍光イエロー：
<span class="marker1">と</span> - 蛍光ピンク ：
<span class="marker2">と</span> - 蛍光ブルー ：
<span class="marker3">と</span>
全て入力できたら、変更を保存をクリックしましょう。
AddQuicktagの設定が正しく出来ていれば
記事作成画面のビジュアルエディタの
Quicktagの中に蛍光マーカーが全て反映されます。
あとは記事を書きながら、マーキングしたい部分を選択し
マーキングしたい色を選択すればマーキングできます。
使い方は簡単なのでぜひ試してみてくださいね＾＾
ついでにコードの解説を少し付けておきます。
.marker1 {
background: linear-gradient(transparent 30%, #ffffbc 30%);
}
上記コードの
- transparent 30%はマーカーの幅（高さ）
#ffffbcはカラーコードなので色- 一番右の30%はグラデーションの幅
になります。
CSS編集画面で見ながらするとわかりやすいので
一度触ってみて、あなたの好みに合うように調整してくださいね。
トップへ戻るボタンの色をカスタマイズ！
次はトップへ戻るボタンの色の変更方法です。
ここまで来ると「どうでもええわ！」
というツッコミがきそうですが…（笑）
これは完全に趣味の世界です＾＾
そもそもSTORKのデフォルトカラーが
グレーというのがね…地味すぎです（笑）
トップへ戻るボタンは
もちろん画像に置き換えることもできるんですが
せっかくモバイルフレンドリーをコンセプトにしているストークなので
トップへ戻るボタンを無駄に大きくしたり
画像にして見づらくなるのは少し違うかな？と思います。
なので、今回は色の変更方法だけをご紹介致します。
こちらもCSSコードで一発です。
色は自由に変えてくださいね。
以下、CSSコードを追加すれば色が変わります。
- 追加CSSにコピペ
#page-top a{background: #0a69dd;}
上記コードであれば、私と同じブルーになるので
#0a69ddのカラーコードをあなたの好きな色に変更してください。
設定は以上です。
ヘッダーロゴの大きさを変える方法
私はヘッダーロゴ画像は使用していないんですが
最初に設定した時は「え？ちっちゃ！」ってなり
ちょっとビックリしました…＾＾；
なので、その時にサイズ調整の方法を学んだので
合わせて書いておきますね。
通常、ロゴの画像を挿入したばかりの
デフォルトのサイズというのは
こんな感じになると思います。（画像サイズによりますが…。）
↑ 見るからに小さくて残念。
だからと言って…
いちいち画像サイズを調整していたらキリがありません。
こういう時は素直にCSSで調整します。
そうすると、同じ画像のはずなのに…
でっかくすることができます！
これだけ目立てば
ヘッダーロゴだけでも見栄えは十分ですよね。
この時に私が追加したCSSコードがこちら…
- 追加CSSにコピペ
#logo img {
max-height: 320px;
width: auto;
}
このCSSコードの良いところは
画像に変倍がかからないということです。
つまり縦横の比率が変わりません。
ヘッダーロゴの最大サイズは
高さが320pxと決まっているので
それ以上大きくなることはありません。
なので、上記CSSコードは
ヘッダーロゴがMAXサイズの大きさになる
コードにしてあります。
サイズを調整したい場合は…
max-height: 320px;の数字を小さくするだけ。
数字の大きさに伴い
縦横比率を維持しながらサイズ調整ができます。
もしもヘッダーロゴを使っていて
サイズ調整をキレイにしたいという場合は
上記CSSコードをコピペして使ってみてくださいね。
特にグローバルメニューの上に
ヘッダーロゴを配置したい方には有効です＾＾
記事本文の行間を調整しよう！
最後に記事本文の行間を調整するCSSコードをご紹介します。
記事のフォントサイズや行間は
訪問者にとっては、読みやすいか、読みにくいか
大きく分かれるところにもなるので
かなり重要な要素です。
ここでは行間を調整するCSSコードを紹介するので
一度ご自身の目で行間を調整しながら
一番読みやすいと思われる幅に調整してみてください。
CSSコードはこちらです。
- 追加CSSにコピペ
.entry-content p {margin: 0 0 1.5em;line-height: 1.75em;}
調整方法は簡単です。
行間を変える場合はline-height: 1.75em;の数字1.75を
段落の幅を変える場合はmargin: 0 0 1.5em;の1.5を
調整してみてください。
数字が大きくなればなるほど広がりますが
emという単位は1文字分を表す単位なので
少し数字を大きくするだけでかなり広がります。
調整の際は私と同じように
小数点を使って調整してみてくださいね。
「STORK」のカスタマイズはコピーだけで簡単にできる！
私が微妙に使っている
ある意味どうでもいいようなカスタマイズから
ちょっと大事な行間の調整方法までまとめてみました。
CSSコードの使い方やコードの見方が分かれば
いろいろとカスタマイズしやすいテーマですが
CSSの知識がないと、自由にカスタマイズすることができず
他のブロガーと差別化しにくいのが
STORKのデメリットでもあります。
しかし、こうしてコピーだけで調整できるCSSコードを
記載しておけば、CSSの知識がなくとも
何となくカスタマイズできてしまうのも
STORKの良いところです＾＾
初めてCSSを触る人は
何が起こるか分からなくて怖い
と思ってしまうかもしれませんが
まずはあなたが「できそう！」って思う
簡単なカスタマイズから試してみてください。
ある程度分かってくるとカスタマイズはすごく楽しいです＾＾
以上、6つのカスタマイズ方法をご紹介しました。
このようなSTORKのほんの些細なカスタマイズ方法も
小ネタ集として少しずつ増やしていきたいと思います。
最後までお読みいただきありがとうございました！
