WordPress 写真・画像の枠を消したい

WordPress 写真・画像の枠を消したい

WordPressに写真や画像を載せたときに、枠が邪魔になるときありませんか?

そんな時はサクッと枠を消してしまいましょう。

ちなみに、CSS を設定して、ブログ上の写真・画像全部に反映させる方法と、個別に設定して個別の写真・画像のみに設定する方法があります。

ブログ上の写真・画像全部枠なしにする

CSS を使って枠( border )を指定します。

CSSは通常、テーマの style.css で設定していますので、テーマの CSS の変更をするか追加するかになります。

探す目的の場所は、#content のimg です。CSS は後から読み込まれた設定が有効になりますので、img tag の設定が複数にわたっている場合は面倒なことになりますが、ちゃんとしたテーマなら直ぐに見つけられると思います。

ちなみに、設定がない場合はそもそも枠が表示されていないか、img tag の親 tag 例えば div tag のバックグラウンドが枠のように見えてたりしてると思いますので、親のバックグラウンドが枠のように見える場合は、この方法では対応できません。親のバックグラウンドの色を透明にする必要があります。

私の使っているテーマは Twenty Eleven なのですが、画像の枠の設定は以下のようになっています。

修正は WordPress ダッシュボード>外観>テーマ編集から style.css を直接修正するか、FTP を使って修正したファイルをアップロードするなど、適当に行ってください。

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border: 1px solid #ddd;
    padding: 6px;
    max-width: 97.5%;
    max-width: calc( 100% - 14px );
}

これを見ると、border: 1px solid #ddd;となっていますので、枠は1pxで灰色です。

padding: 6px;は他の要素と6px離すという状態なので、どちらでも良いと思いますが、背景色を透過するのでpadding: none;も合わせて変更すると良いです。

    border: none;
    padding: none;

それから、キャプションを使っていると、キャプションを付けることで親にdiv を付けるテーマも有るので、キャプションを付けないか、キャプションを付けるなら親のdiv の背景色を透明に設定する必要があるかもしれません。

この辺りはテーマによって違うので、各々設定している箇所を探して修正するしかありません。

子テーマを使っている場合

子テーマを使っている場合は、必要な部分を含むところを書き換えるか追加してしまいましょう。

Twenty Eleven の場合は、

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border: none;
    padding: none;
    max-width: 97.5%;
    max-width: calc( 100% - 14px );
}

子テーマを使っていない場合

子テーマを使っていない場合は、style.cssをそのまま修正します。

但し、テーマのバージョンアップが有ると再修正しないといけないので、バージョンアップしたら再度設定を忘れないようにしてください。

バージョンアップのために子テーマの導入を考えましょう。

Twenty Eleven の場合は、下のように修正します。

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    /*border: 1px solid #ddd;*/
    /*padding: 6px;*/
    border: none;<span style="font-family:Consolas; font-size:10pt">
    padding: none;
    max-width: 97.5%;
    max-width: calc( 100% - 14px );
}

個別の写真・画像のみ枠なしにする

この場合は、投稿記事の html に掲載した写真のstyleを枠なしにする設定をします。

基本的には、

style="border: none; padding: none;"

を img tag に付け加えるだけです。

テキストエディタでスタイルを追加し枠を無くす

ビジュアルエディタではhtml を修正できないので、写真・画像( img )の修正もできません。

そこで、テキストエディタに切り替え該当 img に枠なし設定を追加します。

1)テキストエディタに切り替え
右上に[ビジュアル] [テキスト]タブがあります。[テキスト]をクリックします。

写真・画像の枠なし 個別設定 テキストエディタ切り替え

写真・画像の枠なし 個別設定 テキストエディタ切り替え

2)枠なしにしたい写真・画像のimg tag を探し、「<img ・・・・・・/>」の「/>」の前にstyle=”border: none; padding: none;”を追加します。

写真・画像の枠なし 個別設定

写真・画像の枠なし 個別設定

3)確認します。

写真・画像の枠なし 個別設定 結果

写真・画像の枠なし 個別設定 結果


