WPテーマ「STORK」カスタマイズいろいろ!〜厳選小ネタ集6選

WPテーマ「STORK」カスタマイズいろいろ!〜小ネタ集

 

ここあです。

 

WordPressテーマSTORK(ストーク)

カスタマイズ方法をこちらの記事にまとめていますが

 

今回はわざわざ1記事にするほどでもない

ちょっとした小ネタのような

カズタマイズ方法もまとめておこうと思います。

 

いわゆる番外編というやつですね…。

 

私もSTORKを使うにあたり

いろいろなカスタマイズ方法を

探し回ったりもしましたが

 

ちょっとしたことを毎回調べるだけでも

結構面倒で時間がかかるんですよね^^;

 

だから…

せめて私のサイトを訪問してくれた方には

 

私がしているカスタマイズを

わざわざ他のサイトまで探しに行かずとも

分かるようにしておきたいと思ったわけです。

 

ほんの些細なカスタマイズでも

「これどうやってるんだろう?」って

気になることもあると思います。

 

ということで…

番外編としてまとめた小ネタは以下の6つ

  • 記事中の画像に影を付ける
  • 記事中の画像に罫線を付ける
  • 記事の本文に蛍光マーカーをつける
  • トップへ戻るボタンの色を変える
  • ヘッダーロゴのサイズを変える
  • 記事本文の行間を調整する

 

調整方法も記載しておくので

気になる項目があれば目次からジャンプしてくださいね^^

 

STORKをカスタマイズする前に…

STORKのカスタマイズは基本的に

全て子テーマの方で行ってください。

 

また、今回のカスタマイズはすべてCSSのみだけでできるので

CSSコードは以下の場所に記述してくださいね。

 

CSSコード記述先は…

ダッシュボードメニューから、外観 → カスタマイズをクリック

ダッシュボードメニュー

 

 

以下、追加CSSの部分に

コピーして貼り付けましょう。

dropshadow

 

 

ここの編集画面にコードを記述すると

ライブビューで確認しながら作業ができるので

非常に分かりやすく、やりやすいです。

 

それではカスタマイズ方法をご紹介します。

 

記事中の画像に影を付ける方法

ストークカスタマイズ

↑ こんな影

 

ブログの記事に画像を入れる機会は非常に多いと思います。

 

画像を挿入した時に

端までちゃんと色のある画像であれば

特に気になることはありませんが…

 

上記のように、背景が白の画像を挿入した時は

何となく画像に境界線が欲しくなる時ってありますよね。

 

私は気になったので

画像に影を付けることで境界線を作りました。

 

画像に影を付ける方法は非常に簡単です。

まずは所定の場所に以下の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コードは以下の通り

/* 画像に線を付ける*/
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にコピペするコードは…

