WordPress3.9更新後の画像編集画面に絶望したーっ!…ので、よく使うスタイル指定をメモメモ…

公開日: : 最終更新日:2016/03/22 Wpトラブル, ワードプレス

くつキッチュ!アイコン wordpressカテゴリへ

なんだか最近Wordpressの画像編集機能が微妙です。

3.9に更新してからというもの、枠線や余白のスタイル指定が画像編集画面でできなくなってしまいましたので、ちょっと絶望してみました。

shout! by su neko, on Flickr Wordpressの画像編集に絶望したーっ アイキャッチ画像shout! by su neko, on Flickr

 

 

もくじ

 

画像編集画面でのスタイル指定以外にもこれまで、


<p style="margin-top:2.0em;"></p>

で、指定していた改行がすっぱり消えて、改行なしのぎゅうぎゅう画面になっていたり…

 

代わりに、今まで使えなかったENTERによる改行


&nbsp;

が、使えるようになっていたりとちょっとWp3.9に困惑気味です;

ただこちらは個々のWp環境にもよると思います。

これまでも、このブログで使えないENTER改行が別のWp編集画面では使えたりしていたので…

 

ですので、改行関係は仕方ないのかなとは思うのですが…

しかし画像編集画面はそういう問題じゃないですよね;;

 

更新で画像編集画面の何が変わった?

冒頭でも触れましたが、直接のスタイル指定ができなくなりました。

画像の大きさなんかを編集画面に入らずにいじれるようになったのは良いのですが、詳細設定タブでスタイル指定出来なくなってしまったのは痛いです。

 

◆これまでの画像編集画面、詳細設定タブ◆

Wordpressの画像編集に絶望したーっ 昔はスタイルあったよね?

 

◆Wordpress3.9に更新後の編集画面◆

Wordpressの画像編集に絶望したーっ スタイル指定するとこどこ?

以前は画像編集から直接スタイル指定が出来たと思ったのですが…

今はスタイルの入力箇所がありません。

 

画像ごとにちょこちょこ個別に指定したい場合もあるので、画像のスタイルが指定出来ないのはちょっと面倒です;

例えば輪郭が曖昧になってしまった画像などは枠線を入れたほうが揃って見えるので、以前は画像の枠線プロパティに数値を入れてスタイルが自動で指定されるのに任せていたのですが…

今は画像編集画面からは枠線の設定が出来ません。

Wordpressの画像編集に絶望したーっ プロパティに数字を入れると自動でスタイルが入力されてました

現状では画像のタグに直接入力するしかないようです。

<img class="alignnone size-full wp-image-****" title="タイトル" style="border: 1px solid black;" src="画像URL" alt="代替えテキスト" width="450" height="58" />

※タイトルは画像編集画面より直接編集できます。

 

画像のタグに直接枠線のスタイルを指定したもの↓

Wordpressの画像編集に絶望したーっ プロパティに数字を入れると自動でスタイルが入力されてましたよね?

 

公式でスタイル指定ができなくなってしまったのはなんらか意味があるのかもしれませんが……

くつきはシステム的な難しいことはよくわかりませんし、たただた地味に面倒です…;;(;一_一)

というわけで、画像のスタイルを指定できるタグをメモ代わりに書き出しておきますね。

 

画像に枠線

例えばこんな場合

キャラクターの作り方 ※ネタ モンゴウイカからの~甲田専務 が、強いられている場合 illust by ss effect&design by 92ki

キャラクターの作り方 ※ネタ モンゴウイカからの~甲田専務 が、強いられている場合 illust by ss effect&design by 92ki

枠線があった方が絵が引き立ちますので、スタイルで枠線の指定を追加しています。

下記のタグを画像タグに追加していただければ枠線が表示されます。


style="border: 1px solid 色;"

サンプル画像は6pxで茶色の枠線を指定していますが、そのあたりはお好みでどうぞ。

pxの前には好きな数字を指定し、色もお好きな数値を入れてください。

線の種類はsolid(細線)となっておりますが、お好きなものに変更なさってください。

色の指定について

 

線の種類

くつきはほぼsolid(細線のみ)、使うとしても下記表くらいです。

指定 線の種類
dashed 破線
dotted 点線
double 二重線

こちらを上のサンプルタグのsolidの部分と入れ替えてください。

線の種類は「CSS 線 種類」などで検索すると色々な線の指定方法がヒットしますよ。

 

 

アイコン92 illust by ss 上下左右に3pxの余白と1pxのdashed(破線)を指定してしてます。

アイコン92 illust by ss 上下左右に3pxの余白と1pxのdotted(点線)を指定してしてます。

アイコン92 illust by ss 上下左右に3pxの余白と1pxのdouble(二重線)を指定してしてます。

 

画像に隙間

アイコン92 illust by ss という画像に↓

アイコン92 illust by ss 上下左右に3pxの余白と1pxの枠線を指定したものです。

style="border: 1px solid black; padding: 3px;"

 

◆paddingのイメージ◆

Wordpressの画像編集に絶望したーっ 余白と枠線の説明

 

画像のマージン

アイコン92 illust by ss 外側のマージンがゼロのもの。

上下左右に3pxの内側の余白と1pxの黒線、また外側のマージンをゼロに指定してしてます。

style="border: double black 1px; padding: 3px; margin: 0px;"

アイコン92 illust by ss 外側のマージン指定していない場合。

 

 

◆外側のピンクの部分がマージンのイメージです◆

Wordpressの画像編集に絶望したーっ マージン

 

