他人のブログのCSSを確認する方法

どうもこんにちは!パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

いろんな人のブログを読んでいると真似したいなぁと思うカスタマイズを見つけることがあります。

ちゃんとCSSやHTMの知識がある人ならデザインを参考にして自分なりにササッと仕上げるんでしょうが、僕みたいなコピペ野郎にはそんなこと出来ません。

でも実は他人のCSSを閲覧できる方法があるんですよ!

そんなムフフなやり方、ご紹介しますね!

他人のCSSを見る方法

とはいっても他人のCSSを見る方法はそんなに難しい設定は必要なく、誰でも簡単にできちゃいます。

ソースを表示する

CSSを見たいブログページを表示し、ページのソースを確認します。

例えば Chromeを使っている人であれば画面上でメニューを表示させ(右クリックとか2本指タップとか)、その項目の中にある「ページのソースを表示」を選択します。

Blog

IEでは右上の歯車ボタンからF12開発者ツールを、FireFoxでは右クリックからページのソースを表示を選択します。

.cssを検索する

こちらが僕のブログでソースを表示した状態です。

Code

コードがズラズラと並んでいます。

こうやって誰でもソースを見れるようになっているんですが、この中から .css を検索しましょう。

ctrl+F、もしくは command+Fを押すと検索バーが表示されるのでそこに .cssと入力して検索!

Search

お目当てのCSSを見つけてアクセスする

はい!こうやって .cssがハイライトされました。

Result

この中から探したいスタイルシートを見つけましょう。

例えばこのブログでも使っているテーマ STORK(ストーク)を使ったブログの場合、子テーマのファイル名は「jstork_custom」です。

jsotrk_custom と .css の組み合わさっているファイルを注意深く探してみると・・・

Big

ありました!
赤線を引いているのが僕のブログの子テーマですね。

お目当てのリンクを見つけたらそこをクリックするかURLをコピペすればアクセスできます。

Access

他人のCSSを見るメリット

 他人のCSSを見ることで様々なメリットがあります。

カスタマイズの勉強

自分では到底わからない複雑なコードを見ることで勉強になります。

そのままコピペして使わせてもらってもいいですね。

あとは自分で色やスタイルを変更して使ってもよさそうです。

万が一のバックアップ

よく見ると子テーマの上あたりに「jstork/style.css」というファイルがあります。

Big 2

これがいわゆる親テーマに該当します。

CSSにカスタマイズする時は子テーマを用意してそれに変更を加えるのが常識なのですが、何かの拍子で親テーマを編集する時があるかもしれません。

その作業中に万が一おかしな変更を加えてしまい何をどうやっても元に戻せなくなることがあります。

えぇ、僕が昔それをやらかしました。

そういう時でも同じテーマを使っている人の親テーマを丸々コピペさせてもらい上書き保存すれば元に戻すことができます!

あせってアタフタする前にこういう使い方もあることを思い出して下さい。

CSSはテーマによって違います
今回紹介した「jstork/style.css」や「jstork_custom」などの表記は使っているブログテーマによって表現が違います。

まとめ

他人のCSSって意外と簡単にあっさり確認できます。

もちろんCSSを見ただけではカスタマイズできないこともあるのでそこは注意が必要ですが、キレイなブログデザインの人であればかなり参考になること間違い無し!

思い通りに自由自在にカスタマイズできるくらいの知識が欲しいなぁと思う今日この頃です。

ゆーすけ(守屋祐輔)

ゆーすけ(守屋祐輔)

複業サラリーマン

会社員×ブログ×デザイン×講師×投資の5つの働き方・稼ぎ方を実践する複業サラリーマンブロガー ▼経験から学んだノウハウや考え方、自分の人となりがわかる記事をお届けします ▼主力複業のサイン作成では800人以上、5,500点以上の作成実績あり。

FOLLOW

カテゴリー:

\実体験に基づく情報/

ストレス・重圧から開放され、毎月がボーナス月で、強いやりがいを感じる私なりの複業に関する戦略・戦術をまとめた無料Ebookをプレゼント!これから複業を始めたい人、すでに始めている人。幅広くお役立てください。

複業しながらでも1日1冊の読書はできます。その読書術や私が読んで良かった本・学んだこと・活かしたことなど不定期でお届けします。読書は人生を豊かにします。本を読んで1つでも学びがあればいいのです。



    関連記事

    1 件のコメント