「blog」カテゴリーアーカイブ

テーマを変えてみる

ちょっとテーマを変えたくなってみた

お試し的な感じで、テーマをadmiralというものに変えてみる。

声まで黒を基調としていた、twentyfourteenというテーマにしていたけど、

たまには変えてみるのもいいんじゃないかっておもって、特にウィジェットの配置など

何も変えなくてもすぐに変えられるものがいいなあって思っていたところだったので。

色のデザイン的には、初期設定のままなので、以前よりはぐっと明るい雰囲気だけど、

このテーマで色校正を黒中心にするとまた違って見えるんだろうなあ、と。

しばらくはこれでいってみよう。

テーマを変えたからって、アクセスが増えるわけではないんだけどさ。

そう、アクセス数が増えるのはまた別の話だからね(^^;

リダイレクト設定につまづく

単純にリダイレクトすればいいかと

思ってた

 

前回、このブログはSSL化できた、と

書きました。

確かにできています。

httpsでアクセスすれば、ちゃんとSSL化

できているのはわかるんですが、

正確には、

http httpsのどちらにもアクセスできる状態になっています。

これをhttpsのみでアクセスできるようにすべく

http → httpsにリダイレクトさせたいのですが、

そのまえに、

httpで運用していたときに、

http:// → http://www

になるようにリダイレクトしていたようで・・・

もうややこしいことになっています(泣)

やろうとしていることを整理

  1. http://hogehoge.jp → http://www.hogehoge.jpに リダイレクトさせてある
  2. これをふまえて、http → https にリダイレクトさせたい

ということです。

 

それで調べてみてこれかなって思い、参考にできるかどうか思案しているサイトがこちら。

https://www.1-firststep.com/archives/3938

この方も、(たぶん)さくらインターネットのサーバーを使っているようでして、リダイレクトについては通常の設定ではリダイレクトは動かないということも説明されています。

これでいいのか?正直不安!

単純に、

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{ENV:HTTPS} !^on$
RewriteCond %{HTTP:X-SAKURA-FORWARDED-FOR} ^$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

これをhtacsess(頭の部分にドットが入ります)に打ち込めばすべて解決なのでしょうか・・・・

さきほどいじろうとする前に、WordPress本体の、「設定」→「一般」から、サイトのアドレスをwwwを取って更新しようとしたらリダイレクトが多すぎると一時期アクセスできなくなってしまったのでちょっと焦ってます。

(ひとまずは、htacsessファイルをテキストにしてアクセスできるようにしてからもとに戻したので事なきを得ました)

さあ、どうなるのか、もうちょっといろいろと調べてみたいと思います。

 

~追記~2019.05.04

上記のコードをhtacsessに記述したら、すぐにリダイレクトがかかり、httpでアクセスするとhttpsにリダイレクトするようになりました。



WordPressをSSL化する(さくらインターネットのサーバー限定)

見ていてくださるささやかなこのブログの読者の方には

当然ながらお気づきだったと思いますが、このブログ、

SSL化されていませんでした。

SSL化しなかった理由

 

このブログのアドレスは、

www.hida-takayama.net/wp 

なんですが、

TOPに

www.

www.hida-takayama.net/

というドメインTOPでブログを作っていました。

しかも、ワードプレスがまだ盛り上がっていない、

レンタルサーバーでも簡単導入ができていない頃に、

MovableTypeでのブログを作っていたんです。

(私が借りているさくらインターネットは、今となってはWordPressが簡単に導入することができます)

WordPress自体がSSL化できるプラグインは探せばあったし、

SSL化までの導入記事は見て参考にしようと思っていたときでした。

疑問に思っていたことが・・・・出てきまして。

WordPressをSSL化したとき、Movable Typeのブログは

どうなる?

見えなくなったりしないか?

ということ。

Movable Typeのブログのファイル構造のほうが上位だから。

(ただ、ブログ自体は、仕事用としては使っていたものの、

もう更新することはなくなって、アーカイブ的な感じで公開して頂けなので最悪見れなくなってもしょうがない、とは思っていました。

この事象をいろいろと調べては見たものの、これに当てはまって記事を書いている人がいない・・・

しかも、SQLのようなデータベースはほとんど詳しくないから

何かあっても対処できない・・・

(一応フルバックアップはてってはありますけど)

だからこそなかなか進められなかったのです。

それから時がたって・・・

やらなきゃSEO的にも不利だし、いずれやらなきゃ感があって

改めて記事を見てみると・・・

さくらインターネット専用ではあるけれども、

WordPressをSSL化できるプラグインが作らえているじゃないですか!



参考にした記事はこちら。

【WordPress】SSL化プラグインの使い方

https://help.sakura.ad.jp/hc/ja/articles/115000047641–WordPress-SSL%E5%8C%96%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9

 

常時SSL化プラグインの利用について

このプラグインをインストールして有効化し、常時SSLを有効にすることで、
面倒な.htaccessの編集や過去の投稿コンテンツの置換を全て自動で行うことができます。

独自ドメインで利用する場合は、必ず事前にSSLサーバ証明書をインストールしてから利用を開始してください。 
さくらインターネットでは多様なSSLサーバ証明書のラインアップをご用意しております。 
短時間で導入ができるドメイン認証型(DV)「Let’s Encrypt」(無償)「JPRS ドメイン認証型」(有償) 
簡単にインストールできる機能をコントロールパネルにて提供しております。 
また、サイト運営者の実在性を証明する企業認証型(OV/EV)も、
お客様にて独自SSLとしてインストールすることも可能です。

ただし、このプラグインを実行させるのには前提条件が。

前提条件

    • さくらのレンタルサーバ、さくらのマネージドサーバ上で稼働するWordPressでのみ動作し、さくらのVPS、さくらのクラウドや他社レンタルサーバでの動作はいたしません。
    • 独自ドメインでご利用される場合は、プラグインインストールの前にSSLサーバ証明書の導入を完了してください。
    • 共有SSL(初期ドメインのSSL)を利用される場合はそのまま利用可能です。
    • 本プラグインはPHPバージョン5.6、7.0以上でのみ動作します。
      • ※PHPバージョンはサーバコントロールパネルのPHPのバージョン選択から
        変更可能ですが、既存プログラムが動作しなくなる可能性があります。
        注意して作業してください。
    • バージョンアップ履歴 (2018年12月15日時点)バージョン1.4:レンタルサーバの仕様変更に合わせて書き込む.htaccessを変更しました。今後はSNI SSLと独自SSLで設定を変更する必要はありません。

つまり、PHPについては最新のものにしておく必要がありますよってことですね。5系、7系にせよ、これを機会に最新にしておくといいかと思います。

ただし、導入しているプラグインによっては、動作しない可能性があるので、動作することを確認の上、PHPのバージョンを上げるようにしてください。

(バージョンを上げること自体は、さくらインターネット会員メニューのコントロールパネルから、ドロップダウンリストから簡単に選択することができます。)

 

プラグイン名 : さくらのレンタルサーバー簡単SSL化プラグイン

このプラグインで、

  • サイトURL設定の変更
    サイト内リンクのリンク先が、http://~からhttps://~に変更されます。
  • 過去の投稿のURL書き換え
    SSL化前に投稿した画像ファイルなどのURLがhttps://~に変更されます。
  • サイトURLのリダイレクト
    http://~でのアクセスを、https://~にリダイレクトされます。

ただし、過去の投稿内容自体が書き換わるわけではなく、表示の時に書き換えが行われるようになっているそうです。
そのため、このプラグインは常に有効にしておく必要がある のです。

記事内の内部リンクを書き換える場合は下記のロリポップの手順にあるように、Serch Regex プラグインを利用するなどして書き換えが必要です。

そういうことのようです。簡単であるからにはちゃんと仕組みがあるわけですが、このプラグインのおかげで、膨大な手間が解決してしまうのですから、ありがたく恩恵を受けたいと思います。

https://www.hida-takayama.net/wp/

アクセスすれば、ちゃんと見ることができるようになっていると思いますし、ブラウザにもちゃんと鍵がかかっていると思います。

ひとまずこれでSSL化、クリアです。



Gutenbergに変えてみたほうが良いのかなあ・・・

WordPressがバージョン5.1になり、クラシックエディターと

新エディターのGutenbergが同居しても不具合っぽい動作が

なくなったっぽいです。

というのも、デフォルトでどっちを選ぶのか、エディターを選べって誘導されまして(笑)

で、Gutenbergそのものに興味が無いわけでもなかったんだけど、不具合っぽく全く表示すらされなかったために、

これまでクラシックエディターでやってみたわけです。

全く書き方とか、異なるものなのでなれが必要っぽい。

見出しも楽ちん。しかも、下部に書いたことをブロックごと移動できる。

ひとまず過去に載せた、生ハムのサラダを上げてみた


セレナの時は、エアコンフィルターの位置を探すのに一苦労で、ネット検索して初めて見つけたのですが、MH34S ワゴンRは、拍子抜けするぐらい簡単でした。

http://www.hida-takayama.net/wp/archives/2680/2680

引用もなんか簡単にできてしまいそう。

  • 箇条書きのようなリストも
  • 簡単にできてしまう。
  • こんな具合に。
  1. 左側を数字にすることぐらいは直ぐにできる。
  2. こんな具合に。

ソースコードも簡単に挿入できるし。

file_name - 'evaluation.txt'
output_file = open(file_name, 'w')
for student_name in score_dict:
    score_data = score_dict[student_name]
    total = score_data[0]

    evaluation = evaluation_dict[student_name]

    text = '[{}] total:' {}, evaluation: {}\n'.format(student_name, total, evaluation)

上に書いたのは、pythonで作成されているプログラムの一部。

詩?どういう使い方?

中には、「詩」ってのがあったけど、これは流石に直感でわかんなかった。

なんだかかなり使いやすくなってそう。

一番いいと思ったのは、跡形付け加えようとしていることが、どの部分からも付け加えたあとで上下にブロックごと移動できること。

ドロップキャップもできるらしい。

クラシックエディターでから挿入できていたプラグインは、

ボタン自体が表示されないので、どうやって簡単に挿入できるのか謎になってしまった。

[amazonjs asin=”B07DJ8JFS5″ locale=”JP” title=”Transcend USBメモリ 128GB USB 3.1(Gen 1) スライド式 ブラック TS128GJF790KAE (ecoパッケージ)【Amazon.co.jp限定】”]

amazonJSで挿入しようとするとちょっとややこしい。

WordPress上での引用タグをデザインする

blockquoteタグをデザインする

 

WordPressで記事を書くときに、引用して書くことって

よくあることだとは思いますが、引用タグ blockquote を、

そのまま使うのもありではありますが、色んなサイトを見て

みると、引用された部分がデザインされているわけですよ。

かっこいいわけですよ。

そこで、はっきりと引用しているとわかりやすくするには

どうしたらよいか、グーグルで調べてみると、CSSでデザインで

できるということがわかったわけです。

だけど、CSSでデザインなんてはっきり言って敷居がかなり

高くなってます。

昔ほんのちょっとかじってはみたけど、すっかり

忘れてます(汗)

いいデザインはないものかと探していたところ、

このサイトに当たりました。

CSSで作る!魅力的な引用デザインのサンプル30(blockquote)

 

30もの魅力的な引用デザインが有り、印象はどれも

「かっこいい」!

CSSだけでこんなデザインができるんだと思うと、すごいと

同時に、このサイト様のデザインセンスに感謝したいと

思います!

もちろん、どれもいいとは思うのですが、それぞれのサイトの

雰囲気や色などデザインもあるので、私が選んだのはこれ!

 

Image from Gyazo

 

サイト全体が黒が多いのでこのデザインに。

ただ、このデザインを使用する際には、FontAwesomeという

WEBアイコンを使用する必要があります。

 

Fontawesomeとは?

どうやって適用するのか?ってのもくわしく、さるワカさんに

掲載されていました。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

このページをじっくり読めば、WEBアイコンをサイト上に

適用させることができます。バージョンもどんどん上がって

いるようで、フリーで使用することができますが、有料になると

アイコンにも幅が広がって、いろんなアイコンを数多く

使うことができるようになります。

 

WordPress上に引用デザインを適用させる

そのためには、

 

blockquote {
position: relative;
padding: 7px 16px;
box-sizing: border-box;
font-style: italic;
color: #585858;
border: solid 3px #585858;
}
blockquote:before{
display: inline-block;
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
vertical-align: middle;
text-align: center;
content: “\f10d”;
font-family: FontAwesome;
background: #585858;
color: #FFF;
font-size: 22px;
}

blockquote:after{
display: inline-block;
position: absolute;
bottom: -20px;
right: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
vertical-align: middle;
text-align: center;
content: “\f10e”;
font-family: FontAwesome;
background: #585858;
color: #FFF;
font-size: 22px;
font-weight: 900;
}

blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
}

blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}

