css」タグアーカイブ

CSSコードの貼付けで注意する事。

CSSコードに✕マークが?

今回、囲み枠をHTMLからCSSで指定する方法を選択したのですが、未熟者故に失敗も。
カスタムCSSに該当コードを貼り付けたのですが、✕マークと共に以下のエラーコードが!

expected icon at line 5,col 4.
直訳で「5行目、4列目に予期されるアイコン。」

コロンを半角で打ち直しても変化なし。
さて、どうするか?

参考にしたサイト

https://webliker.info/91098/

web兄さん、ありがとうございました。

CSSをチェックするサイト

https://jigsaw.w3.org/css-validator/

貼付けたコードを検証すると、この通り。問題ありません。
そもそも、無知な僕が書いたコードではないので当たり前ですね。

コードが完璧という事は?

ん?ふと、コードの左側の空きが気になりました。

もしやコピペしたからコードが左詰めになっていないのが原因か?
試してみると、あっさり解決。

皆さんは僕の様に無知では無いので大丈夫かと思いますが、もし参考になれば幸いです。

囲み枠の表示をHTMLからCSSへ。

以前のHTMLでの囲み枠で最後の行と枠との隙間が気になり色々弄ってみたのですが、僕の力では解決できず。

CSSによるスタイル指定に変更。

カスタムCSSに以下のコードを追加。
参考サイト。

https://saruwakakun.com/html-css/reference/box#section1

サルワカさん、ありがとうございます。
サルに近い僕には必要なサイトです。

※CSSのコードを追加する時は Simple Custom CSS が解りやすく便利です。

◆CSS

.box2 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #6091d3;/*文字色*/
background: #FFF;
border: solid 3px #6091d3;/*線*/
border-radius: 10px;/*角の丸み*/
}
.box2 p {
margin: 0;
padding: 0;
}

CSSよ呼び出すHTMLは以下の記述。

◆HTML

<div class=”box2″>
<p>ここに文章</p></div>

サンプル文章▼

以前のHTMLでの囲み枠で最後の行と枠との隙間が気になり色々弄ってみたのですが、僕の力では解決できず。
CSSによるスタイル指定に変更。
カスタムCSSに以下のコードを追加。

WordPress 珍道中 その1(Twenty Seventeenのカスタマイズ)

超初心者のくせに、カスタムをしたがる。

もう~、まったくの初心者なので、手探り状態で、Twenty Seventeenテーマをカスタマイズしています。(出来るのか?)
最初にインストールしたプラグインは

●TinyMCE Advanced ビジュアルエディタを拡張できる。
●Count Per Day 訪問、閲覧者のカウント。
●Category Order and Taxonomy Terms Order カテリゴーの順番を入れ替えられる。

この3つ位で、初心者なので、少しずつ、覚えていこうと思いましたが、トップページの記事タイトルの文字の太さ!細くないか~い。と気づいてしまいます。(気づくのが、遅い)カテゴリーの固定ページへ飛ぶと、なぜか、太字になっている。なぜ、統一しないのだろうか?統一したいな~と、不満に思いながら、google先生頼りに検索しまくり(いつも頼りっぱなし)、いい方法を見つけた(アラコキさん?のHP)ので、同じ様に困っている方へ報告しておきます。font-weightをboldに変更するというものです。

次に、難関のCSSへの記述が待っていますが、初心者ですから、CSSは聞いた事があっても、直接変更せずに、子テーマを作って、変更?など、知りません。面倒くさい。もう、嫌!子テーマ作って、それを認識させて、ファイルに納める?あ~面倒!そう思って、これはちょっと勉強しようとYoutube(本気で勉強する気が無い)で探していると、『Wordpress徹底解説!CSSをカスタマイズ!簡単にCSS編集が出来るプラグイン紹介』なる動画を発見!

WordPress関係の動画をみつけて、喜ぶ。

これ、よくある初心者にやさしい動画だ~!(お前にぴったり)これを見ていると、先程、面倒だと思っていたCSSの子テーマ造りがプラグインで簡単に出来る!何てすばらしい!そこで紹介されていた、Simple Custom CSSを早速インストールすると、外観の項目にカスタムCSSという項目が現れる。あとは、クロームブラウザで、対象のタイトルを反転させ、マウスの右クリックで検証すれば、右側にCSSの一覧が出るので、文字の太さを変更するのは、だいたい、この辺と見当がつく。(大丈夫か?)あとはそのコードをコピペし、何とか、トップページも固定ページも同じ様にタイトル文字が太字になりました。めでたし、めでたし。

以下の記述をカスタムCSSに加えれば、問題は解決するはずです。(そもそも、問題かどうか?)

h2, .home.blog .entry-title {
color: #666;
font-size: 20px;
font-size: 1.25rem;
font-weight: bold;
}

自己責任でお願いしますね。

このサイトはロリポップのライトプラン、月々250円で作成されています。ロリポップなら、WordPressもメールも無料。WordPress始めるなら、サポートも充実しているロリポップ!がオススメです。