WordPressのテーマ「First」を更に調整

新しく導入した First テーマに対する子テーマで更に調整です。

ブログを記載しているときに内容的に話題の切れ目に入れる感じで『水平線のタグ=hr』 を入れるのですが First テーマはちゃんと表示してくれません。なんか透明の線を引いてるような感じなのです。

hrタグに対してこのテーマが何も設定していなければブラウザが標準の水平線が引かれるはず。ですが実際にブログ側の記事に水平線の記述指定を入れても無視されます。ということはやはりCSSで制御されていると推測。

なので Firefox で F12 キーを押下してインスペクターを動かしてみるとやはり定義は存在しました。これも子テーマで要修正でっす。

親テーマの以下の記述を
hr {
    background-color: #eee;
    border: 0;
    height: 1px;
    margin: 0 0 1.5em;
}

子テーマで以下のように修正
hr {
    background-color: #a9a9a9;
    border: 1;
    height: 2px;
    margin: 0px 0px 0px 0px;
    color: #a9a9a9;
    width: 80%;
/*  size: "3"; */
}
これでしっかりと水平線が表示されるようにな


2019-0505-Prismatic-CodeDisplay-01次に Prismatic というプラグインで表示しているコードの表示ですが、これも無駄な部分が描画されているので調整対象です。
コード表示本体の上下に空白や灰色の横線が配置されています。また、コードの文字サイズ大きすぎて見辛い。なのでこれらの正体をインスペクターでチェックして直します。


2019-0505-Prismatic-CodeDisplay-02コードの文字サイズに関しては First テーマの場合は CSS というサブフォルダに normalize.css というファイルがあってそこに code に対するCSS記述があったのでこれをオーバーライドする必要があります。


子テーマの Style.css に追記した内容は下記の通り:
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 12px;    /*←フォントサイズを固定にしてしまう*/
}

2019-0505-Prismatic-CodeDisplay-03次に上下の空白や灰色の横線ですが、インスペクターでチェックしたところでは親テーマの Style.css に pre という内容で記載されていました。

確かにコード自体を画面に表示する場合は、コードを以下のタグで囲む必要があります。
<pre><code class=”language-css”> 〜 </code></pre></code>
なので pre や code に対してCSSに定義があればそれが優先されるので、表示結果が気に入らなければ自分でカスタマイズするしかないですよねー


子テーマの Style.css に追記した内容は下記の通り:
pre {
    border-bottom: none;    /*←下部の線は無しとする*/
    border-top: solid 1px #ccc;;
    color: #666;
    font-family: consolas, 'courier new', monospace;
    font-size: 87.5%;
    line-height: 1.4;
    margin: 0 0 1.7em;
    max-width: 100%;
    padding: 0;    /*←上下のパディングもゼロにする*/
    word-wrap: normal;
}
これで結構自分の好みにはなった形です。
今回子テーマを作ってみてかなり勉強になりましに〜(・A・|||)

ちなみに Prismatic プラグインがサポートしている表現の中で Highlight.js の表示サンプルデモは以下のURLで確認できます。
highlight.js demo
実際にCSSのコード表示がどのような配色で行われるのがリアルタイムに変更して確認することができまっす


<2019/05/06(月)追記>
Prismatic プラグインを使っているのに投稿の一覧が表示されているTOPページはコードの表示が何の変化も無い現象を確認しました。これの直し方は Prismatic の個別設定の Highlight.js の設定に在る 「Limit to Posts and Pages」 のチェックを外すことで解決しました。
⇒ TOPページに投稿した記事のサムネイルが並んでいる形式で、内容はサムネイルをクリックして個別にPOSTを表示する形式であれば、このチェックは入ったままでOKだと思います。コードの表示は個別POSTの表示の時にしか必要無いゆえに。
⇒ ですが、FirstテーマのようにTOPページに内容がそのまま表示される場合は、逆にこのチェックを外していないとチグハグな表示になってしまいます。
(こういうU/Iに関わるところは両方OKな方にデフォルトを設定しておいて欲しいですよね・・・)

久々にWordPressのテーマ変更

いままで愛用していた Graphene というテーマは更新すると表示が崩れることが判っており、直し方は面倒なので更新はあえて止めていたのですが、さすがにそろそろ問題かなと思われたので変更しても表示が崩れないテーマに変更しました。

日本の方が作られた First というテーマです。

グローバルに使われることが想定されているようで、引用の部分(blockquote)は日本語向けでは無いと感じます。

