「自分は無理…」と思ってる人のための転職方法はこちらをクリック

ストーク【STORK】で追加したCSSを全て紹介【初心者向け】。子テーマは使ってません。

追加CSSの説明

ブルースな日々を送ってますダリーウメモです。

さて、ワードプレスの有料テーマって今じゃ、最初から素晴らしいCSSが揃っていて書くことに専念できるテーマなんてのもあると思いますが(JINとか)、一昔前はある程度自分でいろんなサイトを見たりして研究が必要だったじゃないですか。

CSSって何?って人はすみません。グーグルで一度調べて下さい。簡単に言えばブログの見た目を良くするのに非常に重要なプログラミングツールです。

100%理解しないといけないのか?と言われるとそうでもないので安心してください。ほとんどのブロガーは何となくわかる…レベルだと思いますので。

この記事ではとりあえずぼくが「追加CSS」に付記しているCSSを全部書きますのでブログ運営の参考にして下さい。その効能も覚えている限り書いていきます。

注意
※このCSSでワードプレスが消えた!とか表示が狂った!とか言われてもぼくは責任とれませんのでよろしくお願いしますね。バックアップとってからやって下さいね。念のため。

「子テーマ」使ってない!わからない!って人はストーク の追加CSSに書いていこう!

パソコンを眺める女性

注意!「テーマの編集」画面で自分で書いたCSSはテーマの更新時になくなってしまうぞ。

大前提として、CSSってダッシュボードの「外観」→「テーマの編集」から直接いじれる画面になるじゃないですか。

でもそこに自分でCSSを追加しても、定期的にある「テーマの更新」をすると全部消えちゃうんですよ。

テーマの更新時にCSSが消えるのを防ぐための子テーマなわけですが、ぼくは使ってません。

「そのための「子テーマ」じゃんw知らねえのかよww」なんて言われそうですが・・・。ややこしそうなので導入してません。

オープンケージ(ストーク を作った偉い会社)のサイトにも子テーマの作り方書いてますけどパッと見ぼくは理解できませんでしたね。まー理解しようともあまりしませんでしたが笑。

まー要はですね、「テーマの編集」のすぐ上に「CSSの編集」ってあると思うのですがそこから一番下の「追加CSS」ってところをクリックすればCSSだけ書いていけばいい画面が出てきます。そこに記入すれば、テーマのアップデートがあっても消えないのでおすすめですよ。

「追加CSS」にCSSを書き込めば、テーマを更新してもCSSは継続される!消えないのです!

要は「テーマの編集」という画面に潜り込んで直接CSS書き込むことはやめろってことですね。だってテーマを更新すればせっかく書いたものが消えるんだから。

「子テーマ」をちゃんと使える人は直接書いてもいいんですけどね。「子テーマ」に書けば更新しても消えないみたいですよ。ぼくは子テーマ導入の方法が分からなかった人なので「親テーマ」、たった1つ最初からあるテーマの「追加CSS」に書き込んでます。ぼくはそういう人間です。では以下にコピペはります。

ダリーウメモが導入している追加CSS。とりあえずこのあたり入れておこう。

.voice .icon img{
width:60px;
}
.under {
 background: linear-gradient(transparent 50%, #ffff00 50%);
  }
.header.headercenter #logo img {max-height: initial;}
.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #FFC107;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0;
    padding: 0;
}

/*————————————–
ヨメレバ・カエレバ(レスポンシブ)
————————————–*/
.booklink-box, .kaerebalink-box{
padding:25px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
min-width: 160px;
text-align: center;
}
.booklink-image img, .kaerebalink-image img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:30%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
position:relative;
top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
width: 100px !important;
min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:calc(100% – 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin: 2px 0px;
padding:10px 0px;
}
}

.header-info a{
background-color:#68be8d;
}
.entry-content {
font-size:18px;
line-height : 1.7 ;
}
.entry-content p {
margin-bottom: 1.8em;
}
.btn-wrap.lightning a{
background: #7cfc00;
border-color: #7cfc00;
color: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}
.btn-wrap.lightning a:hover{
background: #EC7373;
color: #fff;
}
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーココマデ
はい。スキマがひどく空いているのはぼくのクセです。情弱なので間が開いていないとCSSを区別できないのです。
CSSを効用ごとにタイトルをつける事もできるのですがぼくの場合ストーク からのメッセージ、「何かがうまく行かなかったようです。また時間を置いてからお試し下さい」という旨の悲しすぎるメッセージが表示されます。
タイトル無しだと正常に作用するのです。だからタイトル入れてません。だから順に説明していくしかないのです。

1番初めのCSSについて。吹き出しのアイコンが消失、縮小するのを防ぎます。

これですね。

.voice .icon img{
width:60px;
}
こいつはぼくの中でクソ重要でして、これが無いと吹き出しの横のアイコンが拡大したときにどんどん小さくなって最後には消えるという症状が出ます。めっちゃ悲しい事が起こります。こういう症状が出る方はこのCSSを追加しまょう。