上がそのまま、下が枠なしの写真です。

上手く枠がなくなっています。

CSSに保存しておきクラスを付けて枠を無くす

上の応用技です。記述ミスが起こりにくいので良いかも知れません。

この場合も(子)テーマの style.css を使います。

1)style.css に以下のようなCSS を追加します。
my-border-none は、クラス名です。写真・画像のCSSクラスにこのクラス名を設定すると、style に反映されます。
クラス名は重複しなければ適当でかまいません。

img.my-border-none{
    border: none;
    padding: none;
}

とりあえず、追加してみましょう。

追加は、WordPress ダッシュボード>外観>テーマ編集から style.css を直接修正するか、FTP を使って修正したファイルをアップロードするなど、適当に行ってください。

2)ビジュアルエディタにして、写真・画像をクリックし、メニュー?を表示します。
鉛筆マークのアイコンをクリックし、画像詳細画面を開きます。

写真・画像の枠なし 個別設定 ビジュアルエディタでCSS設定呼び出し

写真・画像の枠なし 個別設定 ビジュアルエディタでCSS設定呼び出し

3)画像詳細画面の「上級者向け設定」を開きます。

写真・画像の枠なし 個別設定 画像詳細画面で上級者向け設定を開く

写真・画像の枠なし 個別設定 画像詳細画面で上級者向け設定を開く

4)画像 CSS クラスを設定します。
画像 CSS クラスを設定後、更新ボタンをクリックして更新します。

写真・画像の枠なし 個別設定 画像詳細画面でCSS設定

写真・画像の枠なし 個別設定 画像詳細画面でCSS設定

5)確認します。

まとめ

全体の写真・画像に枠なしを行いたいか、一部に対して行いたいかで方法が変わってきます。
また、使用しているテーマによっては、修正箇所がわかりづらかったりもするかもしれません。

用途やスキルに合わせて、方法を選択してください。

以上、「WordPress 写真・画像の枠を消したい」の方法紹介でした。
[I want to erase the pictures or image frame in WordPress]

WordPress Really Simple SSL

WordPress Really Simple SSL

WordPress Really Simple SSL
最近のレンタルサーバーは、無料でSSL化ができるようになったので、とても助かります。
私も最近借りている「Netowl StarSever」が無料で SSL を提供してくれるのでちゃっかりSSL化を始めてます。

で、SSL 化を行った後で WordPress 内の参照とかも SSL 化対応したいのですが、そんなときに一発解決してくれるプラグインが「Really Simple SSL」です。

ちなみに、手動で行う場合の手順ですが、だいたい以下のようになります。
・ レンタルサーバーで SSL を設定(レンタルサーバーの管理画面で行います)
・ WordPress の設定>一般でアドレスを http:// ⇒ https://に変更
・ 投稿・固定ページ内のリンクを修正
・ .htaccess でリダイレクト処理
・ テーマなどで http:// で呼び出しをしている箇所を修正
・ Google 関係のツールの登録設定変更(Googleのツールで変更)

レンタルサーバーや Google ツールなどは個別で行う必要がありますが、それ以外は一発で解決してくれます。

Really Simple SSL

Really Simple SSL のインストールは簡単にできます。
まずはプラグインの新規追加から Really Simple SSL を検索し、インストールします。

WordPressSSL化-Really Smiple SSLインストール

WordPressSSL化-Really Smiple SSLインストール

インストール後、有効にするボタンをクリックします。

WordPressSSL化-Really Smiple SSL有効化

WordPressSSL化-Really Smiple SSL有効化

すると、以下のような確認メッセージとともに表示されますので、

Really Simple SSL - SSLを化有効にする

Really Simple SSL – SSLを化有効にする

「はい、SSLを有効化します」ボタンをクリックします。

以上でSSL化が有効化され、かつ http から https への 301リダイレクト されるそうです。

また、上の.htaccess で行った時と決定的に違うのが、内部で参照している画像等を http → https に自動で行ってくれるので修正する必要がありません。
私は当初は、投稿・固定ページ内のソースを自動でしてくれると思っていたのですが、ソース内のURLリンクは http のままですがブラウザで表示してみると https になっているので、HTMLを作るときに自動で https にしていると思われます。

