「ブログ(及びアフィリ)は最低限覚えたら、あとは実践しかない!」とか偉そうに言っているのですが、そもそもわたし自身”不安症勢”の、”出来れば先に知っておきたい派”なので、無料ブログからワードプレスに乗り換えるまでに、様々な先人さん達のサイトをめぐり勉強させて頂いたのですが、その中でもこの”CSS”に関しては、”アドオン導入”なんかと比べて「スタイルシートにコードを記述」というのが、自分でコードを記述する分難しく感じてしまい、お勉強が苦手な私は特に苦戦して時間がとられた記憶があります。今回は、「CSSとか未知すぎる...」と諦めてしまいそうな人の役に立つよう、”WPド初心者だからこそわかるCSSの要点”をこのブログの見出しタグ記述例を使って解説しようと思います。反映されない理由まとめともあれ『Cocoon』導入とにかく初心者ならテンプレは『Cocoon』一択!と言っていいほど使いやすいテンプレです。わたし自身まだ日が浅いのでこの『Cocoon』とその前身の『simplicity』位で、色々使ったわけではないですが、歴戦のブロガーも乗り換える人続出!?するほどよくできたテンプレです!『Cocoon』では最初から様々な便利機能が用意されており、目次を付けるとかつけないとか、ページごとにサイドバーを表示するとかしないとか、広告を表示するとかしな(ryとにかく様々な便利機能も最初から入っているので、実際、CSSのカスタマイズをしなくても、最初から普通に綺麗なサイト(ブログ)になるように作られてます。CocoonSEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。wp-cocoon.com(製作者のわいひらさんに感謝)テーマや子テーマの導入辺りがわからない場合は、わいひらさんの『Cocoon公式ページ』できちんと説明されてあるので、そちらを参考にされてください。私はウェブ系の勉強などしてないので、ここでいう「CSSの理解」とは「その意味」ではなく、「結局どうしたらいいのか」といった実践部分になります。用語など色々間違ってる部分や、勝手に解釈した表現もあるかと思いますが、私が実際にどのように理解したかと受け取ってください。(テストじゃないから、正しい用語なんてどうでもいいんだYO)CSS書き換えで何ができるのか?現時点で、すでに「Cocoon」を導入し、子テーマも設定出来たものとして話を進めていきます。「スタイルシートに規定のCSSコードを書くと、間違いが無ければ、コードに記されたとおりにサイトが変化する」と認識してます。具体的に、h2タグの色を変えたい場合は、スタイルシートに下記のコードを記述するだけで、色位なら簡単に変更できます。色番号;}色番号はグーグル検索で「色コード」などと検索したら、色見本とともに「#777」などといった感じで出てくるので、それをCSSにコピペするだけで、好きな色に変更できます。CSS」等と検索すれば、山のように改変例を示してくれたサイト様が出てくるので、そのCSSを組み合わせれば、徐々にオリジナルのCSSが作れるようになっていきます。超単純に言いのけてしまうと、サイト全体のデザインを変更できるのがCSS!*再三だけど、この表現が正しいかはわかりません。テーマエディター」になります。』と言う項目があるので、そこにネットから拾ってきたコードをコピペ(もしくは自前で記述)すると、その記述に間違いが無ければ、サイトに反映されます。当初、ネットでワードプレスの勉強をしてると、稀に「子テーマいらない」と言う人もいて、惑わされることもありましたが、これをいらないと言ってる人はおそらく、”サイトをテンプレのままどこもいじらず、素のままでいい、ただ日記が書きたい人”だろうと思います。親テーマのままスタイルシート(CSS)をいじると、バージョンアップの度に、変更が初期化されてしまうので、もし、将来CSSをいじることが無かったとしても、子テーマがあって損する事は無いので、兎に角「Cocoon」導入の際、「子テーマ」も一緒に入れておきましょう。下記のコードはどこかのサイト様から拾ってきたコードを元に少し改変して、シンプルですが自分の形にしたものです。こんなんでよければ、自由にコピペで使われてください。#0000FF;}これは超シンプルに、『下二重線』です。「border-bottom」が下線という事でしょう。「double」が2本線を、「8px」はピクセル?なのでサイズでしょうね。それと最後の「#数字」が色を表しています。結果として、「h1タグの下に2本線を青色で引く」というコードになってるという事です。#faf0e6;}上記で「真っ青に白文字」になります。「font-size」などは読んでの通り「文字のサイズ」だという事がわかると思います。「padding」などはいまいち理解してませんが、細かい部分は調べれば出てくるので割愛。文字を始める位置を少し後ろに下げたくて、多分そういったコードも調べると出てくるのでしょうが、結果同じ状態になればいいので、左に14PX幅で縦線を同じ色で入れる事で、結果論として、「文字が始まる位置が少し後ろに下がってる」という状態を作り出してます。#000000;}19年11月現在上記に変更。以前のh2タグは、上記説明通り、青囲み白文字にしていましたが、どうもこの色合いが、よく見る「購入はこちら」ボタンと似通っているのが気になったため変更しました。購入はこちら↑こんなの*押してもどこにも飛びません。変更後の上記のコードでは、白バックに黒文字、左側2重線に下線。CSSカスタマイズ前に先に知っておくべき注意点コードの書き換えは、間違えてる場合、実際は警告が出るので、間違ってる事がすぐにわかり、それは大した問題ではないのですが、多くの改造をしていると、実際に感じる不都合が出てくるので、簡単な事なんでそれを先に知っておくといいと思います。』(『』は要らない)で囲まれた文字が含まれてる事が良くあります。これはどうやら、”スタイルシート内で認識しないコード”のようで、この中にそのコードの効果がよく書かれてあります。』で「何を改変したコードなのか」などを記しておいた方が後々便利です。例:といった具合です。これは簡単なので一々書かなくても忘れないでしょうが、徐々に複雑に改造していくと、そのコードが何を改変していて、どこまでがそのコードの続きなのか?などが一目でわからなくなってしまうので、拾ってきたコードに目的が記されてない場合は、自前で書き足しておく方がいいと思います。「拾ってきたコードがCSSじゃなくてHTMLだった事件」という事がありました。私があまりにもド素人で犯してしまったミスで、ウェブスキルが少しでもあれば当たり前過ぎるのでしょうが、この”スタイルシート”に記述するのはCSS(言語?)だけのようで、ネットで紹介されている記述の中には似たような効果を持つ「HTML言語」や「JAVA言語」を記述してある事があります。慣れてくると記述がちょっと違う事がわかってくるのですが、簡単なコードに慣れてきて、少しづつ複雑なコードを調べていくと、ウェブスキルのある方サイトに到達していき、そういった場所では「これ記述したらこうなるよ!」と”知ってる前提”でレクチャーされてることもあって、何言語かまでわざわざ記されてない事もあるので、ド素人の場合注意した方がいいかも。(私だけかも)”CSS丸パ●リ”の間はまだわかりやすいけれど、そのうち、応用して、色んなサイトからの”組み合わせ”にするようになると、一文だけ違う言語のコードを入れてしまう事もありえるので、そのサイトで記述してるのが本当にCSSかを確認して記述するようにしましょう!少しでも勉強されてる方からは、ばかげて見えるかもしれませんが、私のように超ド素人の所から独学でワードプレスを覚えていってると、そういう事もあるので、ある程度パッと見てCSSじゃなさそうだとわかるまでは、元に戻すのも簡単なhタグの改変からやると覚えやすいんじゃないかな?と思います。』が無い場合は、自前で何を表してるのかを書き足すCSSコードか確認するド素人の時にCSSコードも複雑なものを見てしまうと、とっつきから諦めそうになるので、「h1の色変え」のみ等といった、単純なCSSから一旦コードを丸パク参考にして、サイトの変化を確かめながら、徐々に自分で適当に改変して行くと覚えやすいんではないかと思います。私の記述した見出しも一旦●パクして構わないんで、参考にされてみて下さい。191103_h2タグ変更に伴い、追記編集。最初からビジネスを目的として、完全特化型ブログを3か月や半年の期間かけて作る人は別ですが、素人がブログで収入を得るのに、いきなりアフィリエイト広告を張っても売り上げる事は難しいと思います。Security』の設定で数回はミスを許容しているので、今までアクセス拒否になったことはなかったのですが、自分のミスや、キーボードの不具合などで、...2019.07.24ブログ運営やっぱり海外からワードプレスにログインできなくなるやっぱりやってみないとわからない事がいっぱいある。失敗から学ぶとはよく言うけれど、実際に失敗してわかることは多い。失敗するのは気持ちのいいものじゃないです。「ブログ収入は100記事からがスタート」と言われる理由。...2019.06.04ワードプレス【WPド初心者】超簡単ファビコン・ヘッダー画像自作からワードプレス設定まで解説!サイト(ブログ)の顔になる、ファビコンとヘッダー画像を手元にあるソフトだけで簡単に自作してみました。実際に海外から更新してみる今わたしはベトナム・ハノイから更新している。旅行中のブログの書き方。4日間やって感じたのは、「無理がある」という事がわかった。検索ワードの選定ができれば、ネットにある情報だけでも、ワードプレスの設定やドメイン、レンタルサーバーの設定等まで間違いなく出来る(出来た)のですが、そろそろネットだけで仕入れられる情報には無理が出てき出しました。定期的に見つかる激安チケットなら、国内旅行よりお得かも!?航空券のみの販売だけでなく、ホテル付パッケージから、海外ツアーの検索もできます。利用したことない人の為にチケット購入方法を簡単に解説してます。!?】2020.02.082020.02.09【アナリティクス】「権限がありません」は、フィードバック送信で解決できる?2020.01.31ダナンの大人気レストラン『マダムラン』に本格ベトナム料理を食べに行ってみた。2週間)9ハノイ/地域情報10ハノイ/ホテル2香港・旅行情報8九龍半島/地域情報1香港島/地域情報4香港島/ホテル2トラベルハック10カード・おかね4マネパカード1楽天銀行1趣味・生活14グッズ5ゲーム6パソコン/スマホ3雑記20収入論14ブログ運営14ワードプレス3カテゴリー別人気記事WPログインミス、ERROR~IP~blockをスマホテザリングで解除する手順2019.04.192019.07.24【WPド初心者】超簡単ファビコン・ヘッダー画像自作からワードプレス設定まで解説!2019.10.282019.10.30【コピペOK】【実例付】ワードプレス超ド初心者向け見出しタグ記述例2019.03.232019.11.04スポンサーリンクなかのひと学歴皆無なため、以前は、ビル解体などの超ハードな肉体労働(ボーリング)を親から斡旋され、働いていましたが、人生を満喫するため会社に所属するのを辞めて海外を旅することにしました。一般的庶民家庭なので、今まで海外旅行経験もなく、ウェブスキルも”完全独学”ですが、世界で見つけた”楽しい事・面白いもの”をいっぱい紹介して、出来るだけ多くの人に価値のある情報が届けられればと思います。「後悔しない人生」をモットーにブログ収益で「働く場所に縛られず、競争しない生き方」を実践中。(今、注目しているは「ベトナム」になります。関連記事やっぱり海外からワードプレスにログインできなくなる2018.09.242019.01.29旅行中のブログの書き方。!?】2020.02.082020.02.09【アナリティクス】「権限がありません」は、フィードバック送信で解決できる?2020.01.31ダナンの大人気レストラン『マダムラン』に本格ベトナム料理を食べに行ってみた。2週間)9ハノイ/地域情報10ハノイ/ホテル2香港・旅行情報8九龍半島/地域情報1香港島/地域情報4香港島/ホテル2トラベルハック10カード・おかね4マネパカード1楽天銀行1趣味・生活14グッズ5ゲーム6パソコン/スマホ3雑記20収入論14ブログ運営14ワードプレス3カテゴリー別人気記事WPログインミス、ERROR~IP~blockをスマホテザリングで解除する手順2019.04.192019.07.24【WPド初心者】超簡単ファビコン・ヘッダー画像自作からワードプレス設定まで解説!2019.10.282019.10.30【コピペOK】【実例付】ワードプレス超ド初心者向け見出しタグ記述例2019.03.232019.11.04スポンサーリンクなかのひと学歴皆無なため、以前は、ビル解体などの超ハードな肉体労働(ボーリング)を親から斡旋され、働いていましたが、人生を満喫するため会社に所属するのを辞めて海外を旅することにしました。一般的庶民家庭なので、今まで海外旅行経験もなく、ウェブスキルも”完全独学”ですが、世界で見つけた”楽しい事・面白いもの”をいっぱい紹介して、出来るだけ多くの人に価値のある情報が届けられればと思います。「後悔しない人生」をモットーにブログ収益で「働く場所に縛られず、競争しない生き方」を実践中。(今、注目しているは「ベトナム」になります。→タイトルとURLをコピーしました。