・CSSとかよくわからん・でもかっこいい(かわいい)ブログを作りたいといったゼイタクな悩みを抱える初心者ブロガーさん向けにお話ししていきます。・この部分の色変えたい~・余白空きすぎ~・表示が崩れちゃうなんてこと、ありますよね。どんなに優秀なテーマを導入したって、そこは人が作るものですからね。それにせっかくワードプレスでブログを運営するなら、多少のことなら自分でなんとかしたいですよね。Chromeのデベロッパーツールです!スポンサーリンクChromeのデベロッパーツールとは?デベロッパーツールは、Webブラウザで動くアプリケーションの開発者用にGoogleが提供するChromeの拡張機能です。HTMLやCSSといったフロントのマークアップはもちろん、ネットワークやセキュリティーに関する問題を発見するのにすごく役立つ便利なツールです。リス太ようは機能がめっちゃ豊富なんですね。全部覚えにゃあかんのかいなって?大丈夫です!ほんの一部だけでOK。使い方をわかりやすくイメージしてもらうためには、実際の例で見てみるといいですよね。そんなわけで、リス太が奥さんのブログでやったCSS修正を例にとりましょう!ご多聞に漏れず、奥さんのブログもCocoonで作ってます。スキンを女子向けにしたら、なんかね、、、サイドバーの閉じるボタンがないじゃん!!!ってなったわけです。スキン側の問題なのか、もともとリス太が設定してたCSSの問題なのかはわかりませんが、とにかく閉じれないじゃん!ってなったわけです。Chromeを使いましょう!)まずはお使いのPCのF12ボタンを押しましょう。右上の「...」が縦に並んでいる設定ボタンから「その他ツール→デベロッパーツール(D)」をクリックしてもいいですよ。マウスを右クリックして「検証」でもいいです。すると、右側もしくは下側になんやかやわーわー書いてある画面が表示されましたね。わーわーって...汗これが、デベロッパーツールです。デベロッパーツールのウィンドウ左上にある□に矢印アイコンがあるボタンをクリックします。その状態で、本来閉じるボタンが存在しているであろう箇所にマウスオーバーすると、、、おおっ!やっぱりホントは閉じるボタンあるんじゃ~ん!ってことがわかるわけです。閉じるボタンがホントはある場所をクリックすると、CSSがバ~ッと出てきます。CSSの修正などについては、また別の記事で書こうと思いますが、今回はボタンが非表示なんじゃなくって、色が白だったから背景と同化して見えない状態になっちゃってたってことがわかるわけです。#fff;」ってなってるでしょ??これは、CSSのカラーコードってやつで、「#fff」は白色を意味します。背景も白なんだから、そりゃ見えんわなってことですね。今回は、サイト全体のバランス、他のテキストのカラーを考えて、「#555」に変更してみます。ちなみにデベロッパーツール上でですよ。おお!閉じるボタンが現れました!!デベロッパーツールの便利なのは、ブラウザ上で簡易な修正をしたらその場で修正結果が確認できちゃうとこなんです。いえ、修正はこれで終わりじゃないっすよ。デベロッパーツール上で修正してみただけですからね。リス太ちゃんとCSSを修正したらホントに完了です。修正したCSSの部分をコピーします。デベロッパーツール上でコピーできますよ。#555;}これをそのまま、ワードプレスの管理画面で「外観→テーマの編集→スタイルシート(style.css)」と進み、一番下にでもペロッとペーストして更新したら完了です!※作業前にバックアップはかならず取りましょうね!それにしても、便利ですよね。黄色にしてみたり、いろいろできちゃうわけです。しないけどね笑F5ボタンを押してリロード(更新)したら、Webサイトの最新の状態に戻りますよ~。便利なChromeのデベロッパーツール、つかってみましょうね。スポンサーリンクおわりに便利な機能、Chromeのデベロッパーツールの使い方でした。|非エンジニアのためのネット副業ブログ関連記事サーバ・ソフトBitnamiでApacheを再起動する方法Bitnamiわからんシリーズ(?)、今回はBitnamiのApache再起動方法です。UbuntuなどのOSでのApache再起動を何回試してもうまくいかない!そんなときはこの方法で一発解決!!サーバ・ソフト「FaceYourManga」「ZEPETO」|ハイセンスなイラストアバターを作成できるおすすめサービスせっかく運営しているブログですから、ぜひとも固定ファンを獲得したいところ。それには「自分の名前や写真を晒す」のが良い方法ですが、それもなかなか...。それなら、ハイセンスなイラストアバター作成サービス「FaceYourManga」と「ZEPETO」がオススメです!サーバ・ソフト【2019年度版】YouTubeの関連動画を非表示にする方法YouTubeの関連動画、言っちゃ悪いけど邪魔ですよね。Encrypt!Webサーバに直接インストールするためにコマンドを書かなきゃいけなくて、少しハードルが高いですよね。Bitnamiユーザーからすると参考サイトも少なくて...。大丈夫!意外にカンタンにできちゃうんです!サーバ・ソフト【超初心者さん向け】パーミッションの意味と使い方UNIX系のシステムではファイルやディレクトリのパーミッション(permission)の理解が必須です。そんなの俺には関係ないって??いえいえ。ワードプレスでブログを構築するのにパーミッションを知らないなんてあり得ません!詳しくお話ししますね。普段はIT会社のマーケティング担当。世知辛い世の中をのらりくらりと生き抜くために見つけたのがネット副業!リス太自身も毎日修行しながら成長しています!!とくに非エンジニアだからわかる「わかんな~い...」な悩みを解決するのが快感な今日この頃。普段はIT会社のマーケティング担当。世知辛い世の中をのらりくらりと生き抜くために見つけたのがネット副業!リス太自身も毎日修行しながら成長しています!!とくに非エンジニアだからわかる「わかんな~い...」な悩みを解決するのが快感な今日この頃。