WordPressテーマ編集時にChromeの「要素を検証」を使う。

ブログを開設して以来、初めて大幅にデザインを変えました。

childcare for beginners © by didbygraham

スポンサーリンク

ご存知の通り、このブログはWordPressで作成しています。

ブログを始めた動機はプロフィールに書いてある通りなのですが、どうせやるなら練習用に不動産ホームページで使う予定のWordPressで始めたいと思ったからです。

ほぼWordPress初心者だった私にとっては、プラグインを試してみるとか、AnalyticsのデータをとってSEO的なことへの理解の手助けにするなど、色々プラスもあるかなあ、と。

実際のところ、プラグインを試したり、Analyticsのデータを見たり、ということはしたのですが、開業準備が進んでからは、全く手が回らず、ずっと現状維持な感じ。特にデザインは少々飽きてきていました。そこで今回の変更です。

 

テーマを変更してちょっと不具合のあるところだけ手直ししたのですが、私のような素人が、必要なことだけ場当たり的に調べていじっていると、どこをいじれば変更できるのか、すぐにはわからないこともしばしば。style.cssを開いてじーーっと探していたらどこにもなくて、他にCSSファイルが用意されていたり、とか。

どこをいじればいいのかわからん、というのはかなりストレス。本業の不動産HP作成中も、最初は何度も「どこ?どこ?」というのでストップすることもしばしばでした。

たぶん、HTMLとかCSSとかPHPとか、ちゃんと理解している人ならそう苦労はないのかも知れませんが、そこを腰を据えて身につける余裕もなし。今実現したいことだけ実現できればいい、という気持ちでやっているので、「どこなんだよ」とやっている時間はかなり無駄に感じます。

それで、ある時期から、Google Chrome の「要素を検証」ってのを多用するようになりました。ご存知の方も多いとは思うのですが、私のような者の使いかたは次のような感じです。

 

Google Chrome でページを開いて右クリックすると出てくるこれ。

右クリックメニュー

 

要素を検証を選ぶと、下の方にそのページのソースが出てきます。左がHTML、右がCSS。見たい部分にマウスをあてて右クリックすると、その部分が反転し、下の該当のHTMLも反転されたり、適用されているCSSスタイルなどが出てきます。

要素を検証中の図

全部の機能について私にはわからないのですが、色々ボタンをいじってればなんとなくわかるところもあります。ちなみに、左側にstyle.cssファイルの中身を全部表示することもできます(説明が適当ですみません)。

それに加えて、下の欄で直接コードを書き換えたり、消してみたりすると、上のページの見た目も変わるというシミュレーション機能(?)もあり。例えばフォントサイズを変えたらどんな見た目になるかな、というのを、実際のファイルをいじらず試してみることもできます。

シミュレーションしてみることで、「間違いなくここだな。」と特定することもできます(という感じで特定しなきゃならないのが素人の哀しいところ)。

参考にしたい他のサイトに行ってこの機能を使えば、「なるほど」と思うこともあります。私のようなものには解読しきれないこともしばしばですが…。

 

私は不動産HPを作る時に、この機能を多用しました。自分でテーマを一から作るわけじゃないし(そんな能力もない)、フリーのテーマもテーマによって作りが違うので、どこがどうなってるのか探すのには重宝しました。

わからなくなったら、Chromeで開いて要素を検証。該当部分を探し当てたら、テキストエディタで編集してアップロード。これを繰り返す感じです。

 

こういう機能は、今やほとんどのブラウザに付いていて、一時期はOperaを使うことが多かったです。サイトを作るようになる前から機能があること自体は知ってはいたのですが、「何のためにあるの?」ってな感じでした。後々これほど多用するようになるとは…。

こんな風にChromeなどで、「該当部分を探しては編集する」 みたいなやり方をするのって、なんだかすごく迂遠な気がして、まさに素人ならではというところなのかも知れませんが、こういうのがなかったら、不動産HPも自分の思うようには作れなかっただろうなあ、と思います。もっといい方法がありそうですけど…。

 

売買仲介サイトを、タブレットやスマホでも見やすいように作ろうと苦戦中なので、このブログもレスポンシブルなテーマを入れてみましたが、なかなかに難しいです。サイトアップを早くする方がいいというのはわかっているのですが、他の準備もいまいちなので…。

このブログのデザインも、ちょっとかわいすぎる感じになっちゃいました(苦笑)。前のに慣れていると違和感ありますね。手を加えたいとは思うものの、前と同じようにずっと放置になるかもしれませんね。

関連記事とスポンサーリンク

スポンサーリンク


関連しているかもしれない記事

griffin

グリフィンです。不動産業もWordPressも関わるようになってまだわずか。それを差し引いてお読みください。コメントはお気軽にどうぞ。

2件のコメントが “WordPressテーマ編集時にChromeの「要素を検証」を使う。” にあります

  1.  グリフィンさん、ごぶさたしてました。
     時々はブログ覗かせていただいてましたが、自分自身がバタバタしていて、何もコメントできないでいてすみませんでした。
     6月1日から行政書士業を開業します。最低限、事務所と自宅(貸家)の家賃をカバーできるくらい稼がないといけないですが、ハードルは結構高い気がしています。
     自分の地元でなく、妻の地元ということで、完全アウェーではないですが、知り合いは多いわけではありません。
     ご縁ができた一人ひとりの方に誠意を持って対応し、徐々にお客さんが広まってくれたらと思っています。
     ホームページはJimdoで作りました。素人っぽい出来栄えかもしれませんが、当分はそれで進めたいと思います。
     業種は違いますが、グリフィンさんのお客さんに対する心遣いなど、とても参考になっています。これからも見習って頑張っていきたいと思っていますので、よろしくお願いします。

    1. ラストショーさん、お久しぶりです。

      行政書士開業、おめでとうございます!

      お知り合いの少ない土地での開業にはご苦労も多いかもしれませんが、最初に顧客開拓での努力をされれば、かえって知り合い頼りよりも良いかも知れませんよ。

      私もまだまだ、本当にまだまだです。何もかも自分でしなければならず、結果も全て引き受けなければいけませんが、でも、何もかも自分の思うようにやれます。

      はじめは、色々なことにナーバスにもなりましたが、今は自分の好きなようにやればいい、と思うようになりました。

      業種は違えど、是非今後とも交流お願いします。

      応援しています!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">