ワードプレス

ワードプレスで他サイトのソースコードを調べる方法!装飾やテーマを参考にしたい。

初心者でも簡単にスタートすることができ、無料ブログと同じ感覚+豊富なプラグインでサイトデザインもしっかり作り込めるワードプレス

今では企業のHPでもワードプレスを使用して運営している会社もあり、年々ユーザーは増え続けています。

この記事を読んでいただいているあなたもワードプレス運営者だと思いますが、他のサイトのきれいなサイトやデザイン・装飾が気になるケースもあると思います。

htmlコードがわかれば自分自身のサイトにも使えるのに・・・と思ったときに調べる方法を知っていると今後のサイト運営の幅が広がってきますよね。

 

そこで今回の記事ではワードプレスに関する

ワードプレスで他サイトのソースコードを調べる方法!装飾やテーマを参考にしたい。

についてフォーカスしていきます。

Contents

ワードプレスで他サイトのソースコードを調べる方法!

ワードプレス 他サイト ソースコード

他サイトの記事をそのまま使うのは完全にコピーコンテンツになってしまいますが、良いデザインは積極的に取り入れていきたいところでもあります。

そのためにはhtmlコードを知る必要があり例えばこちらの黒の太字はどうやっているんだろうと疑問思ったときには

テスト(記事作成用)

<strong>テスト(記事作成用)</strong> の<strong> </strong>の部分を知れば同じことがあなたのサイトでも行えます。

まずはワードプレス運営かどうか確認!

 

まずソースコードを調べようとする前に該当サイトがWordPress(ワードプレス)運営かどうかを知る必要があります。

方法としてはこちらのサイトIS IT WordPress?の検索窓に該当のURLを入力してANALYZE WEBSITEをクリックしてみてください。

画像↓

ワードプレス 他サイト ソースコード

するとこちらのような画面が出てきてワードプレスを使っているかが一目瞭然で分かります。

ワードプレス 他サイト ソースコード

他にも方法としてはURLの語尾に管理画面に入るログイン画面を表示させるために「/wp-admin」をつけたりする方法もありますが上のサイトを使った方が楽ですね。

実際にワードプレスサイトだとわかった場合は下記の手順に進んでください

① Google Chromeの右クリックからページのソースを表示をクリック

IEやfirefoxのプラウザ使用でGoogle Chromeを使っていない方は下記よりダウンロードしてください。

⇒ Google Chrome公式サイト

② このようなソースコードの画面になりますので該当箇所がどうようなhtmlコードを使っているか知ることができます。

(効率を上げるためにはCtrl+Fで装飾している単語を検索してみてください。)

 

ワードプレスで他サイト装飾やテーマを参考にしたい。

ワードプレス 他サイト ソースコード

ソースコードを調べる方法がわかったところで実際にどうやって活用しているのかを紹介していきます。

他サイトのテーマを調べる!

まずはそのサイトの雰囲気を決め、優れているとそれだけで作業効率も上がりそうな(笑)テーマについて見ていきます。

ネットサーフィンをしていてこのサイトおそらくワードプレスでどのテーマを使っているか知りたくなるので、

先ほどのソースコードを出して本サイトでせつめいしていくと

こちらの画像のソースコードの画面で

Ctrl + F」(Macユーザーなら「command + F」)のページ内検索でthemesと入力してみましょう。

そうするとthemesの後ろにそのサイトの使用テーマがでてきます。

 

私のサイトだとjstorkなのでカスタマイズやウェジェットが使いやすSTORK(ストーク)を使っているのがわかりますね。

他サイトの装飾を調べる!

こちらのほうが実際に使うことは多いですが、ワードプレス文字や表などの装飾も他サイトを参考にして自身のサイトで応用することができます。

例えばこちらの記事のトレンドアフィリエイトのコンセプトは?私の稼いだのやり方を紹介

下の緑で囲っている箇所が気になった時には

  1. コンセプトを決めてしまうと行き詰まる可能性がある
  2. 成果が出るまでが早い
  3. 難易度が低い

方法としては同じようにソースコードを出して赤線の部分を参考すれば色を変えたりpaddingで余白の調整などが可能です。

ワードプレス 他サイト ソースコード

このようにあなたが良いな!と思った装飾はソースコードを見ることで似たような感じにしたり、そのまま使うことも可能は可能です・・・

サイトデザインをそのまま使うのはリテラシー上はおすすめできませんが、参考にしてみてくださいね。

まとめとして

私自身もワードプレスを触り始めた時には装飾は、ビジュアルモードにあるものだけを使いよくこんな感じのべた塗りを使っていました

そんな中でデザイン的に優れているサイトを見ることでどんどん出来る表現も増えてくるので、現状で満足せずに色々試して見てください。

関連記事として使いやすいテーマも紹介しています↓

ワードプレスでアフィリエイトを始めるならテーマは無料・有料?おすすめは?

↓無料でアフィリエイト教材を配布中↓

期間限定でアフィリエイト初心者でも迷わずに開始4か月で月利10万円を達成するために私が作ったアフィリエイト無料教材(DICEMAP)をメール講座に登録された方にプレゼントさせていただきます!

⇒たけ(Take)のメールマガジンに登録する(無料)

こちらの記事もおすすめ
Pz-LinkCard(プラグイン)の使い方やカスタマイズ方法 ワードプレス

Pz-LinkCard(プラグイン)の使い方やカスタマイズ方法!リンクを簡単に表示。

たけ(Take)のPC一台で国内・海外を自由に行き来するライフスタイルブログ!
運営サイトを育てていく中で、内部リンクは重要な施策の一つになります。 サイトの滞在時間や離脱率の低下もそうですが、役に立つリンクは何よ …
Fetch as Google 新しい サーチコンソール 使えなくなる ワードプレス

Fetch as Googleが新しいサーチコンソールで使えなくなる?代替え方法も紹介。

たけ(Take)のPC一台で国内・海外を自由に行き来するライフスタイルブログ!
どんなアフィリエイトサイトを作成していても初めは中々検索エンジンにインデックスされず、困った経験をした人も多いと思います。 そんな時に …
ARVEプラグインで動画レスポンシブ(スマホ)対応が簡単 ワードプレス

ARVEプラグインで動画レスポンシブ(スマホ)対応が簡単!設定方法を紹介。

たけ(Take)のPC一台で国内・海外を自由に行き来するライフスタイルブログ!
ワードプレスを使って記事作成している中で動画を入れると説得力が増したり、読者にとって分かりやすいコンテンツになるケースが多々あります。  …

COMMENT

メールアドレスが公開されることはありません。