ホームページ 一覧

SSL化 本当に完了

サイトでいうと、アフィリエイト系のリンク先が、SSLになっていなかったのですが、確認した所、SSLに対応している部分もあったので、そこに変更。

 

それと、CMS内で、置換できるツールがあったので、ブログの添付に画像はそれで、一気にパスを、httpsに書き換えて、ほぼ終了。

 

Chromeでも、ほぼ警告がでなくなったので、よいと思う。

 

と言っても一部SSLに関係ない所で、問題を見つけたので、その修正は必要な感じです。

今年の7月から、GoogleChromeが、SSL化していないサイトは、危険と警告を出す事になったしまったので、自分のサイトもSSL化。

https://gigazine.net/news/20180209-chrome-http-site-not-secure/

 

と言っても、こんなこともしているよと、宣伝の為に、サイドバーに設定してある、アフィリエイトのリンクの画像がSSLになっていない為、混在環境になっている・・・・(-_-;)

 

早く、何とかしてくれないかな・・・・・・

 

 

最近、お客様に自分のドメイン直下に、安くブログを構築して!!

 

って依頼がありました。

 

そこで、安くやる為に、既存のテーマを元に、子テーマで改造して、作る事にしたのですが、これツカエル!!ってあったテーマを紹介します。

 

Luxeritasというテーマです。私が考える内部SEO対策とは違うのですが、プラグインのAll in One SEOに近い考え方ので、子テーマで色々できる事も含めてこれにしました。

 

なるべく安くって事だったので、ブログの方は、CSSと、写真の編集、吹き出しみたいな感じで、ブログで書けるように、function.phpを追記って感じの事を子テーマに適用しました。

(Wordpressは太字がstrongタグになる為、お客様がそんなことはわからない方々でしたので、太字を使うとSEO上あまりよろしくない為、太字がbタグになるようにも変えました。)

 

それがこちらです。もしよければ読んであげてください。

 

http://www.aoi-kaigo.co.jp/diary/

 

 

自分のホームページは、自分が思っている内部SEO対策も含めて細かくやろうと思っています。

 

PHPが、まだ完全に理解しきれていないので、難しいですが、なるべく早めに上げたいと思います。

久々すぎる更新!!

 

 

表題のとおり、2Mぐらいの画像をアップロードしようと思ったら、できない・・・・・

php.iniや、htaccessで、設定してあるはずなのに、1M以上のファイルがアップロードできない・・・・

WordPressの最大アップロードファイルサイズを変更する方法

 

 

なぜ~~~~???

 

 

結論はすごく単純な事だったのですが、Wordpressをマルチサイト化したら、デフォルトそうなってしまうようです。

 

マルチサイト化したサイトのダッシュボード内の、設定→サイトネットワーク設定 の下部にこんな項目が

SnapCrab_18-1-19_10-11-29_No-00.png

 

アップロードのファイルサイズを、今回は、3Mに、サイトのアップロード容量も、100Mしかなかったので、2Gに変更って感じにして解決

#text は、「空白のみのテキストノード」ってやつですが、HTMLで、

<div id="title">

<div class="hoge00">aaaaa</div>

<div class="hoge01">bbbbb</div>

<div class="hoge02">ccccc</div>

</div>

としたときに、ブラウザ上では、下記ように空行が入ってしまいました。

aaaaa

(←ここに空行がはいる)

bbbbb

(←ここに空行がはいる)

ccccc

 

これが、単純な話ですが、<div class=~~~~>の前に、思わず、半角スペースをいれてしまうという超初歩的なミス・・・・・・

それを、コピーして使ったから、全部に空行がはいってしまった(-_-;)

 

半角スペースを消して、TABに修正して 無事 空行が消えました。

 

何やってんだか・・・・って思いましたが、忘れないように、恥をさらすようですが、ブログに記載してしまいました。

 

最近、お客様のサイトで、宣伝を強くするために、キャンペーン用の項目を追加しました。

 

Movabale Typeで、作成したものでしたが、色々やり方はあるとは思いますが、キャンペン用のウィジェットを作成して、それを、トップページに組み込む形にしました。

 

通常のWebページを作成した際に、タグにたとえば「キャンペーン」っていれると、トップページに、繁栄されるようにしました。Webページの自動更新が表示されるところを作成してあるので、キャンペーン更新ってちゃんと自動で出るようにもしました。

 

ただ、この時に、少し失敗してアホみたいなことで、1週間ばかりかかってしまったのですが、ただ単に構造を作成する際に、<div>で囲むところを間違えるという、大変恥ずかしいミスを・・・・・

 

けど、これを見つけるまで、構造をすべてなめつくさないとわからなかったんですよ・・・・(;_:)

 

見た目は問題ないけど、構造的にミスがある時は中々気遣いもんですね・・・・(ただ、単にスキルの問題と集中力の問題だと思いますが・・・・)