なので外部のURLを参照するときに問題が出るかもしれません。私の場合は、外部のPDFを読み込むときに https になってしまい、PDFを読み込めなかったケースがありました。
そこを少し気を付ければ大方は手を加えなくて済むので助かります。

以上、「WordPress Really Simple SSL」の紹介でした。

※2018-05-11追記
Search Console Accelerated Mobile Pages に『ページにユーザー作成の JavaScript がある(重大な問題)ページからカスタム JavaScript のコードをすべて削除してください。AMP ページにカスタム JavaScript があると、Google 検索結果に AMP 固有の表示機能が表示されないことがあります。 詳細』と以下のような通達が来ました。

重大な問題のある AMP ページ

重大な問題のある AMP ページ


Really Simple SSL は設定によってJavaScriptを出力します。他のサイトでも Really Simple SSL を使用しているのですがこの警告?通達?通告?は出ていないので Really Simple SSL が悪さをしているとは限りませんが、他のプラグインでJavaScript を出力するものは無いので。。。
そのうち改修されるかも知れませんが、私は Really Simple SSL を使うのを止めました。
※2018-05-11追記終了

WordPress の日本語版と英語版の違い

WordPress の日本語版と英語版の違い


一昨日 WordPress 4.9.3 がリリースされましたが、今朝になってまた WordPress 4.9.4 がリリースされました。
どうやら 4.9.3 の重大なバグが発見され、緊急修正・リリースされようです。

今は自動リリースされてしまうので既に WordPress 4.9.3 になっています。
そんな重大なバグなら早速と思ったのですが、自動更新ができな不具合を修正したみたいですね。慌てることもないかな。
でもまぁこの際忘れて放置も困るので 4.9.4 に更新しとくのが良いかと。
日本語版は出ていないようなのでとりあえず、オリジナルの英語版の英語版を入れることになるのですが、そこで今更ながらオリジナルの英語版と日本語版の主な違いを調べてみました。

ちなみに、-jaが付くものが日本語版です。
英語版は WordPress 4.9.4
日本語版は WordPress 4.9.4-ja 「 WordPress.org 」からダウンロードできます。

WordPress の日本語版と英語版の主な違い

・ WordPress に日本語翻訳ファイルが付いてくるかどうか
・ WP Multibyte Patch プラグインの同梱
・ readme.html の日本語化
・ wp-config-sample.php の日本語化
・ version.php に $wp_local_package = ‘ja’; が付加されている
・ 新規インストール時の設定初期値が日本語版は、タイムゾーンが東京、サイトの言語が日本語

英語版の日本語化

もともと日本語版の WordPress がインストールされていれば、何もする必要はないようです。

初めてインストールする場合のみ、日本語化します。
で、 WordPress は多言語対応なので、英語版の言語設定を変更するだけで日本語化できるようです。
上の差異から、
・サイトの言語
・ユーザー毎の言語
を変更して、
・WP Multibyte Patchプラグインをインストール

とりあえず、・タイムゾーンを東京もかな?
しなくても日本語化になるけど、、、

以上で、日本語化完了です。
気になるようなら、WordPress 4.9.4-ja が出るのを待って更新すれば良いですし。

以上、「WordPress の日本語版と英語版の違い」についてでした。

WordPress 4.9.4 メンテナンスリリース

WordPress 4.9.4 メンテナンスリリース


2018年1月6日、WordPress 4.9.4 がリリースされました。

WordPress 4.9.4 では 4.9.3 の重大なバグが修正されています。
重大なバグとは、自動更新が出来なくなってしまった不具合だそうです。
自動バックグラウンド更新をサポートするサイトでも自動的に更新されませんので、4.9.4 に更新されるための手動で実施する必要があります。

詳しくは下のWordPress Codex 日本語版 Version 4.9.4 のページで確認してください。(2018/2/7日時点では日本語版のページが作成されていません)
『WordPress Codex 日本語版 Version 4.9.4』
『WordPress Codex Version 4.9.4』

