【WordPress】WordPressの投稿画面をCSSでカスタマイズしてオリジナルの投稿画面を作る方法

0
【WordPress】WordPressの投稿画面をCSSでカスタマイズしてオリジナルの投稿画面を作る方法

WordPressの記事の投稿画面ってどうも使いにくくて、プラグインでどうのこうのできたりもするらしいんですけど、プラグインはいまいち使う気になれなかったんですね。

だって設定するのとか面倒臭そうだしー…。

でもどうにかしたいなーって思って探してたら、Google Chromeの拡張機能の「Stylebot」というのを見つけたんですよ。
この「Stylebot」はウェブサイトのCSSを上書きすることができるようで、これを使ったらWordPressの投稿画面がかなり便利になったのでご紹介しますよ。

ちなみに「Stylebot」はウェブサイトに設定されているCSSを上書きする拡張機能なんで、そもそもCSSの知識がないと難しいです。

では早速使ってみましょうー！




インストールする

まずインストールしましょう。Google Chromeから下記にアクセスして拡張機能に「Stylebot」を追加してください。

chrome.google.com
Stylebot
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha

拡張機能が追加されたらアイコンを [右クリック] → [View Options] をクリックすることでオプションを設定できます。

[Default Editing Mode] を [Edit CSS] にしておきます。この設定は、デフォルトの編集モードを自分のオリジナルにしますよ。ということですね。

これでインストールと設定は完了です。

WordPressの投稿画面で問題なところ

ぼくの抱えてる問題はこのようなことでした。

派手な色合いでついうっかり押してしまう投稿ボタンをどうにかする

投稿ボタンは基本的に1回しか押さないはずなので、「今すぐ押してください」みたいに派手じゃなくても良いです。っていうかつい間違えて押しちゃうのを回避したい。

追加しすぎてテキストエリアが見づらくなったテキストエディタのツールバーをどうにかする

いつもテキストエディタモードでマークアップしながら記事を書くので色々なタグが使えるツールバーが使いやすいんですけど、そもそもモニタが1366×768しかないのでテキストエリアをすごく圧迫して記事が書きにくい。

この2つを変更します。

WordPressの投稿画面を編集する

ではWordPressにログインして投稿画面を開きましょう。
編集したいところで [右クリック] → [検証] をクリックしてデベロッパーツールを開きます。ちなみにデベロッパーツールはF12でも開けます。

デベロッパーツールで対象となる場所を編集しましょう。
試しにパーマリンクを設定するリンクの色を赤色にしました。

編集が終わったらコピーして、Stylebotを [左クリック] → [Open Stylebot] でコードエディタを開き、貼り付けます。

コードを直接書いていくこともできるので、臨機応変に行ってください。
最後に右下にある [Save] をクリックして設定を保存しましょう。

基本的な使い方はこんな感じです。

ビフォーアフター

というわけで、デフォルトとStylebotで編集したWordPressの投稿画面です。

こちらが見慣れたビフォー。

こちらが編集したアフター。

違いが微妙ですがテキストエリアが広くなっているのが分かると思います。
実際に変更したところはこのような感じですよ。

  • タイトルのテキストエリアを小さくした。
  • 問題だったテキストエディタモードのときのツールバーを全部表示されないようにしてタグ自体を小さくした。
  • 問題だった投稿ボタンを薄く目立たなくして、下書き保存ボタンを目立つようにした。
  • テキストエリアをブログの表示と同じにした。

これで快適になりました！

CSS一覧

編集したCSS全てを貼っておきます。
ちょー長いです。

@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");

a,input {
	transition:all 0.1s linear;
}

/* ツールバーを小さくしてスクロール */
#ed_toolbar {
	height:75px;
	overflow:scroll;
}

.ed_button {
	font-size:10px;
	padding:0 5px;
}

.ed_button:hover {
	background:#eeeeee;
}

/* 投稿ボタンを薄く */
#publish {
	color:#999999;
	background:#eeeeee;
	text-shadow:none;
	border:0;
	box-shadow:0 0 0 #000000;
}

/* 下書きとして保存 */
#save-post {
	background:#0073aa;
	color:#ffffff;
	width:100%;
	float:none;
	display:block;
	margin:0 0 5px 0;
	text-align:center;
	font-size:11px;
	font-weight:bold;
}

#save-post:hover {
	background:#ffffff;
	color:#0073aa;
}

/* プレビュー */
#post-preview {
	background:#0073aa;
	color:#ffffff;
	width:100%;
	float:none;
	display:block;
	margin:0 0 5px 0;
	font-size:11px;
	font-weight:bold;
}

#post-preview:hover {
	background:#ffffff;
	color:#0073aa;
}

/* テキストエリアを688pxに */
.wp-editor-area {
	font-family:"Noto Sans CJK JP";
	font-size:14px;
	letter-spacing:1px;
	line-height:2em;
	max-width:688px;
}

/* タイトルを小さく */
#titlediv #title {
	padding:5px 10px;
	font-size:13px;
	line-height:100%;
	height:2em;
	width:100%;
	outline:0;
	margin:0;
	background-color:#cccccc;
	font-weight:bold;
}

さいごに

というわけで、ぼくはWordPressの投稿画面をStylebotで変更しましたが、Stylebot自体はウェブサイトのCSSを変更するための拡張機能なので、TwitterやFacebookといったSNSなどの見た目も変更することができます。
基本的な使い方はCSSを書いていくだけなので、いまいち使いにくいウェブサイトで試してみるのも楽しいかもしれませんよー。

ちなみにですが、ブラウザを変更したときも設定をエクスポート/インポートできるので、せっかく書いたコードがなくなることもありません。

コメント

*



この記事も読まれています