ストーク【STORK】で追加したCSSを全て紹介【初心者向け】

追加CSSの説明




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

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

CSSって何?って人はすみません。グーグルで一度調べて下さい。簡単に言えばブログの見た目を良くするのに非常に重要なプログラミングツールです。こんな事言いながらぼくもほとんど理解してないんですけどね。

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

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

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

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

パソコンを眺める女性

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

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

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

テーマの更新時にCSSが消えるのを防ぐための子テーマなわけだが?

「そのための「子テーマ」じゃんw知らねえのかよww」なんて言われそうですが知りませんよぼくは情弱なんだから。

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

まー要はですね、「テーマの編集」のすぐ上に「CSSの編集」ってあると思うのですがそこから一番下の「追加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;
}
.kaerebalink-box,
.booklink-box,
.pochireba{
background: #f9f9f9;
margin: 1em 0;
padding: 1em;
min-height: 160px;
border: 5px #eee solid;
border-radius: 0.5em;
-webkit-box-shadow: 0 0 25px #f1f1f1 inset;
-moz-box-shadow: 0 0 25px #ddd inset;
-o-box-shadow: 0 0 25px #f1f1f1 inset;
box-shadow: 0 0 25px #f1f1f1 inset;
}
.kaerebalink-image,
.booklink-image,
.pochireba img{
width:30%;
float:left;
margin:0 1em 0 0;
text-align: center;
}
.kaerebalink-name a,
.booklink-name a,
.pochi_name a{
font-weight:bold;
font-size:1.2em;
}
.pochi_name a{
margin-bottom: 0.8em;
display: block;
}
.kaerebalink-powered-date,
.kaerebalink-detail,
.booklink-powered-date,
.booklink-detail,
.pochi_seller,
.pochi_time,
.pochi_post{
font-size:0.6em;
}
.kaerebalink-link1,
.booklink-link2{
margin-top:0.5em;
}
.kaerebalink-link1 div,
.booklink-link2 div{
display: inline-block!important;
font-size:0.8em!important;
margin-right:0.2em!important;
}
.kaerebalink-link1 div a,
.booklink-link2 div a{
display: block;
width: 12em;
text-align: center;
font-size: 1.3em;
background: #888;
color: #fff;
border-bottom: 5px #777 solid;
border-radius: 0.3em;
padding: 0.2em 0.7em;
text-decoration: none;
margin: 0 0.2em 0.7em 0;
line-height: 1.8;
}
.kaerebalink-link1 div a:hover,
.booklink-link2 div a:hover{
border-bottom-width: 3px;
color:#fff;
text-decoration: none;
position: relative;
bottom: -2px;
opacity: 0.6;
filter: alpha(opacity=60);
}
.booklink-link2 .shoplinkamazon a,
.booklink-link2 .shoplinkkindle a,
.kaerebalink-link1 .shoplinkamazon a{
background: #E47911;
border-bottom-color: #C26A15;
}
.booklink-link2 .shoplinkrakuten a,
.kaerebalink-link1 .shoplinkrakuten a{
background: #bf0000;
border-bottom-color: #800000;
}
.booklink-link2 .shoplinkyahoo a,
.kaerebalink-link1 .shoplinkyahoo a{
background: #7B6696;
border-bottom-color: #3B3049;
}
.kaerebalink-link1 div a img{
margin:0;
}
.pochireba-footer,.booklink-footer{
clear:left;
}
@media screen and (max-width: 640px){
.kaerebalink-box,.booklink-box,.pochireba{
min-height:100px;
}
}
.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装飾です。

こちらに関してはストークの開発元であるオープンケージのサイトに出てくるのと全く同じものですのでそちらを参照して下さい。

※スマホ画面で見ると時は気に入ってますが、パソコンで見るとどうしてもボタンがズレて見える事があります。気になった時もありましたが、どうしてもわからないのでそのままにしています。

こういうやつね。

 

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;
}
デフォルトでは真っ赤のバックグラウンドを好きな色に変更できます。
恐ろしく優秀なエンジニアの山本りゅうけんさんという方がいるのですが、その人が「バックグラウンドは安心感のある緑系が押してもらえる確率も高まるぞ!」とおっしゃられてましたのでその通りにしてみました。こういうのですね。

まとめ

はい。いかがだったでしょうか。皆さんの快適なストークブログライフを祈っております。こだわればまだまだ出てくるんでしょうけれど、とりあえず記事も書きましょう笑。

気に入ったらフォローお願いします。

ダリーウメモのtwitter

 

 




追加CSSの説明
ダリーのインスタ!ダリスタグラム!!

荒ブルース!!なギター弾き語りをお届け中!!

ツイッターフォロワー大募集中!!目指せ10000人!

ダリッター!なるべく有益な事をつぶやきます!フォロワー大募集中!!

ABOUTこの記事をかいた人

35歳から人生と稼ぎ方を見直しに入ったスロースタートな気絶系ブルースマン、ダリーです。大阪市在住。情弱オッサンからの脱却方法をご提案致します。ブルースと転職関連記事が多め。 当ブログは「自分の人生ってホント、面白くないよな〜…」と言う潜在的な悩みを抱えている人たちに向けて書いてます!!!  ネットを駆使して、情弱だったただの社畜オッサンが激ヤバになっていく過程をお届けします。みんなにもそうなってほしいですね〜。 ブログタイトル通り、ブルース好き。2018年10月からYouTubeも始めました。