マーカー風・アンダーライン風のラインを引くcss

LPの作成などによく使われるマーカーや、アンダーライン風のラインを引くCSSをサンプルしてみます。

今年もよろしくお願いします

<span class="marker1">今年もよろしくお願いします</span>
.marker1 {
    background: linear-gradient(transparent 0%, #FFFF00 0%);
    font-weight: bold;
}

今年もよろしくお願いします

<span class="marker2">今年もよろしくお願いします</span>
.marker2 {
 background: linear-gradient(transparent 50%, ##FFFF00 0%);
font-weight: bold; 
}

今年もよろしくお願いします

<span class="marker3">今年もよろしくお願いします</span>
.marker3 {
 background: linear-gradient(transparent 70%, ##FFFF00 0%);
font-weight: bold; 
}

今年もよろしくお願いします

<span class="marker4 ">今年もよろしくお願いします</span>
.marker4 {
 background: linear-gradient(transparent 80%, ##FFFF00 0%);
font-weight: bold; 
}

今年もよろしくお願いします

<span class="marker5">今年もよろしくお願いします</span>
.marker5 {
 background: linear-gradient(transparent 90%, ##FFFF00 0%);
font-weight: bold; 
}

蛍光グリーン

今年もよろしくお願いします

<span class="marker6">今年もよろしくお願いします</span>
.marker6 {
background: linear-gradient(transparent 50%, #bbff6ae0 0%);
font-weight: bold; 
}

今年もよろしくお願いします

<span class="marker7">今年もよろしくお願いします</span>
.marker7 {
background: linear-gradient(transparent 60%, #bbff6ae0 0%);
font-weight: bold; 
}

WordPressで子テーマを作る時にやってしまいがちなこと

WordPressで子テーマを作成する際に間違えがちなことを書いてみました。

子テーマのテンプレート名を間違えているため子テーマとして認識されない

子テーマをThemeディレクトリにアップロードしたのに、WordPressのテーマを見ても認識されていない、
または壊れています、とか出ているとき。

テーマ名を間違えていませんか?

外観>テーマの画面には、例えば当サイトで使用している、
「」と書いてあっても、子テーマフォルダ内のstyle.cssに書くときは、
親テーマのフォルダ名である「」を使用する必要があります。

テーマ選択のところでは「有効: Twenty Seventeen」と書いてありますが、
子テーマ内で親テーマを指定するときにはフォルダ名にある「twentyseventeen」を使用します。
親テーマ内のスタイルシートにも「Theme Name:Twenty Seventeen」と書いてありますが、
これを入れても認識されません。

親テーマフォルダについている名前をそのまま使用しましょう。

OK

/*
Theme Name: Twenty Seventeen-child
Template: twentyseventeen
*/

OK

/*
Theme Name: twentyseventeen-child
Template: twentyseventeen
*/

NG

/*
Theme Name: twentyseventeen-child
Template: Twenty Seventeen
*/

また、子テーマのstyle.cssに最低限必要なのは上のような
Theme Name: xxx-child
Template: xxx
の2行です。

※子テーマフォルダに最低限必要なファイルは、
functions.php と style.css です。

 

子テーマをアップロードして認識されているのに反映されない・・・

もしかしたら、有効化してないのでは?
ただアップされて認識されただけでは使用されません。
通常のテーマと同様にテーマ選択画面で子テーマの「有効化」をクリックしましょう。

Adsense などの広告タグを設置するのに簡単なプラグイン

アドセンスの自動広告を入れるとき、
「サイトの <head></head> タグの間に AdSense コードをコピーして貼り付け・・・」
と表示されます。
このような場合、WordPressで、広告用の設定の内容なテーマを利用している場合、
いちいちheader.phpを触るのも面倒です。

プラグインでサクッとコードを挿入できます。

Head and Footer

https://ja.wordpress.org/plugins/header-footer/

こちらをインストールします。
WordPressのメニュー>設定から 「Head and Footer 」の設定画面を開きます。

こんな画面が開くので、

こちらで、
<head></head>の中だったら、
一番左にコピペしたコードを入れるだけです。
枠外に書いてある通り、左側は全てのページの<head>内、右側はホームページのみのヘアで内になります。

アドセンス自動広告だったら、左側の枠内にペタッと貼り付けるだけで、
すぐ広告が反映されます。(だいたい)

便利。

無料素材を探してます

サイト作成に絶対に必要になる画像やイラスト素材。

いちから十まで自分で作るとかしてたら、無理ですから、ガンガン使わせて頂いています。

画像系

pixabay (無料)

https://pixabay.com/ja
ワールドワイドです。なので、ちょっと日本人とは違う感覚のものもありますが、
斬新なものもたくさんあります。しかも解像度が高いものもユーザー登録で無料がうれしいです。

イラスト・アイコン系

icooon-mono
言わずと知れたアイコン配布代表格。お世話になってます。

https://icooon-mono.com/

silhouette-ac.com

https://www.silhouette-ac.com/
イラストACの兄弟(姉妹?)
シルエットですが、アイコン的なものが欲しいときにも。

FLAT ICON DESIGN

http://flat-icon-design.com/
フラットアイコンが多数。かなり使えます。商用利用できて無料と、ありがたい限りです。シンプルでちょいかわいい。
充実してますが、ひとつひとつが凝っているのでバリエーションは少な目かもしれません。

ribbon-sozai.com

http://www.ribbon-sozai.com/

リボン専門のイラスト。ちょっと可愛すぎるけど、そういうテイストのサイトだったらぴったり。

リボンフリークス

http://ribbon-freaks.com/

デザイン心あふれるリボン素材。Webにも、紙にも使えそう。

背景・シームレス系

cssをsassに変換できるツール

これの利用意図はいろいろあると思います。
私の場合は、sassがあったのに、気づかずcssでいじっちゃったときとかに、
sassに入れなおすのは面倒なので、これでcssからsassにして、sassファイルに貼り付けたりします。つまりミスったときです・・・。

でも便利。
もちろんsassをcssに変換もできます。

CSS 2 SASS/SCSS CONVERTER

http://css2sass.herokuapp.com/

WordPressを丸ごとコピーするプラグイン

WordPressを引っ越ししたり、同じようなサイトを作りたいときに便利なプラグインです。

WordPressのコピーにはsqlファイルのインポートなどで行えますが、少々高度になったりphpmyadminの使い方に不慣れな場合にはこのプラグイン「Duplicator」がおすすめです。

これのすごいところは、投稿、画像だけでなく、設定、プラグインまでも完コピしてしまうところです。

しかもインストーラーを作成してくれるので、作成も導入もどちらも管理画面から作ってくれるんです。

はじめてのコピーでも怖くない、と言いたいところですが、実際はところどころでデータチェックが完了できなかったりで、必ずこれで対応できるかというとそうでもありません、経験上。ですので、これでできればラッキーだということで、まずは「Duplicator」で試して、無理だったらsqlファイルのインポートなどで行うのがいいです。

Duplicator

Duplicator – WordPress Migration Plugin