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

関連記事

業務連絡のお詫びとWP怪奇現象の話 Chrome怪現象?「sample.com ページは機能していません ichipan.phpapps.jp でリダイレクトが繰り返し行われました。 次をお試しください: ページを再読み込みする Cookie を消去する ERR_TOO_MANY_REDIRECTS」 

【業務連絡】素材サイト告知に関するお詫びと、WP怪奇現象の話

    『イチパン!』 ログイン画面 登場人物:くつきちよこ ※管理人

記事を読む

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

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

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

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

動くファビコン、今ならアリ?

最近とんと見かけなくなった気がする動くファビコン… 今ならすごく目立つ気もしますが…実

記事を読む

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 その上「サイトの状況が赤点です」とGoogle様にも怒られました(/_;) アイキャッチ画像 IconDesign by くつきちよこ

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 ※解決済み

    Upload出来ない(/_;) ファイルの

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

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

Initial thoughts on Bilski by opensourceway,

記事を読む

html tattoo by webmove, on Flickr

ワードプレスの記事内でコード表示をするには?【WPプラグイン】

html tattoo by webmove, on Flickr もくじ ドキ!トラ

記事を読む

Hardcover book gutter and pages by Horia Varlan, on Flickr ページををめくるめくwpプラグインFlippingBook Galleryとか合成GIFとかの雑談

ページををめくるめく効果が簡単に作れるwpプラグイン『FlippingBook Gallery』とか合成GIFとか諸々

※サーバーが落ちてるのかここしばらくつながらない状態のようです。様子見のため、URLやサンプルページ

記事を読む

創作支援屋靴キッチュスクラップス!くつきちよこアイコン木の実モザイクVer  Illust by 佐藤利音 ベジェ化 by くつきちよこ

ランボー 怒りの新規ファイルのアップロードが出来ないWordPressトラブル※未解決 と、電子書籍出版お手伝い裏舞台

Panic stations ! by Craig Sunter - Thanx 2 Milli

記事を読む

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

記事を読む

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

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

もくじ Laser engraved RSS icon by Book Wor

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

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