Navigate
X

スポンサードリンク

スポンサードリンク

初心者の説明するCSSが判りやすい！これでCSSが実行可能

<p><img data-attachment-id&equals;"1742" data-permalink&equals;"https&colon;&sol;&sol;www&period;eskyjapan&period;com&sol;method&sol;css&sol;attachment&sol;sep&lowbar;355215221321&lowbar;tp&lowbar;v&sol;" data-orig-file&equals;"https&colon;&sol;&sol;i0&period;wp&period;com&sol;www&period;eskyjapan&period;com&sol;wp-content&sol;uploads&sol;2017&sol;04&sol;SEP&lowbar;355215221321&lowbar;TP&lowbar;V&period;jpg&quest;fit&equals;1600&percnt;2C1066&amp&semi;ssl&equals;1" data-orig-size&equals;"1600&comma;1066" data-comments-opened&equals;"0" data-image-meta&equals;"&lbrace;&quot&semi;aperture&quot&semi;&colon;&quot&semi;0&quot&semi;&comma;&quot&semi;credit&quot&semi;&colon;&quot&semi;&quot&semi;&comma;&quot&semi;camera&quot&semi;&colon;&quot&semi;&quot&semi;&comma;&quot&semi;caption&quot&semi;&colon;&quot&semi;&quot&semi;&comma;&quot&semi;created&lowbar;timestamp&quot&semi;&colon;&quot&semi;0&quot&semi;&comma;&quot&semi;copyright&quot&semi;&colon;&quot&semi;&quot&semi;&comma;&quot&semi;focal&lowbar;length&quot&semi;&colon;&quot&semi;0&quot&semi;&comma;&quot&semi;iso&quot&semi;&colon;&quot&semi;0&quot&semi;&comma;&quot&semi;shutter&lowbar;speed&quot&semi;&colon;&quot&semi;0&quot&semi;&comma;&quot&semi;title&quot&semi;&colon;&quot&semi;&quot&semi;&comma;&quot&semi;orientation&quot&semi;&colon;&quot&semi;0&quot&semi;&rcub;" data-image-title&equals;"SEP&lowbar;355215221321&lowbar;TP&lowbar;V" data-image-description&equals;"" data-image-caption&equals;"" data-medium-file&equals;"https&colon;&sol;&sol;i0&period;wp&period;com&sol;www&period;eskyjapan&period;com&sol;wp-content&sol;uploads&sol;2017&sol;04&sol;SEP&lowbar;355215221321&lowbar;TP&lowbar;V&period;jpg&quest;fit&equals;300&percnt;2C200&amp&semi;ssl&equals;1" data-large-file&equals;"https&colon;&sol;&sol;i0&period;wp&period;com&sol;www&period;eskyjapan&period;com&sol;wp-content&sol;uploads&sol;2017&sol;04&sol;SEP&lowbar;355215221321&lowbar;TP&lowbar;V&period;jpg&quest;fit&equals;638&percnt;2C425&amp&semi;ssl&equals;1" class&equals;"aligncenter size-large wp-image-1742" src&equals;"https&colon;&sol;&sol;www&period;eskyjapan&period;com&sol;wp-content&sol;uploads&sol;2017&sol;04&sol;SEP&lowbar;355215221321&lowbar;TP&lowbar;V-1024x682&period;jpg" alt&equals;"初心者には初心者の説明するCSSが判りやすい！" width&equals;"640" height&equals;"426" &sol;><br &sol;>&NewLine;&NewLine;<&excl;-- WP QUADS Content Ad Plugin v&period; 2&period;0&period;98 -->&NewLine;<div class&equals;"quads-location quads-ad1" id&equals;"quads-ad1" style&equals;"float&colon;none&semi;margin&colon;0px&semi;">&NewLine;&NewLine;<&sol;div>&NewLine;<&sol;p>&NewLine;<h3 class&equals;"style3b">なんだか見劣りするページ<&sol;h3>&NewLine;<p>WordPressで、ブログ記事を書いていてもなぜか様にならない。<br &sol;>&NewLine;記事を投稿するも、他のブログと比較するとなんだか見劣りするような気がする。<br &sol;>&NewLine;きちんとしたブログ記事を見ると「見出し」のデザインがかっこいい。<br &sol;>&NewLine;見出しをかっこよくするだけで、かなり見栄えがかわるはず。<br &sol;>&NewLine;でも、このデザインに関するところをカスタムしようと思った時に必ずぶつかる壁が<strong>「CSS」<&sol;strong>。<br &sol;>&NewLine;どうも<strong>「CSS」<&sol;strong>を活用すれば、かなりブログ記事の見栄えがよくなるところまでは分かります。<br &sol;>&NewLine;でも、<strong>「CCS」<&sol;strong>を解説している方たちは詳しすぎて、初心者にはかえってわかりにくい。<br &sol;>&NewLine;それは、初心者がわからないところが、詳しい方にはわからなくて、初心者にとっては重要なポイントの説明をすっ飛ばしているため、せっかく詳しく説明しているのに、出だしでつまずいていて、その先の説明に手が出ないと思うんです。<br &sol;>&NewLine;私は初心者。<&sol;p>&NewLine;<p>初心者の私が、初心を忘れない間にWordPressでの記事内の見出しデザインをCSSで活用して、カスタムした方法を記事にしました。<br &sol;>&NewLine;CSSってなに<br &sol;>&NewLine;いやいや、こんなことはどうでもいいはず、とにかく初心者は、一応できればいいのです。<br &sol;>&NewLine;一応、実現できれば一つ目の大きな壁は乗り越えられると私は思っています。<&sol;p>&NewLine;<h3 class&equals;"style3b">記事の構成<&sol;h3>&NewLine;<p>まずは見出しデザインをカスタムするための手順を記載します。<br &sol;>&NewLine;その後、CSSの簡単な解説を初心者なりに記載します。<&sol;p>&NewLine;<h4 class&equals;"style4a">WordPressの見出しデザインをカスタムする方法<&sol;h4>&NewLine;<p>「WordPressの管理画面」　－　「外観」　－　「カスタムCSS」<br &sol;>&NewLine;（CSSカスタマイズと間違わないように注意してください）<br &sol;>&NewLine;「カスタムCSS」を開くと、メモ帳のようなエディタっぽいものが立ち上がります。<&sol;p>&NewLine;<p>そこに下記のタグをコピペしてください。<&sol;p>&NewLine;<blockquote><p>h3&num;danraku3&lbrace;<br &sol;>&NewLine;padding&colon; 0&period;4em 0&period;5em&semi;<br &sol;>&NewLine;color&colon; &num;494949&semi;<br &sol;>&NewLine;background&colon; &num;f4f4f4&semi;<br &sol;>&NewLine;border-left&colon; solid 5px &num;7db4e6&semi;<br &sol;>&NewLine;border-bottom&colon; solid 3px &num;d7d7d7&semi;<br &sol;>&NewLine;&rcub;<&sol;p><&sol;blockquote>&NewLine;<p>次に、投稿記事内の見出しにしたい文字群を下記のタグで囲みます。<&sol;p>&NewLine;<blockquote><p>&lt&semi;h3 id&equals;&&num;8221&semi;danraku3&&num;8243&semi;&gt&semi;見出しにしたい文字群&lt&semi;&sol;h3&gt&semi;<&sol;p><&sol;blockquote>&NewLine;<p>※注意としては、必ずテキストエディタでこのタグを入れてください。<br &sol;>&NewLine;変更の保存を行う。<br &sol;>&NewLine;以上、で作業は終了です。<br &sol;>&NewLine;さぁ、プレビューしてみて下にあるように表示されていれば大成功です。<&sol;p>&NewLine;<h3 id&equals;"danraku3">見出しにしたい文字群<&sol;h3>&NewLine;<p><img data-attachment-id&equals;"259" data-permalink&equals;"https&colon;&sol;&sol;www&period;eskyjapan&period;com&sol;remember&sol;regulation&sol;attachment&sol;004366&sol;" data-orig-file&equals;"https&colon;&sol;&sol;i0&period;wp&period;com&sol;www&period;eskyjapan&period;com&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;004366&period;jpg&quest;fit&equals;500&percnt;2C500&amp&semi;ssl&equals;1" data-orig-size&equals;"500&comma;500" data-comments-opened&equals;"0" data-image-meta&equals;"&lbrace;&quot&semi;aperture&quot&semi;&colon;&quot&semi;0&quot&semi;&comma;&quot&semi;credit&quot&semi;&colon;&quot&semi;&quot&semi;&comma;&quot&semi;camera&quot&semi;&colon;&quot&semi;&quot&semi;&comma;&quot&semi;caption&quot&semi;&colon;&quot&semi;&quot&semi;&comma;&quot&semi;created&lowbar;timestamp&quot&semi;&colon;&quot&semi;0&quot&semi;&comma;&quot&semi;copyright&quot&semi;&colon;&quot&semi;&quot&semi;&comma;&quot&semi;focal&lowbar;length&quot&semi;&colon;&quot&semi;0&quot&semi;&comma;&quot&semi;iso&quot&semi;&colon;&quot&semi;0&quot&semi;&comma;&quot&semi;shutter&lowbar;speed&quot&semi;&colon;&quot&semi;0&quot&semi;&comma;&quot&semi;title&quot&semi;&colon;&quot&semi;&quot&semi;&comma;&quot&semi;orientation&quot&semi;&colon;&quot&semi;0&quot&semi;&rcub;" data-image-title&equals;"004366" data-image-description&equals;"" data-image-caption&equals;"" data-medium-file&equals;"https&colon;&sol;&sol;i0&period;wp&period;com&sol;www&period;eskyjapan&period;com&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;004366&period;jpg&quest;fit&equals;300&percnt;2C300&amp&semi;ssl&equals;1" data-large-file&equals;"https&colon;&sol;&sol;i0&period;wp&period;com&sol;www&period;eskyjapan&period;com&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;004366&period;jpg&quest;fit&equals;425&percnt;2C425&amp&semi;ssl&equals;1" class&equals;"aligncenter size-medium wp-image-259" src&equals;"https&colon;&sol;&sol;www&period;eskyjapan&period;com&sol;wp-content&sol;uploads&sol;2017&sol;02&sol;004366-300x300&period;jpg" alt&equals;"" width&equals;"300" height&equals;"300" &sol;><br &sol;>&NewLine;今回は、見出し3を使用しました<br &sol;>&NewLine;見出しは1～6までありますので、この手順で6個とも登録しておけばいいと思います。<br &sol;>&NewLine;タグ内の「3」の数字を変更すればOKです。<&sol;p>&NewLine;<h5 class&equals;"style5a">見出しデザインが豊富<&sol;h5>&NewLine;<p>見出しデザインも世の中には豊富に提供されています。<br &sol;>&NewLine;参考までに、見出しデザインを提供しているサイトのリンクを貼っておきます。<&sol;p>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;saruwakakun&period;com&sol;html-css&sol;reference&sol;h-design">CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選<&sol;a><&sol;p>&NewLine;<h3 class&equals;"style3b">CSSの超簡単な説明<&sol;h3>&NewLine;<p>Webページを作成するのに最初は、HTMLしかありませんでした。<br &sol;>&NewLine;だから、HTMLを駆使すれば、テキストをデザインすることも可能です。<br &sol;>&NewLine;後に、CSSが登場しました。<br &sol;>&NewLine;それからはHTMLの負担を減らし、役割分担をするようになりました。<br &sol;>&NewLine;デザインに関する部分はCSSにお任せしようとなったわけ。<br &sol;>&NewLine;HTMLタグで、CSSタグを見てくださいと指示します。<br &sol;>&NewLine;CSSでは、それを実現するタグがあり、それを表現しています。<br &sol;>&NewLine;ですので、CSSはHTMLと同じフォルダーにある必要があります。<br &sol;>&NewLine;初心者にありがちなのが、「WordPressの記事と同じフォルダーのCSSはどこなんだ？」だと思います。<br &sol;>&NewLine;別の部分にCSSタグがあっても読めませんので、思ったように表現できません。<br &sol;>&NewLine;詳しいCSSサイトにはこの部分は当然知っている者として説明はされていませんので、初心者は出だしでつまずいているかもしれないと思い記事にしました。<&sol;p>&NewLine;<h3 class&equals;"style3b">参考<&sol;h3>&NewLine;<p>WordPressの記事のテキストにはタグが無くても文字を表示していますが、本来あるはずのタグが省略されています。<br &sol;>&NewLine;なので、「カスタムCSS」に下記のタグを追記すると、通常の文字の大きさや色などを変化さすことも可能です。<&sol;p>&NewLine;<blockquote><p>p&lbrace;<br &sol;>&NewLine;background-color&colon;black&semi;<br &sol;>&NewLine;color&colon;white&semi;<br &sol;>&NewLine;font-size&colon;27px&semi;<br &sol;>&NewLine;&rcub;<&sol;p><&sol;blockquote>&NewLine;<p>&NewLine;<&excl;-- WP QUADS Content Ad Plugin v&period; 2&period;0&period;98 -->&NewLine;<div class&equals;"quads-location quads-ad3" id&equals;"quads-ad3" style&equals;"float&colon;none&semi;margin&colon;0px&semi;">&NewLine;&NewLine;<&sol;div>&NewLine;<br &sol;>&NewLine;&NewLine;<&excl;-- WP QUADS Content Ad Plugin v&period; 2&period;0&period;98 -->&NewLine;<div class&equals;"quads-location quads-ad4" id&equals;"quads-ad4" style&equals;"float&colon;none&semi;margin&colon;0px 0 0px 0&semi;text-align&colon;center&semi;">&NewLine;&NewLine;<&sol;div>&NewLine;<&sol;p>&NewLine;&NewLine;

Tags: CSS超初心者
葉隠 瀧: このサイトを管理しているのが葉隠 瀧です。
Related Post
  1. 高品質のエクストラバージンオリーブオイルを見分ける方法

    高品質の『エクストラバージンオ…

  2. 車の運転中にアクセルが戻らなくなり、ブレーキも効かなくなった時の対処法

    ギアをニュートラルに入れると、…

  3. googleマップのショートカットボタンの作成方法（表示名も自由）

    スマホのGoogleマップでは…