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

追加CSSの説明

SHARE

本ページには広告が含まれています。

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

さて、ワードプレスの有料テーマって今じゃ、最初から素晴らしい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装飾です。

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

10年後の仕事図鑑

posted with ヨメレバ
堀江 貴文,落合 陽一 SBクリエイティブ 2018-04-05
Amazon
Kindle
楽天ブックス
楽天kobo
7net

/*————————————–
ヨメレバ・カエレバ（レスポンシブ）
————————————–*/
.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月に大きな仕様変更がありましたね。このあたりの記事もどうぞ。
ページスピード改善のためにやったことを総まとめ！ これやって、遅かったらもう諦めるしかねえわ！！ストーク編！！ ブログのページスピードを高速化する方法を解説。キャッシュ系プラグインは不要です。

 

前の記事

ストーク ブログの爆速化を目指す！対策まとめ
STORK【ストーク】ブログの表示が遅い、そして重い！ぼくが導…

次の記事

震災刈り解説。M字薄毛・髪の量、ボリュームが無くなってきた中年…
薄毛で悩む男性を勇気付けるタイトル