私ども平和の絵本の、日々の活動日誌です。

2016年05月:「平和の絵本で-和を地球へ」活動日誌

TOPへ-活動日誌(平和の絵本から)

私どもの平和と癒しの運動の、日々の活動日誌です。

SNSボタン対応作業中


以下、自分用の備忘録として。

SNSボタンに関しては、今まで忍者ツールズを利用していたのだが、柔軟性が欲しくなり(スマホ対応で行空けを大きくしたい他)、個別に対応作業中。

物によって簡単なものと、難しいものが色々。
MIXIは、携帯メルアドの登録をしなければいけないなど色々制約があり、諦めることとした。携帯用メルアドは普段使っていないので、存在するのかどうかもよく分からない。^^;

MIXI以外のほとんどのSNSでは、会員登録をしなくても、SNSボタンを設置できる。
どれを選んだものかしばらく悩んだが、なるべく会員数が多そうなところを。グーグル+は検索に影響するかも、と入れることとした。新しく設置したのはポケット。これもよく分からないのだが、便利だとの記事を読んで。

一番ややこしいかったのがフェイスブック。 フェイスブック用にMETAをいじったり、表示する画像をアップしたり。すでにhtml上の表示しているサイトのタイトルや説明文を、FB用に載せる必要がある。(載せなくても イイネ シェアーボタンそのものは設置可能)
自分のIDをMETAに入れる必要もある。なぜか複数のIDがあり、有効なものと無効なものがあるようで、ここもややこしかった。
画像の大きさも横1.200px以上と大きな画像を要求される。

なにかやろうとすると、次から次へと新しい概念が登場し、いつまでも終わらない。^^;
まずはFBのいいねとシェアボタンの作り方はこちら。レイアウントのところをstandardにすると、横幅が広くなりすぎる。widthを指定しても無効。そこで、button countを選択。これで横幅はOKとなった。
Facebook SDKというscript部分は、indexの頁ではなく、読み込みのphpファイルへ記入。それぞれのSNSボタンに必要なscriptは、どれもphpファイルへ記入した。おそらく読み込みスピードは遅くなると思うけれど、html本体で記述するのは、しんどい。

FBのMETAについては、こちらのオープングラフを参照。

METAなどFBから見てOKかどうかを判定するのには、こちらのテストの頁。なぜか理解できないレスを返されたことも(20kbの画像を8mb超だと判定されて、混乱)

各種SNSボタンを設置するとき、特に参照したのは、この頁。SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

それからグーグルのスピードテストをクリアしたくて、こちらのページを見ながら、cssのインライン化も挑戦。最小限のcssをhtml内に記入して、大半のcss情報をscriptで読み込むようにするのだが、なぜかスピードテストの点数がかえって低くなってしまう。
訳が分からないので、結局、cssの読み込み順序の最適化はあきらめた。

一方で圧縮によるスピード化は、サーバーのマニュアルを見ると、サーバーの方で対応しているようなので、onへと。
ごくまれに表示が崩れるということだが、ま、崩れたら考えよう。こちらは次のサーバーの頁を参照。mod_pagespeed設定について

テスト用の頁では、成功したので、あとは頁のアップを。METAについては、日本語版だけでも100ページ超いじる必要がある。
WEBの左側の目次は、順番を変える必要もある。これは全部で4種類のphpファイルの書き換えで、対応できる。なんだかんだとあと半月ぐらいはかかるかなあ。

絵本の各ページの下の部分の目次も作り変える必要がある。WEBを最初に作ってから12年超。スマホ対応はずいぶんと終わったけれど、まだまだ修繕する必要がある。^^;
  1. 2016/05/26(木) 14:15:14|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0

スマホ対応作業中


ここのところ、ずっとスマホ対応の作業を行っている。 PDFファイルもスマホで読めるように、字を大きく変更。
スマホで気楽に電車の中などで、絵本を読んでもらえれば、嬉しい。
  1. 2016/05/02(月) 16:45:28|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0
















































当サイトと無関係の広告;[

FC2Ad