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

関連記事

A calm owl by Tambako The Jaguar, on Flickr 【お知らせ】姉妹サイト『イチパン!』復旧しました( ;∀;) くつキッチュアイキャッチ画像

【お知らせ】姉妹サイト『イチパン!』復旧しました( ;∀;)

A calm owl by Tambako The Jaguar, on Flickr Some

記事を読む

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像 Favicons by Loozrboy, on Flickr

「サイトの名刺?」ファビコン設置方法 -ファビコンテスト前哨戦-

本日はサイトの名刺『ファビコン』に関しての記事です。 Favicons by Loozrb

記事を読む

326/365 - plug in. by Bryan Rosengrant, on Flickr Some rights reserved

Q:ワードプレスの記事内にSoundCloudの音楽を埋め込むには? A:【WPプラグイン】は不要です!

タイトル通りです。今はURLだけで埋め込み完了です。  326/365 - pl

記事を読む

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

amazonJsで「amazonへのレスポンスがパース出来ません」エラーが出たときの対処法

Initial thoughts on Bilski by opensourceway,

記事を読む

WordPress立ち上げメモ 助けて!TOC+の反映されない(><) TinyMCE Advancedってどんなプラグイン?等 アイキャッチ画像

ドキ!トラブルだらけのワードプレスブログ立ち上げ大会小ネタメモφ(. .)

1週間ほど前にこのブログを立ち上げまして… 思いがけないトラブルや、新規導入のプラグイン等のメモが

記事を読む

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その3『複眼RSS』

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その3『複眼RSS』

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/ 編集ツールからやたら遠いイメージ図をクリスタのポーズくんで描いてみた。

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/

不具合ページサンプル(出演:クリスタのポーズさん) 登場人物:くつきちよこ ※管理人   佐藤

記事を読む

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

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

  • マウスコンピューター/G-Tune