引用部分の先頭にダブルクオート(をひっくり返した記号?)を表示して、引用部分の本文は斜体(イタリック)で表す物ですが、この作法は英語圏向けの作法で日本語表記のブログ向けでは無いと、個人的には思ってます。

※そもそも斜体自体が日本語の様式にそぐわないと思われます

で、このあたりは Style.css に定義が載っているのでそれを修正すればOKなのですが、テーマが更新される度に手修正が必要になるので、子テーマを作って上書きするのが後からの手間を省けるやりかたです。

子テーマの作り方は以下のサイトが一番判り易かったです:
「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

First の blockquote の記述は

blockquote {
    color: #888;
    font-style: italic;
    margin: 0 0 2.4em;
    padding: 12px 0 0 44px;
    position: relative;
}
blockquote:before {
    color: #ddd;
    content: "\201C";
    font-family: Georgia, serif;
    font-size: 84px;
    left: -5px;
    line-height: 1;
    position: absolute;
    top: -5px;
}
これを子テーマで以下のようにオーバーライドします。
blockquote p { margin: 0px; }    /*←blockquote 自体のp要素の上下空白を無くす*/
blockquote {
    color: #000000;
    border: 1px solid #a9a9a9;
    background-color: #efefef;
    font-style: normal;
    font-size: 90%;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    position: relative;
}
blockquote:before {
    color: #000;
    content: "";       /*←ダブルクオートの表示はしないように無設定にする*/
    font-family: Georgia, serif;
    font-size: 12px;
    left: 0px;
    line-height: 0;
    position: absolute;
    top: 0px;
}
完全にオーバーライドするためには、要素を全部子テーマ側に記述して修正しないと駄目みたいです。
例えば、blockquote:before(←引用文本体の前にダブルクォート付ける記述)ですが、子テーマ側で全てコメント化して無効にしようとしても駄目です。

あくまで親側の記述は生きているので、子の方で無かったことにしようと全てコメント化しても、この行為は子の方で親側の記述に対して何も変更しないという指示になるので意味がありません。

なので打ち消したい要素を全て子側に記載して、それらを直し、オーバーライドする必要があります。上記の場合は、ダブルクオートの表示をしないように文字設定を無い状態にして、blockquote:before自体は生きつつも実質なにも表示されない仕掛けに変えてます。


しかし問題がありまして、実験用のローカル環境では問題無く子テーマのオーバーライドが効いているのですが、本番環境は無視されまくりなんですよね・・・他にも上記のCSSのコードを表示しているところはSyntaxを色別に表示する仕組みの Prismatic というプラグインを入れているのですが、これも同様にローカル環境では反映されるのに、本番環境では同じ表示ならない(編集中のプレビュー表示だけ反映されている)・・・

なんかWordpressってそのへん素直に行かないこと多いなぁ。原因究明するのほんと面倒です
(・A・|||)



追記:blockquote の表示問題は解決
参照:WordPressで子テーマを作る際に知っておくべき仕組みと注意点 に記載の「子テーマのCSSがうまく反映されない場合(プルダウン)」の内容を参照して解決した模様です
親テーマの後に明示的に子テーマを読み込むように指示する書き方を導入

と同時にこの参考サイトには 『なおTCDテーマであれば、テーマオプション内の「カスタムCSS」に追記してもOK。テーマをアップデートしてもそのまんま残ります。子テーマ同様の安心。優しさ。初心者への愛』 といふ記載がありました。

2019-0505-ThemeEditorInfoTCDというのはブランド名らしく、いわゆるテーマ屋のようです。それはさておき「カスタムCSS」は First テーマにも存在してまして、子テーマを作り、その子テーマの Style.css の内容を WordPress のテーマエディタで修正しようとしたら警告みたいのが出たんです。 『直接テーマエディタでCSS直さんでもカスタムCSSに書いた方がお薦め』 のような表示が!

しかしこれは了解しつつ 「わしは子テーマを勉強中なんや!」と無視して続行しちゃってるわけですw

で、参考サイトのこの表記を帰納法的に考えると 『カスタムCSSをサポートしているテーマなら、子テーマ無しでCSSをカスタマイズできるんや』 ということになるかなと。

これに関してはローカル環境で別のテーマ導入してみてそのうち実験ですに...