この上記のCSSを、WordPressのメニューから、

外観→CSSの編集 を開いて、

流し込んであげればいいわけです。

これでOK!

 

と思いきや・・・・・

アイコン部分、つまり ” ダブルクオーテーション部分は

表示されてなかったんです。

 

アイコンが表示されない

 

悩みに悩んだ結果、調べてみるとこんなサイトに記載してありました。

 

Font Awesomeがうまく表示されない。

 

引用デザインサンプル集のページ更新日が2018/08/09となって

いるので、全く古いページではないのですが、FontAwesome

バージョンがどんどん更新されている状況の中なので、

あり得ることなんだろうとは思いますが、

 

表示されない理由がわかった

 

Image from Gyazo
 

font-family の部分の、

「5 free」がなかったために、すぐに修正したところ、無事

アイコンが表示されるようになりました。

(多分このページでもちゃんと表示されれていると思います)

これでまた一歩、このブログもデザイン化され、カスタマイズ

することができました。

参考にさせていただきましたサイト様には感謝したいと

思います。ありがとうございました。

 

参考ページ:

CSSで作る!魅力的な引用デザインのサンプル30(blockquote)

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

Font Awesomeがうまく表示されない。

 

[amazonjs asin=”4295000795″ locale=”JP” title=”いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)”]

