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

関連記事

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!奥の手! 【アプリケーションの初期化】を試す価値あり!※自己責任でお願いします。

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!

くつきちよこ年末のご挨拶バージョン   登場人物:くつきちよこ ※管理人 

記事を読む

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

クラウド最強エディタ「Cloud9」が、WordPressもブラウザのみでインスト・開発・公開が

記事を読む

Numbers by SamahR, on Flickr Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方

2-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方『BOOKを記事で表示する』編

  追記:「WordPressの更新後、まれに『FlippingBook

記事を読む

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

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

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

記事を読む

とつぜんですがここでクイズです。「発酵」に関する画像にチェックを入れてください。

面倒な画像認証を楽しいぷちクイズにできるGoogleAPI『reCAPTCHA』設定方法♪

※ダミー認証画像です(笑)くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 ※ゲス

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

スポンサードリンク

スポンサードリンク

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

スポンサードリンク

スポンサードリンク

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

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

  • くつキッチュ!SCRAPス アイコン 創作支援 カテゴリへ《創作支援》

    くつキッチュ!アイコン カテゴリwordpress全般へ 《WP関係》

    くつキッチュ!アイコン-copyright-著作権カテゴリへ  《著作権関係》

    くつキッチュ!アイコン小ネタ/物語用小ネタ カテゴリへ  《小ネタ/物語用小ネタ etc...》
    ※オンマウスでタイトルが表示されます。




『創作支援屋くつキッチュスクラップス!』は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。