WordPress 4.9.3メンテナンスリリース

WordPress 4.9.3 メンテナンスリリース

WordPress 4.9.3 メンテナンスリリース
2018年2月5日、WordPress 4.9.3 がリリースされました。

WordPress 4.9.3 では、Customizer チェンジセット、ウィジェット、ビジュアルエディタ、および PHP 7.2との互換性に関する修正を含む、4.9の34のバグが修正されています。

詳しくは下のWordPress Codex 日本語版 Version 4.9.3 のページで確認してください。(2018/02/07 日時点では日本語版ページが作成されていません)
『WordPress Codex 日本語版 Version 4.9.3』
『WordPress Codex Version 4.9.3』

WordPress 4.9.2セキュリティ・メンテナンスのリリース

WordPress 4.9.2セキュリティ・メンテナンスのリリース

WordPress 4.9.2セキュリティ・メンテナンスのリリース
2018年1月16日、WordPress 4.9.2 がリリースされました。

これは、WordPress 3.7以降のすべてのバージョンのセキュリティおよびメンテナンスリリースです。
すぐにサイトを更新することを強くお勧めします。

WordPress 4.9.2で21個のバグが修正されました。

詳しくは下のWordPress Codex 日本語版 Version 4.9.2 のページで確認してください。
『WordPress Codex 日本語版 Version 4.9.2』

テーマ Twenty Eleven の投稿ページにサイドバーを付ける

テーマ Twenty Eleven の投稿ページにサイドバーを付ける


少し前に「テーマ Twenty Eleven の投稿ページにサイドバーを付ける」を投稿したので、ここは投稿ページにもサイドバーを付けてみようかと思い調査しました。
投稿ページは、固定ページみたいに簡単に付きませんでした。
が、ググってみると簡単にできますというWebサイトを見つけたので参考にしながら試行錯誤して付けてみました。
ちなみに、ググって見つけたWebサイトのやり方では表示されるのですが、下に付く形で表示されてしまい「なんだかぁ~」って感じになってました。

テーマ Twenty Eleven の投稿ページにサイドバーを付ける方法

試行錯誤で試しながら付けたため、どのWebサイトでも正常に表示されるか保証はできません。
でも、テーマ Twenty Eleven を使っているなら、たぶん正常に表示されると思います。

single page の css を変更する

「 Twenty Eleven Child w/ Sidebar Support 」と言う、Twenty Eleven の子テーマを見つけて参考にしました。
下のようにマージンや表示幅を変更します。
私の場合は、既に子テーマを作ってしまっていたため、自分の子テーマの style.css に追加する形をとりました。


/* Singular */
.singular #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
.singular #content,
.left-sidebar.singular #content {
margin: 0 34% 0 2%;
width: 64%;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
margin: 0 auto;
width: 100%;
}

single.php にサイドバー表示を追加する

私の場合は、子テーマに single.php が入って居なかったため、子テーマディレクトリに single.php をコピーしました。
FTPで Twenty Eleven の single.php をローカルにダウンロードして、子テーマにアップロードしました。

その後、サイドバー呼び出す関数 php get_sidebar() を下のように追加しました。
修正前:


			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

修正後:


			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

この作業までだと、サイドバーは表示されるのですが、正常な位置・表示して欲しい位置に表示されません。
パソコン表示では、本文の下に表示されるような形になってしまいました。

body要素に「 singler 」クラスを追加するフィルタを削除します


/**
 * Add two classes to the array of body classes.
 *
 * The first is if the site has only had one author with published posts.
 * The second is if a singular post being displayed
 *
 * @since Twenty Eleven 1.0
 *
 * @param array $classes Existing body classes.
 * @return array The filtered array of body classes.
 */
function twentyeleven_body_classes( $classes ) {

	if ( function_exists( 'is_multi_author' ) && ! is_multi_author() )
		$classes[] = 'single-author';

	if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) )
		$classes[] = 'singular';

	return $classes;
}
add_filter( 'body_class', 'twentyeleven_body_classes' );