/* マーカー強調カスタマイズ黄色 */
.marker1 {
background: linear-gradient(transparent 30%, #ffffbc 30%);
}

たったこれだけ。

 

ついでに水色とピンクのコードも書いておきますね。

 

ピンク色マーカーのコード

/* マーカー強調カスタマイズピンク色 */
.marker2 {
background: linear-gradient(transparent 30%, #ffdfef 30%);
}

 

水色マーカーのコード

/* マーカー強調カスタマイズ水色 */
.marker3 {
background: linear-gradient(transparent 30%, #cce5ff 30%);
}

 

ひとまずCSSコードを貼り付けたら保存します。

今度は、マーカーが使いやすいように

ワードプレスのプラグインを使います。

 

ご存知の方も多いと思いますが

AddQuicktagというプラグインと

STORKは非常に相性がいいです^^

 

AddQuicktag」のプラグインの追加方法

AddQuicktagのプラグインを追加していない場合は

非常に便利なプラグインなので追加しましょう。

 

追加の仕方は簡単。

ダッシュボードメニューから

プラグイン → 新規追加をクリックし

 

検索画面にAddQuicktagと入力すれば

以下の画面になります。

プラグイン追加画面

 

 

AddQuicktagのプラグインが表示されたら

今すぐインストールをクリックし

インストールが完了したら有効化します。

 

AddQuicktag」の使い方

続いて、ダッシュボードメニューの設定から

AddQuicktagをクリックし

AddQuicktagの設定画面を開きます。

 

設定画面を開いたら

以下の画面の通り入力しましょう。

AddQuicktag編集画面

 

 

画像が少し見ずらいので記述しておきますね。

こちらからコピーしてください。違うのは数字だけです。

  • 蛍光イエロー:<span class="marker1">と</span>
  • 蛍光ピンク :<span class="marker2">と</span>
  • 蛍光ブルー :<span class="marker3">と</span>

全て入力できたら、変更を保存をクリックしましょう。

 

AddQuicktagの設定が正しく出来ていれば

記事作成画面のビジュアルエディタの

Quicktagの中に蛍光マーカーが全て反映されます。

AddQuicktag

 

 

あとは記事を書きながら、マーキングしたい部分を選択し

マーキングしたい色を選択すればマーキングできます。

AddQuicktag使い方

 

 

使い方は簡単なのでぜひ試してみてくださいね^^

 

ついでにコードの解説を少し付けておきます。

/* マーカー強調カスタマイズ黄色 */
.marker1 {
background: linear-gradient(transparent 30%, #ffffbc 30%);
}

 

上記コードの

  • transparent 30%はマーカーの幅(高さ)
  • #ffffbcはカラーコードなので色
  • 一番右の30%はグラデーションの幅

になります。

 

CSS編集画面で見ながらするとわかりやすいので

一度触ってみて、あなたの好みに合うように調整してくださいね。

 

トップへ戻るボタンの色をカスタマイズ!

トップへ戻るボタン

 

次はトップへ戻るボタンの色の変更方法です。

 

ここまで来ると「どうでもええわ!」

というツッコミがきそうですが…(笑)

これは完全に趣味の世界です^^

 

そもそもSTORKのデフォルトカラーが

グレーというのがね…地味すぎです(笑)

 

トップへ戻るボタンは

もちろん画像に置き換えることもできるんですが

 

せっかくモバイルフレンドリーをコンセプトにしているストークなので

トップへ戻るボタンを無駄に大きくしたり

画像にして見づらくなるのは少し違うかな?と思います。

 

なので、今回は色の変更方法だけをご紹介致します。

 

こちらもCSSコードで一発です。

色は自由に変えてくださいね。

 

以下、CSSコードを追加すれば色が変わります。

/* Topへ戻るボタン */
#page-top a{
background: #0a69dd;
}

 

上記コードであれば、私と同じブルーになるので

#0a69ddのカラーコードをあなたの好きな色に変更してください。

設定は以上です。

 

ヘッダーロゴの大きさを変える方法

私はヘッダーロゴ画像は使用していないんですが

最初に設定した時は「え?ちっちゃ!」ってなり

ちょっとビックリしました…^^;

 

なので、その時にサイズ調整の方法を学んだので

合わせて書いておきますね。

 

通常、ロゴの画像を挿入したばかりの

デフォルトのサイズというのは

こんな感じになると思います。(画像サイズによりますが…。)

ヘッダーロゴサンプル

↑ 見るからに小さくて残念。

 

だからと言って…

いちいち画像サイズを調整していたらキリがありません。

 

こういう時は素直にCSSで調整します。

そうすると、同じ画像のはずなのに…

ヘッダーロゴサンプル

 

 

でっかくすることができます!

 

これだけ目立てば

ヘッダーロゴだけでも見栄えは十分ですよね。

 

この時に私が追加したCSSコードがこちら…

/* ヘッダーロゴ画像サイズ調整 */
#logo .h1.img img {
max-height: 320px;
width: auto;
}

 

このCSSコードの良いところは

画像に変倍がかからないということです。

つまり縦横の比率が変わりません。

 

ヘッダーロゴの最大サイズは

高さが320pxと決まっているので

それ以上大きくなることはありません。

 

なので、上記CSSコードは

ヘッダーロゴがMAXサイズの大きさになる

コードにしてあります。

 

サイズを調整したい場合は…

max-height: 320px;の数字を小さくするだけ。

 

数字の大きさに伴い

縦横比率を維持しながらサイズ調整ができます。

 

もしもヘッダーロゴを使っていて

サイズ調整をキレイにしたいという場合は

上記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」のカスタマイズはコピーだけで簡単にできる!

「STORK」のカスタマイズはコピーだけで簡単にできる!

 

私が微妙に使っている

ある意味どうでもいいようなカスタマイズから

ちょっと大事な行間の調整方法までまとめてみました。

 

CSSコードの使い方やコードの見方が分かれば

いろいろとカスタマイズしやすいテーマですが

CSSの知識がないと、自由にカスタマイズすることができず

 

他のブロガーと差別化しにくいのが

STORKのデメリットでもあります。

 

しかし、こうしてコピーだけで調整できるCSSコードを

記載しておけば、CSSの知識がなくとも

何となくカスタマイズできてしまうのも

 

STORKの良いところです^^

 

初めてCSSを触る人は

何が起こるか分からなくて怖い

と思ってしまうかもしれませんが

 

まずはあなたが「できそう!」って思う

簡単なカスタマイズから試してみてください。

 

ある程度分かってくるとカスタマイズはすごく楽しいです^^

以上、6つのカスタマイズ方法をご紹介しました。

 

このようなSTORKのほんの些細なカスタマイズ方法も

小ネタ集として少しずつ増やしていきたいと思います。

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

最後までお読みいただきありがとうございました!

 

合わせて読みたい!

 

WPテーマ「STORK」カスタマイズいろいろ!〜小ネタ集

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。