2番目のCSSについて。蛍光ペンのようなハーフラインが引けます。

この部分です。

.under {
 background: linear-gradient(transparent 50%, #ffff00 50%);
  }
でも、実際にはこれだけで蛍光ハーフラインは書けません。HTMLと組み合わせてやっ表示されるようになるのです。ちなみにHTMLだけでCSSを使わないとこのような全部色が変わったものしかできません。CSSは見た目をオシャレに見やすくする効果がある事がわかって頂けると思います。
HTMLとの組み合わせはプラグインの「Add Quick Tag」で。知らない人はググって下さい笑。
画像のように開始タグ<span class=”under”>と終了タグ </span> で囲めば、囲んだ部分はちゃんとハーフラインになります。Add Quick Tagって要はHTMLを簡単に管理できるプラグインなのです。

3番目のCSSについて。ブログタイトルロゴを大きく表示できます。

この部分です↓

.header.headercenter #logo img {max-height: initial;}

これを入れないとタイトルロゴがとても小さく表示されて、悲しくなってしまうかもしれません。小さく表示されちゃう人は入れてみて下さい。

まだブルースとか言うてます

4番目のCSSについて。ボックス囲み線が表示できます。

こちらですね。長いですけれど。

.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #FFC107;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0;
    padding: 0;
}
はい。こちらも先述のadd quick tag と組み合わせて使います。
add quick tag 設定画面
開始タグには<div class=”box28″>
<span class=”box-title”>POINT</span>
<p>   と入力。
終了タグには </p>
</div> と入力して下さい。 名前は「ポイント囲み線」としています。そうするとこんなのができます。

ブログを始めるといいことばっかりなのでブログを始めるべきです!!POINT

 

5番目のCSSについて。アマゾン、楽天などのCSS装飾です。

こういうやつね。こんな感じで表示されます。

/*————————————–
ヨメレバ・カエレバ(レスポンシブ)
————————————–*/
.booklink-box, .kaerebalink-box{
padding:25px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
min-width: 160px;
text-align: center;
}
.booklink-image img, .kaerebalink-image img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:30%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
position:relative;
top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
width: 100px !important;
min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:calc(100% – 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin: 2px 0px;
padding:10px 0px;
}
}

6番目のCSSについて。ヘッダー下お知らせテキストのバックグラウンド色を変更できます。

この部分ですね。

.header-info a{
background-color:#68be8d;
}
デフォルトではピンクみたいなバックグラウンド色ですが、「コイツ、やるな感」を演出するために色を変えてみましょう。上記の一行を追加してお好きなカラーコードに書き換えて下さい。ぼくの場合はグリーンです。上記で言う所の#68be8dの箇所ですね。若竹色らしいです。
カラーコードの検索は「原色大辞典」が大変便利です。

7番目のCSSについて。ブログ記事の文字の大きさや行間を変えられます。

この部分ですね。

.entry-content {
font-size:18px;
line-height : 1.7 ;
}
.entry-content p {
margin-bottom: 1.8em;
}
これに関してはヒキコモリズムというすごいブログの記事で紹介されてましたのでそのまま借用しました。ぼくのブログ、実は文字が大きめなんですよ。
ストークのデフォルトの文字の大きさは少し小さく感じるので変えておく方がいいと思います。

8番目のCSSについて。【ボタン】大きい目立つボタンのバックグラウンドを変えられます。

この部分ですね。

.btn-wrap.lightning a{
background: #7cfc00;
border-color: #7cfc00;
color: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}
.btn-wrap.lightning a:hover{
background: #EC7373;
color: #fff;
}
デフォルトでは真っ赤のバックグラウンドを好きな色に変更できます。
恐ろしく優秀なエンジニアの山本りゅうけんさんという方がいるのですが、その人が「バックグラウンドは安心感のある緑系が押してもらえる確率も高まるぞ!」とおっしゃられてましたのでその通りにしてみました。こういうのですね。

まとめ

はい。いかがだったでしょうか。皆さんの快適なストークブログライフを祈っております。こだわればまだまだ出てくるんでしょうけれど、とりあえず記事も書きましょう笑。
カエレバに関しては2019年1月に大きな仕様変更がありましたね。このあたりの記事もどうぞ。
アマゾンのAPIに関する規約変更!カエレバの仕様変更でぼくが取った対策を解説します。【SANGO用設定も追記】カエレバ仕様変更の対策まとめ。アマゾン重視したい人はAmazon associates Link Builderというプラグインが超便利!ページスピード改善のためにやったことを総まとめ! これやって、遅かったらもう諦めるしかねえわ!!ストーク編!!STORK(ストーク)のページスピードを高速化する方法を説明。スピード改善のためにやるべき事【2019最新版】