Twenty Eleven は、上のようにbody要素に「 singler 」クラスを追加するフィルタを追加しています。
子テーマの functions.php は、親テーマの機能を上書きできません。
親の functions.php に追加する形が一般的です。
と言うか、親テーマのファイルの 直前 に読み込まれるので上書きは無理ですし、エラーになります。

そこで、親テーマがフィルタを追加した後に、削除する方法を取ります。


add_action( 'after_setup_theme', 'my_child_theme_setup' );
function my_child_theme_setup() {
	remove_filter( 'body_class', 'twentyeleven_body_classes' );
}

これで、singlerクラスが body 要素に追加されるフィルタを削除できます。

まとめ

・single page の css を変更する
・single.php にサイドバー表示(get_sidebar())を追加する
・function.php に singler クラスを追加するフィルタを削除する関数を追加する

3つの作業で、テーマ Twenty Eleven の投稿ページにサイドバーが表示されるようになります。

以上、「テーマ Twenty Eleven の投稿ページにサイドバーを付ける」でした。

テーマ Twenty Eleven の固定ページにサイドバーを付ける

テーマ Twenty Eleven の固定ページにサイドバーを付ける

Twenty Eleven をお気に入りで使っていますが、「固定ページにもサイドバーを付けられたらな」と思っていました。
今までは簡単にできないのだろうと諦めモードに済ませていたのですが(調べて対応するのが面倒だったので。。。^^;)。

テーマ Twenty Eleven の固定ページにサイドバーを付ける方法

先日ふと、固定ページの表示位置を見直そうと思い確認していたところ、「固定ページの属性」の「テンプレート」に[ Sidebar Template ]を見つけました。
下の図の真ん中の「テンプレート」です。

固定ページにサイドバーを付ける「固定ページの属性」

固定ページにサイドバーを付ける「固定ページの属性」


早速、[ Sidebar Template ]に更新をしたところ、無事に表示されるようになりました。

以上、「テーマ Twenty Eleven の固定ページにサイドバーを付ける」でした。

プラグインの更新エラー&プラグインの新規追加不具合

プラグインの更新エラー&プラグインの新規追加不具合

多分特殊なケースだと思うのですが、備忘録としても残しておきます。

[現象]
「IX Web Hosting」から「Netowl StarServer」に移行時に発生した不具合です。
WordPress PHP バージョン 5.4.10 ⇒ PHP バージョン 7.1.4 への移行になりました。
不具合は起きないんだろうなぁ。。。と楽観してたのですが、以下の不具合がすぐに発生しました。

・WordPressのプラグインを更新すると、エラー表示が出るものの更新されている模様。
・プラグインの新規追加をしようと検索を行うと、検索のまま戻ってこない。
・画面の左上に「?」が表示されている。

[対応]
最初に上の2つが気になって、ググって調査をするものの、同じようなケースが見つけられず、途方に暮れるものの「FTPでファイルを更新、追加を行うと正常に設定できる」ので後回しとし、一番下の「画面の左上に「?」が表示されている」の調査を行いました。
ヘッダー作成時のゴミでも入ったかと思いましたが、ファイルに触っていないので入るはずもなく。。。

とりあえず、「?」が変なところに入っていまいか探しまくりました。
すると!

プラグイン設定時の不具合原因の「?」

プラグイン設定時の不具合原因の「?」


なんと! wp-config.php の先頭に?が居ました。

ちなみに、FTPで移行した元ファイルには「?」は入って居ませんでした。
FTPのバイナリでローカルにダウンロード・アップロードしたので、おかしくなると思っていなかったのですが。。。でも、FTPでファイル操作したときに混入したと思われます。

早速、「?」を削除して「?」が出てないか確認したところ無事に表示されなくなりました。

で、不思議なことにうえの2つも正常になりました。
原因はwp-config.php の先頭の「?」でした。

とりあえず、分かっている不具合がなくなったのでこれで良しとしました^^
なかなか、WordPress は奥が深いですね。

以上、「プラグインの更新エラー&プラグインの新規追加不具合」の対応備忘録まで。