Pixabay[/caption]

こんにちは。シンガーソングライター、太田まさあきです。

Wordpressの投稿画面は、とにかく見づらい。一体誰がこんな小さな文字で設計したんだ。頼むから、もっと簡単にサイズ変更出来るようにしてくれ。

そう思っても、誰もそんなことしてくれない。

iOSで、ブラウザに拡大機能はついてるけど、入力はしずらい。ググってみたら色々出てくるけど、コードいじるのばっかりで、そんな怖いこと出来ない。

そんなあなたのための記事です。ブックマークレットを使いますが、一度設定すれば、Wordpress以外の様々なサイトで使えますよ。ぜひ設定してみてください。

予備知識

ブックマークレットって何やねん

ブックマークレットは、ブックマークを使ったツールです。サイトをみてる時に、ブックマークを開く要領でポチッとすれば、色々な処理ができます。

どうやって設定すんねん

設定はとても簡単。ブックマークを１つ、何でもいいので作り、編集画面を開きます。編集画面のURL欄に、コードを貼り付けるだけ。おお、素晴らしい。後は、好きな時にポチッとすれば、処理がされるわけですね。

やってみる

というわけで、実際にやってみます。

とりあえずブックマークする

どこでもいいのですが、とりあえずこのページをブックマークしてください。タイトルとURLは後で変更するので、大丈夫です。

ブックマークしたで

はい、ありがとうございます。ただ残念ながら、作ったブックマークは別のものに置きかわります。

ブックマークの編集をします。iOSサファリなら、画面上のURLの左にある、ブックマークボタンを押します。一覧が出てくるので、先程作ったブックマークを探してください。それを編集します。

下にある"編集"ボタンをタップ⇨目的のブックマークをタップ。

すると、編集できるようになります。タイトルはお好みで、「テキストエリア拡大ブックマークレット」などと入れてください。そしてURL欄に、以下のコードをコピペします。iOSなら、ダブルタップからの長押しで選択⇨コピーできますよ。貼り付けるときは、URL欄を長押し⇨全てを選択⇨ペーストしてください。

javascript:/*この行から*/
(function(){

/*設定。フォントサイズ・フォント色・背景色*/
var size=30;
var color='#fff';
var bgcolor='#000';
/*設定ここまで*/

var st=document.createElement('style');

st.innerHTML='textarea{'+
'font-size:'+size+'px !important;'+
'color:'+color+' !important;'+
'background-color:'+bgcolor+' !important;'+
'width:100vw !important;'+
'height:90vh !important'+
'}';

document.querySelector('head').appendChild(st);
})();/*この行までをコピー*/

結果

ブックマークレットは設定できたでしょうか。うまく出来れば、こんな感じになります。

2018.09

カスタム無しでWordpress投稿画面の文字を大きくする方法