前のブログで書いたのですが、文字の縁取りを設定したら、Firefox、IE、Operaでは問題なく、Chrome、Safariでは、縁取りが太くなって、かっこわるくなってしまいました。

 

元々、

http://liginc.co.jp/web/html-css/css/70065

を参考に、IE、Firefox,Chrome、Safariに対応するように記述したのですが、上記のサイトそのままなのですが、下記のように記述しました。

/*-------------文字縁取り ---------*/
  filter:dropshadow(color=#02258a,offX= 0,offY=-1)
  dropshadow(color=#02258a,offX= 1,offY= 0)
  dropshadow(color=#02258a,offX= 0,offY= 1)
  dropshadow(color=#02258a,offX=-1,offY= 0);
  -webkit-text-stroke-color: #02258a;
  -webkit-text-stroke-width: 1px;
  text-shadow: #02258a 1px 1px 0px, black -1px 1px 0px,
               #02258a 1px -1px 0px, black -1px -1px 0px;

 

太くなるなら、Safari、Chromeの部分の記述Webkitの部分を細くしてやれ!と思って、1pxから0.5pxってやってみたら、Chromeとかはいい感じになったのですが、次は、Operaの縁取りが細くなりすぎて、スマホだとよく見えなくなってしまいました。

 

僕の結論としては、text-shadowだけの記述にした方が、上記の問題が起きないってことで-webkitの部分は削除しました。ってことで下記のように変更

/*-------------文字縁取り ---------*/
  filter:dropshadow(color=#02258a,offX= 0,offY=-1)
  dropshadow(color=#02258a,offX= 1,offY= 0)
  dropshadow(color=#02258a,offX= 0,offY= 1)
  dropshadow(color=#02258a,offX=-1,offY= 0);
  text-shadow: #02258a 1px 1px 0px, black -1px 1px 0px,
               #02258a 1px -1px 0px, black -1px -1px 0px;

 

ちなみに flterと、dropshadowは、IE8,9の対策です。

 

 

自分のサイトで、項目行の、背景にグラデーションをかけたものと、イメージを指定しました。

 

スマホ用の設定(max-width指定)もして、できた!って思ったら、スマホでは、グラデーションが縞模様に・・・・・・・・

 

内容はこうです。

何~~ってなったのですが、スマホ用で設定したのが、背景画像を、幅に合わせて縮小表示しようと思って、background-sizeを指定しました。

@media (max-width: 640px) {
  .h3  {
     font-size:110%; 
    moz
-background-size:30% auto;
    background-size:30% auto;
  }
}

この時点に完璧に失念していたのですが、グラデーションもイメージと同じ扱いになるため、background-sizeの指定にひっかっかってしまうのです。

 

その為、グラデーションも高さが縮小表示され、縞模様になってしまった・・・・・(-_-;)

 

恥ずかしい失敗でした。

 

結構きれい!って感じで評価されていたので、Googleの日本語Webフォントをブログと、ホームページに入れてみました。

 

組み込むこともできるみたいですが、12.6MBもあるみたいですし、変更があった時に、また組み込み用に軽量化して、入れるのが少々めんどくさいので、googleから呼び出す方式にしました。

 

CSSに

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
適用させたいところにフォント指定します。今回は、全体ってことで、bodyに適用
body {
     font-family: 'Noto Sans Japanese', "メイリオ", serif;
}
って感じにしました。自分のブログを例に、どうなったかの比較
before
font_before.png
after
font_after.png

と、言っても、WordpressからMTに今は逃げていて、バーガーメニューってやつをちゃんとやってみているところです。

 

animenuってやつを、グローバルメニューに使って、CSSとかを、サイトに合うように改造中・・・・・

 

そこで、初めて、疑似要素(:before、:after)と、hover等の要素を同時に指定できるやり方があることに知りました・・・・

 

これは、結構恥ずかしい事なのだろうと思いつつ、今までアホみたいに知らずにやれたな~~と、また反省・・・・

 

ちなみに。リンクのa要素の場合、

a:hover:after

て感じに書けば、afterのhover要素を指定できます。

 

このページの上部へ

ネットワーク、パソコン サーバ設定

ネットワーク構築ホリテック

 

紆余曲折しながら、独立して中小企業様向けのネットワーク構築
保守、パソコン サーバ、設定運用管理を行っています。ホームページの作成も行っています

ホームページ

 

facebook

 

 

 

 

Microsoft Public Affiliate Program (JP)(マイクロソフトアフィリエイトプログラム)

 

Microsoft Public Affiliate Program (JP)

サイト内検索

最近のピクチャ

  • yyyy-m-d_h-n-s_28o-00.png
  • maltipointtonnel_kensyo.png
  • 検証用ネットワーク.png