予約投稿に失敗する(キャッシュを動かす)

WordPressに投稿する際にたまに使う「予約投稿」。

最近失敗していたのでテストをしますが、

ブログを出来るだけ早く表示させるためにキャッシュ系の

プラグインを使用していましたが、キャッシュを動作

させていると予約投稿に失敗するという記事を

いくつか見たので、この投稿のときには一旦プラグインを

停止して書いています。

ただし、WordPressの予約投稿は、予約投稿した時間付近に

誰かがアクセスする時点で実行されるので、誰もアクセスして

もらえない人気薄のサイト(ここもそうですが)では、

予約投稿時間を過ぎてある一定時間をすぎると失敗と

なるようです。

(ただ、過去に予約投稿をして失敗したという記憶がなくて、

失敗するようになったのはごく最近なので、正直原因が

わかりません。

(原因がアクセス数がないってのが原因だと凹みます)

さて、どうなることやら。

 

今度は

WP Fastest Cacheを有効化して予約投稿してみます。

 

~追記~

自分がアクセスしたからでしょうか、無事投稿に失敗すること

なく更新できました。

ということは・・・・・・

アクセスが少ないからなんだな・・・・(泣)

予約投稿に失敗する

WordPressに投稿する際にたまに使う「予約投稿」。

最近失敗していたのでテストをしますが、

ブログを出来るだけ早く表示させるためにキャッシュ系の

プラグインを使用していましたが、キャッシュを動作

させていると予約投稿に失敗するという記事を

いくつか見たので、この投稿のときには一旦プラグインを

停止して書いています。

ただし、WordPressの予約投稿は、予約投稿した時間付近に

誰かがアクセスする時点で実行されるので、誰もアクセスして

もらえない人気薄のサイト(ここもそうですが)では、

予約投稿時間を過ぎてある一定時間をすぎると失敗と

なるようです。

(ただ、過去に予約投稿をして失敗したという記憶がなくて、

失敗するようになったのはごく最近なので、正直原因が

わかりません。

(原因がアクセス数がないってのが原因だと凹みます)

さて、どうなることやら。

 

~追記~

キャッシュのプラグインを外しての投稿は

なんとか公開成功。

次はキャッシュを動かして同じことをやってみようと思います。

テーマを変えてみた

 

プラグインのアップデートから、データベースをアップグレードしてちょうだいって

催促があったので、「まあ、大丈夫でしょ」なんて思いつつも、一応、データベースを

バックアップを、と思ったら、時間がかかりすぎてエラーが出たけど、

気にせずにやったら・・・・

 

あ、なんか動作がおかしい・・・・・

過去の投稿の続きボタンが変な動作してる・・・・

過去の投稿がおかしくなってしまったので、ひとまず過去のデータベースの

バックアップをもとに戻し・・・

それでも動作がおかしかったので、これ以上おかしくなるのもまずいと思い、

テーマを変更しました。

また少しずつカスタマイズしていこうと思います。

スポンサーも掲載しないと(汗)

結構貴重なんです、続けていくためにも。

[amazonjs asin=”4295000795″ locale=”JP” title=”いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)”]

Yoast SEOのメニューが変わった?

Yoast SEOって、メニューとか選択とか

変わった?

 

見てもらうにも、せっかくだから見てほしいということで

入れてあるプラグイン、有名なYoast SEOがインストール

されています。

ところが、今現在、バージョン7.6を使用しているのですが、

過去に使用していたバージョンと明らかに設定できる項目が

減っているのです。

有料にて、Yoast SEO Premiumというのもあってより高機能な

ものもあることは知っています。

https://gyazo.com/798a81d825b837d67a41d81f3f380034

この画像が今の私のこのブログ上でのYoast SEOの画面です。

フォーカスキーワードしか書き込めなくなっています。

今のバージョンはこれで正しいのでしょうか?

それとも無料版はSEO設定できる項目が減ったのでしょうか?

もしこれはおかしくなってるということでしたら、単純にこの

プラグインをインストールしなおせば良いものか、それとも

なにかいい方法があるのか、もしくはこれが現状での

正常なのか、ご存知の方がいらっしゃれな教えてください。

どうぞよろしくおねがいします。

 

HTTPS化しようとしていますが、疑問が出てきた

このブログはWordPressで作成されています。

アドレスが、

http://www.hida-takayama.net/wp/

となっています。

その親、つまり

http://www.hida-takayama.net/

ga,

あるのですが、このサイトは実はMovable Typeで

作成されているのです。

各サイト上で、WordPressのHTTPS化について、

プラグインを使った方法とSSL証明書について

書かれているサイトは多数ありました。

さくらインターネットを使用している人が多いようで、

無料SSL証明書の導入方法と、プラグインによる

https化の導入説明は丁寧にされていました。

(私も実はさくらインターネットユーザー)

ただ、同一ドメインでの異なるCMSブログの混在の中での

HTTPS化についてはなかなか探しきれていないんです。

httpからhttpsにすると、全く異なるアドレスになるので

これまでのアドレスだと、ページがないと返される404エラー

になり、リダイレクトがかかるのですが、それも

リダイレクト先がないものだからエラー頻発という酷い状況に

なりそうな予感・・・

 

どなたか、異なるCMSブログを持つサイトのHTTPS化されて

いるサイトやその説明をしているサイトが有ればアドレスを

教えてくだませんか?

SSL証明書とHTTPS、httaccessがキーワードになるんだろう

なあ・・・

引き続き調査を続けます・・・・

[amazonjs asin=”4797395168″ locale=”JP” title=”本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる”]

[amazonjs asin=”B078M9LY4B” locale=”JP” title=”アフィリエイトがしたい人のWordPress講座ssl編: これでsslはもう悩まない! インターネットビジネス”]