色の指定

カラー指定の数値は、HTML カラー などで検索するとたくさんのカラーサンプルページが表示されますのでそちらを参考にしてください。

くつきがよく参考にさせて頂いているのはコチラ⇒HTML色見本

画像に枠線に戻る

 

オマケ:画像に影

header

 

style="box-shadow: 0 10px 6px -6px #777; -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777;"

コリスさんのシャドウ指定を参考似致しました.

「CSS」box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ

 

オマケ:テキスト関係

文字の大小などはテキストエディターにプラグインを追加すれば簡単に機能拡張できるのですが、くつきは一度編集系のプラグインでバグったことがあるので(⇒検索しても対策が見つからない!見出し、行間のWordPressバグ忘備録:)今は使用を控えてます。

 

TinyMCE Advancedを含むいくつかのプラグインを削除した一ヶ月後くらいに突然治ったので、絶対にこのプラグインが原因かどうかは判定できないのですが…

このプラグインを削除した直後、リロードすると一瞬だけ正常に表示され0.5秒後くらいにバグった表示に戻るという状態が続きましたので、うちの場合はこれが原因という線が濃厚かなと;

というわけでまだ再インストールするのが怖いので、様子見中…

 

今は手動でこんな風に指定してます。


<p style="font-size: xx-small;">文字が小さくなります</p>

文字が小さくなります

 

 


<p style="font-size: 50%;">文字が小さくなります(%)</p>

文字が小さくなります(%)

 

 


<p style="font-size: 200%;">文字が大きくなります</p>

文字が大きくなります

 

もし、バグが出て編集系のプラグインは使っていないというレアな方がいらっしゃいましたらお使いくださいませ。

 

 

 

他にも…

画像編集画面の他、冒頭でお話しした改行関係、その他編集画面のスライダーが効かなくなり編集画面がめっちゃ縦長になったりと、バグ祭り開催中です。

別のWp(姉妹サイトの素材屋など)では3.9に更新してもそんな症状は出ませんでしたので、これもここのブログの環境の方に問題があるのだと思いますが…

 

WordPressの更新でちょっとしたトラブルはありましたが、ブログのネタにはなりました(笑)

でっは~(*´∀`*)ノシ♪
Share on Tumblr

ブログランキング・にほんブログ村へ
にほんブログ村

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた "Select your web browser(s) by zipckr, on Flickr

ブラウザ表示チェック3大サービスを無料範囲内で試してみたよ♪

 各ブラウザによっての見え方を改めてテストしてみた Select your w

記事を読む

Don't Panic Badge by Jim Linwood, on Flickr いきなり来た!「データベース接続確率エラー」

いきなり来た!「データベース接続確率エラー」∑(゚Д゚)ガーン

  Don&#x27;t Panic Badge by Jim Linwood, on

記事を読む

くつキッチュ!SCRAPス WPにデフォルトでインストされてるプラグイン『HelloDolly』って一体何者?

WordPress謎のプラグインHelloDollyを有効化してみた結果www

  Photo by Stéfan  いかにもなタイトルですが、釣りじゃありません。 結論から申し

記事を読む

創作ブログに最適な「LINEトーク吹き出しCSS」で、表示が崩れるときの忘備録 カスタマイズサンプルアイキャッチ画像

創作ブログにピッタリな「LINEトーク風フキダシCSS」の表示が崩れるときの忘備録

あけましておめでとうございます。   会話形式の多いブログにピッタ

記事を読む

I believe I can fly - I believe I can touch the sky... by Harold Kuiper, on Flickr TOC+を使えば記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

TOC+を使えば同一記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

  秘密の抜け穴 I believe I can fly - I believe I can

記事を読む

Wpマルチサイト化サブディレクトリ型はめちゃ簡単!の初心者のハマリポイントは2箇所だけ! bento box by josey4628, on Flickr

Wpマルチサイト化(サブディレクトリ型)はめちゃ簡単!初心者のハマリポイントは2箇所だけ!

bento box by josey4628, on Flickr Wpマルチサイト化(

記事を読む

Q&A by opensource.com, on Flickr そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

検索キーワードで(個人的にツボに入ったという意味での)ヒットしたもの、及び当サイトでは該当す

記事を読む

Advertising and Rain by Jakob Montrasio, on Flickr ネットオウル『WPblog』の広告表示位置が変わったのでルール範囲内で位置を調整するよ♪

ネットオウル『WPblog』の広告表示位置が変わったのでルール範囲内で位置を調整するよ♪

Flickrの上ヤコブMontrasioによる広告や雨   ネットオウルか

記事を読む

photonヤバイ!と思って切ったら、「EWWW Image Optimizer」line1674のエラーでダブルパンチ!……死ぬかと思った! パクリサイトが、パクラレサイトの画像に直リンして画像を盗用するイメージ

サイトをコピーされた? でも、JETPACKのphotonを有効にしてると、「画像の差し替えの反撃」ができないみたい

   直リンで画像を登用される時の説明画像   登場人物:くつきちよこ 

記事を読む

Image taken from page 113 of 'Lilliput Lyrics ... Edited by R. Brimley Johnson. Illustrated by Chas. Robinson' by The British Library, on Flickr googleWebフォントを使ってみたよ!副題『不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。』

2ステップでお手軽簡単な『GoogleWebフォント』を使ってみたよ!「不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。」

前から気になっていたWebフォントを使ってみました♪ Image taken from

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • パソコン工房「CLIP STUDIO PAINT PRO推奨パソコン」エントリーモデル登場