さらに追記:Syntaxを色別に表示する仕組みの Prismatic というプラグインの表示問題
⇒ うーむ・・・これは翌日になったら正しく表示されるようになっていました。いちおう表示系が正しくならない場合はブラウザのキャッシュを削除する形で最新化されるはずなのですが(謎

Contact Form 7 をダウングレード

問い合わせフォーム用に使っているプラグインの Contact Form 7 のアップデートで、スパム送信防止用に組み込んでいる Google の reCAPTCHA 対応が v2 から v3 に上がっていて効かなくなってました!

おいおいこんな重要な変更がいつのまにかされているとわっ!
と言うか、こういうクリティカルな機能変更するなら上位互換性は持っていて欲しいところです。

2019-0112-reCAPTCHAv3v3対応を行うと画面右下に常に reCAPTCHA のアイコンが表示されているのでちょっと野暮です。人が操作しているのかロボットが操作しているのかは自動判別する仕組みが v3 なのですが、個人的にはその判定はにわかに信用し難い。やはり画面上で物理的な操作を伴わないと心許ないです。

なのでアタクシは v2 対応のバージョンにダウングレードしました。


2019-0112-reCAPTCHAv2-Contact7OldVerこのダウングレードがまたちょっと右往左往して、そもそもググって見つけた古いバージョンもダウンロードできますよという公式ページに何も載って無く、最新版に対するダウンロードボタンしか存在しません。このサイトにもっと説明が欲しい所です。

で、結局画面右のウィジェット的なところの一番下に 「Advanced View (詳細を表示)」 という所をクリックしないと駄目でした。そうすると画面の一番下の方に過去バージョンのダウンロードする説明があって、やっとダウンロードできたというね・・・

WordPressのテーマについて

ずっと Graphene というテーマが気に入って使ってます。

使ってますが今のバージョンは 1.9.4.3 で、この記事を書いている時点の最新が 2.5.2 なのでメジャー・バージョンが上がっているんですね。でもバージョンアップするとウィジェットの表示が右サイドからフッターに移動してしまう、という現象に見舞われます。

これは div タグのペアリングが合ってないと発生するらしいのですが、ではなぜ今まで平気だったのか? あるいは他のテーマではなぜ発生しないのか? と言うそこはかとない疑問が出てきます。 基本的にWordpressのエディタで書き込んでいる記事であり、手組でちょこちょことタグを打ち込んだりはしてないのでどこかで div タグ忘れた、なんて事が起きる方が希有で不思議なのですね。
<参考にしたサイト:ブログ記事のレイアウトが崩れた時に確認すべきはdivタグ

Graphene もv2.xからデザインが変わってちょと 「これじゃない」 感がでてしまったので、今更900件ある過去記事の中から タグの不一致箇所を探すなどという労力は100%無駄に感じているところでっす。ゆえに新しいテーマ探してます。

これがなかなか良いのが無い。大抵のテーマがアルファベット系文化圏のものなので日本語の場合は、英文サンプルの見た目に対して実際に適用すると全然美しくありません。

テーマ自身が保持しているフォント情報は英文用なので、英語圏の人らはサンプル通りの表示なりますが、日本語の場合はフォントが「MS Pゴシック」に置き換わって表示されるので美しくない・・・

どうやら子テーマファイルを作って(*1)親の内容に対してフォント情報をオーバーライドして「メイリオ」とか指定するとまだましになる模様。

(*1)親テーマのフォント情報を直しても有効だけど、テーマの更新がある度にそれが元に戻るので、子テーマにフォント情報を持たせて常にオーバーライドさせるため


最近主流のテーマは1つ1つの記事にサムネイル画像を用意して、タイル状に並べる系の物が多いです。あとフリー版とプロ版があって「プロ版だともっといろんなこと出来ますよ」ってヤツ。SEO対策してます、よりたくさんの人にヒットします、とか・・・

いらんわっ!! かつてのようにもっとシンプルながらも美しいテーマってあったけどなんか今のは商用を意識したというか商売臭いテーマばかりです。こうなる前は「どうだ私のカスタマイズりょくは!」的なハッカーが己が技術を世に示すという風情があったのですが、それが転じて商売にしちゃってる「テーマ売り家」になってるようで。

あてくしのブログは名も無き趣味サイトなので有償テーマとか使う気が全くなくて、無料でなんか良いのないかと探していますが、母数が膨大なのでなかなかどうして・・

もう少しいろいろ見て、ある程度妥協しつつも見やすいテーマないかなぁと・・・

プライバシーポリシーへの対応

2018/05/25からEUで 【GDPR(General Data Protection Regulation:一般データ保護規則)】 といふのが施行されて、個人レベルのブログやホームページでも、プライバシーポリシーについて明確な記載がないと法的な問題に問われる可能性が出ちょります。

例えば、ブログで何らかの製品やサービスに対して、レビュー的な物言いをきさいしたり、またそれに対するリンクを載せていたり、はたまた掲載している内容に対してコメントをもらったり。

で、これらに関してちゃんとプライバシーポリシーにて取り扱いを明記してないとヤヴァイ時代になった模様。

GDRPについては以下が参考になるかも:↓
https://www.ppc.go.jp/enforcement/cooperation/cooperation/GDPR/


利用者からの問合せにも対応が必要とのことで 『Contact Form 7』 という和製プラグインを導入しました。これを使うととても簡単にフォームが作れるので助かりました。

また、フォームをスパムに悪用されないように Google の 『reCAPTCHA』 という認証機構も使いました。 reCAPTCHA に関しては Contact Form 7 側でこれをサポートしているので、Google のサイトで reCAPTCHA の機能を生かすためのキーを作って Contact Form 7 に取得したキーをセットして有効にするだけです。

まぁこれで世間様に対しての体裁は見繕えたかなぁと(・A・|||)

Lightbox系プラグインの入れ換え

 Wordpressで画像をブログの中に入れてる時に、画像のサムネイルをクリックするとブワッと画像がPop-Upする機能を果たすのが、いわゆる Lightbox 系プラグイン。

 いまや何処でも使われておりアタクシも随分前から愛用しております。最初の頃は WordPress の Plug-In でさえなくて手動でのインストールでしたが、今や類似する物が多々存在〜

 今まで使っていたのは 『Simple Lightbox』 というプラグインだったのですが、どうやらプラグインの一斉更新時にこれも新しくなってちょっと仕様が変わったようなのです。 ブワッと画像がPop-Upする時にその画面下の方にファイル名まで表示されてしまうようになってしまいました。 こういう物はオプションで非表示にできそうなのですがどうもそういった項目が見当たらないので別の物に置き換えることに決意(*’-‘)

 いくつか探してみたところ 『Lightbox Plus ColorBox』 というのが良さげなので導入してみました。 WordPress の Plug-In なので導入は至って簡単。プラグインの管理画面でこれを検索&インストール&有効化すればもう準備完了。

 有効化すれば、外観オプションの中に設定項目として現れるのそこで調整です。
2013-0518-lightboxpluscolorbox-01 2013-0518-lightboxpluscolorbox-02


 Pop-Up のスタイルを決めて、あとは表示時の効果を選択するという感じですね。この設定画面には Demo/Test というタブもあるのでそこで設定した内容を確認できるのが凄く便利です!

スパム防止プラグインが効き過ぎだった件 ・゚・(ノ∀`;)・゚・

 フレのかたから 『コメントできません〜』 の旨連絡を頂きまして・・・orz

 コメント入力時に文字認証を掛ける SI CAPTCHA Anti-Spam と言うのを入れてみたのですが、正直なところこれはあまり効きませんでした。機械仕掛けで送ってくるスパムコメントはこの手入力の仕組みを使っているわけでは無いらしく、簡単に通過してきます。

 なので入力画面では無くてコメントがDBに登録される時に審査するプラグインを2つ導入してみたんです。

 spam-byebye
 Throws SPAM Away

 どちらも日本のかたが作られたものとなります。

 ただ、Throws SPAM Away を導入するとなぜか全くコメントを受け付けないんです。2つ同時に導入したせいかなぁと重い、Throws SPAM Away だけを有効にしてみたのですが現象は改善せず・・・

 謎のまま、Throws SPAM Away をOFFにすることによりコメントは出来るようになりました。 何かしらの設定とコンフリクトしてるのかなぁ・・・

毎日1000件ぐらいのヒットを得ています

 ひっそり佇む我がブログも最近は毎日1000件ぐらいのカウンターアップを確認してて大盛況・・・って違うわいっ!!ヽ(`Д´)ノ

 全部スパムなのですよ、これが・・・最近になって激増しちゃってorz。まぁ何かそういう自動投稿な仕掛けにここのURLが載ってしまっているんでしょうなぅ。 WordPress の場合はデフォルトでアンチスパムコメント機能が載っているのでそれらのスパムコメントがブログ上に表示されるわけで無いのですが、いったんDBに保存されることは避けられないのです。1週間もほっておくとだいたい1万件のコメントが貯まってます・・・

 なのでもう画像認証を付けるプラグインを導入実験を始めました。

2013-0421-anti-spamsetting
 まずは SI CAPTCHA Anti-Spam というプラグインから試しています。このプラグインはコメント欄の画像認証だけでなく WordPress 自体への管理画面へのログインにも画像認証が掛けられるので、不正なログインも防止できます。 デフォルトのままだとログインフォームの画像認証の方はOFFなのでONしてから使う形です。

 でもですね、これをやっててもスパムが入ってくるのでちょっと別の対策を考えてみました。


2013-0421-spam-byebye
 次に SPAM-BYEBYE を入れてみました。デフォルトの設定ではあまりに強力で誰もコメントできない感じになったので緩めの設定にしてます。これでだいぶスパムが隔離される量が減ってくれるとおもうんですよねー(やってくるスパムの量は増えこそすれ減らないと思いますが・・・)

 これでも入ってしまうスパムはもっと厳しくしていく感じですねー


NextGEN Gallery の LightBox 効果で動画が真っ白けに

 過日の日記で WordPress を v3.3.1 にアップデートした際に画像の管理を NextGEN Gallery に換えて LightBox 効果も設定したのですがここに来て新たな問題に遭遇しました。

2012-0205-ngglightboxgoestowhite ブログに貼り付けた画像をクリックすると LightBox 効果で画像がPopOut表示してくれるのは良いのですが、それを閉じると貼り付けている動画の枠が真っ白けになる現象が発生してます。先日のTERA日記で一緒に遊んでくれた皆さんにこの現象を確認して頂いたら同じようになることを確認できましたので 『これは自分だけの問題では無く NextGEN Gallery の LightBox 効果固有の現象じゃ〜』 という結論に。

 なので NextGEN Gallery の LightBox 効果はOFFにして別の方法で LightBox 効果を実現する方法を模索しましたっ!



 Wordpress のダッシュボードから プラグイン>新規追加 でキーワードに LightBox と入力してたくさんの候補の中から選んでみたのは Simple LightBox というプラグインでした。さっそくこれを動作検証してみたところ PopOut 表示させても動画枠が真っ白けになることはありませんでした。これはイイ!!

 Simple LightBox はプラグイン一覧で Settings をクリックして細かな設定を行います。Settings の中でありがたいのは Enable backwards-compatibility with legacy lightbox links です。これは昔のブログ記事でも LightBox の記述があればその効果を有効にしてくれるものなので NextGEN Galleryの導入によって逆に古い日記は LightBox効果による PopOut表示が怪しくなっていたのが(たぶん)やってくれるという神仕様!
2012-0205-simplelightboxsetting-01
2012-0205-simplelightboxsetting-02 その他の設定は Grouping 機能でスライドショウができる部分は不要なのでOFF。そしてキャプションが付いちゃうのもOFFにしました。アタクシの場合は画像自体にキャプションを入れるのでこれは不要なのです。

 これにより問題は解決っ! いあーよかったヨカッタw

 あ!大切な事なのですが NextGEN Gallery の方はオプションのエフェクト設定を【なし】にしておかないとダメです!(当たり前なのですが念のためw)。



WordPressでYouTube動画をサイドバーで再生する

2012-0205-videosidebarwidgets-01 昔の WordPress であれば面倒な感じでしたが新しくなっている WordPress ではウィジェットという形で動画の再生が可能です。その為のウィジェットがいくつか公開されていますがアタクシは Video Sidebar Widgets というのを使いました。

 インストール自体は WordPress のダッシュボード>プラグインにて新規追加をクリックして「Video Sidebar Widgets」と入力すればヒットするはずなのでそれを選択してインストールし、アクティブにするだけです。
 アクティブにした後は、外観>ウィジェットからウィジェットの設定を調整。右サイドバーの一番上に表示したいので、Video Sidebar Widget を一番上に配置しました。


2012-0205-videosidebarwidgets-02 設定も至って簡単なのです。

 表示したいYouTube動画の共有ボタンをクリックし、表示されるURLの動画本体のコードを左図のように貼り付けてしまえば後はサイズや見出し情報を入力しちゃえばOK!

 Wordpress が v2 位の時は、他のフリーブログとかで出来てるサイドバー位置にYouTube動画再生を載せることが、面倒な感じでしたがウィジェット機能が実装されてからは簡単になりましたねー。




作者さんのサイト:http://denzelchia.com/wordpress-plugins/video-sidebar-widgets/