【簡単】ブログのスタイルをハイジャック！？JavascriptとCSSでブログを乗っ取ってみる【WordPress】

どうも、さいほうへいきです。

このページ開いて何思いました？

卵のブログじゃないですよね。どう見ても。

とはいえまぁ一応URLを見てもらえば卵の権限になっているんですが、これは僕が記事のJavascriptとCSSでちょちょっとスタイルを変えてみたんです！

実用性はあるのかどうかわかりませんが、今後こういうことがやりたくなった時のために忘備録も兼ねてメモをしておきます。

やり方

とりあえず今回はこちらの二枚を用意しました。

このページにも表示されているロゴと背景画像ですね。
それぞれサイズは1920×161、1792×1024で作っています。Bing Image Creatorで作りました。いい感じじゃない？

これを卵のブログのメディアにアップロードします。別にブログにアップロードせずとも問題はないのですが、画像のURLは確認できるようにしておいてください。

変更したい記事を作り、ページ下部のカスタムCSSにこう入力します。なお、画像のアドレスは先ほどアップロードしたものにしておいてください。

とりあえずテストしたい場合は上記のロゴ・背景画像のアドレスでも大丈夫ですよ。


.header2 {
  background-image: url('ロゴ画像アドレス');
}

ついでにカスタムJavascriptにも入力します。


document.body.style.backgroundImage = "url('背景画像アドレス')";
document.querySelector('#header').classList.add('header2');

これで完成！
プレビューなどで確認してみてくださいね！

というわけで、今回の記事ではサイトをハイジャックする方法について解説してみました！

閲覧者が混乱する元になるので乱用するのはあまり良くないですが、ジョークなどでいろいろ遊んでみる分にはとても楽しいと思いますよ。

ちなみにこういった記事もあるので、併せてぜひご覧ください！

では、今回はここまで！

さいほうへいきでした。