ワードプレス

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

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

今では企業の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)のメールマガジンに登録する(無料)

こちらの記事もおすすめ
【ワードプレス】ダッシュボード画面 左側メニュー 隠れた場合 解決法 ワードプレス

【ワードプレス】ダッシュボード画面で左側メニューバーが隠れた場合の解決法!

たけ(Take)のPC一台で国内・海外を自由に行き来するライフスタイルブログ!
スマホやTVリモコンの設定などでちょっと触って変更になってしまったけど戻し方がわからない・・・なんてことは良くあります。 WordPr …
記事タイトル後 サイト名 非表示 プラグイン 簡単設定 アフェリエイト全般

検索順位で記事タイトル後にサイト名を表示しない方法!プラグインで簡単に設定。

たけ(Take)のPC一台で国内・海外を自由に行き来するライフスタイルブログ!
サイト作成を初めていざ自分自身の書いた記事が、GoogleやYahooなどの検索エンジンで上位表示される時は嬉しく感じる瞬間でもあります。  …

COMMENT

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