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

関連記事

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

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

Panic stations ! by Craig Sunter - Thanx 2 Milli

記事を読む

boxo fart by boxo, on Flickr Some rights reserved ネットオウルWPblog利用中方はプラグイン「w3-total-cache」インストールしちゃダメ!ゼッタイ! アイキャッチ画像

ネットオウルWPblog利用中方はプラグイン「w3-total-cache」をインストールしちゃ、ダメ!ゼッタイ!

なあ……ワードプレスなんですぐ死んでしまうん?~~(  ゜  ゜) なあ……なんでなん

記事を読む

インターネットサーバーエラーである日突然サイトが落ちたので閉鎖しようとしたけど、ダメ元である事をしたら偶然直った話。※マネは慎重に! 素材サイトの構成

インターネットサーバーエラーである日突然サイトが落ちたので閉鎖しようとしたけど、ダメ元である事をしたら偶然直った話。※マネは慎重に!

図:くつきちよこ   登場人物:くつきちよこ ※管理人   佐藤 ※ゲ

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

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

Initial thoughts on Bilski by opensourceway,

記事を読む

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

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

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

記事を読む

Photo by Flickr CJ'sフォトストリーム

Stingerの『Page Top↑』を可愛くカスタマイズしてみた♪

    Stingerで『Page Top↑』を可愛くカスタマイズしてみた♪ WordPressブ

記事を読む

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など イチパン!サンプル

WordPressでTumblrボタンを実装してみた(記事下、サイドバーへの設置、その他シェア方法など)

  Share on Tumblr こちら、昨日作ったくつキッチュの姉妹サイト『イチ

記事を読む

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

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

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

記事を読む

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

記事を読む

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

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

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

記事を読む

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

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

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