おびやまロボット研究所ブログ

その他の作業：

おびやまロボット研究所のホームページの方で
・ブログを作成したのでブログへのリンクを作成。
・headerメニューにブログを追加、項目数が多くなって画面が崩れたので、よくある質問をFAQに書き換え。
・footerメニューにも、ブログを追加。
・関連リンクの中にも研究所ブログのリンクを入れた。
・楽天ブログとごっちゃにならないように分けてリンクを作った。


ブログの管理作業を記録：
・header.img の画像のサイズを合わせた。この画像は画像管理のボタンから画像作成でheader.imgの所に入れる。
・ブログの名称が白抜きで見づらかったのでフォントの色を変えた。これはテンプレート編集からCSSの編集からHeadのところでcolorをFFFから０００に変更。
・ホームページへのリンクを入れる。これもテンプレート編集から、本文の編集の部分で入れる。
・テンプレート編集から、本文の編集の部分のRSSの後にアクセスカウンターのリンクを入れた。このカウンターはドメイン全部で共通。
・サイド/フッタ管理から、フッタにCopyrightの文言を入れた。
・サイド/フッタ管理のサイドのところにお知らせが書かれている。適当に記載。
・リンク管理から、ホームページと同じリンクを追加した。
・カテゴリーを作った。カテゴリーの追加は後でもできる、記事の書き込みの時にカテゴリをえらぶ。

記事の更新作業の手順を考える：

以前の通り、楽天ブログに記事を書いて、それをcpu4eduにアップしてみた。
この場合、画像の取り扱いが面倒。
楽天にアップロードして、同じ画像の対応を考えながら、記事をおびやまロボットに書いて、imageRに画像を置いて、更にリンクを貼って、アコーディオンメニューを修正して、というのはかなり面倒。
記事の追加は素直に、CMSを使った方がいいと思った。

が、いまさら大変なので、
ちょっと工夫。画像を最初からおびやまロボットにアップ。そしてその画像を参照しながら記事を追記すればよいのでは。
楽天の方で記事中の写真を

というように、おびやまロボットに置いたものを参照するようにしたら、少し楽かもしれない。
楽天ブログが生き続けて、おびやまロボットが消えてしまったらアウトだが。

更に工夫：
記事作成はこのブログが一番簡単なので、最初に画像をアップロード、アップロード先はブログのシステムの中の写真フォルダだが、所在が分かってるし、直リンクなのでまあOK 。
ブログの記事を画像を参照しながら作成。

そのブログの記事をそのままコピペで楽天に持っていけば同じものが表示される。
楽天ブログの方がアクセスが多いのでこのブログのコピーサイトとしてしばらく使って、楽天ブログを徐々にフェイドアウトしていこう。

さくらのブログは...?
さくらのブログが残ってるけど移行に挫折してアクセスもあまりないので、こっちは放置。
いつか別テーマでブログを作り直すか、または廃止。

ブログの追加：
https://www.kent-web.com/
からブログを追加してみる。cafeというディレクトリ名に置かれる。
ここのサイト（www.kent-web.com）のcafelogをダウンロードしてアップロードしてちょっと編集して権限を設定しただけ。
簡素な画面だけど管理用ページがよくできててデザイン変更も容易。それ以外にやったことは、サブドメインを設定して、ディレクトリに関連付けたり。
楽天ブログも広告が増えて画面が見にくくなって記事表示数が制限されて最近アクセスが減ってきて、さくらのブログを作ってみたけどさくらインターネットではブログサービスは縮小傾向にありいつなくなるか分からないので、自分の勉強もかねてやってみた。仕組みが少し分かってきた。

サブドメインお試し：
さくらインターネットのレンタルサーバー管理ページージから、blog.cpu4edu.netのサブドメインを追加作成した。リンク先は ./cafe
でも、サブドメインは、httpsではアクセスできず、http://blog.cpu4edu.net　になる。これはさくらインターネットの仕様。SSLは別途料金を払って登録しないといけないようだ。
こうなるとhttpsのページからリンクを貼ったとき不具合が生じた。
なので、httpsのページからブログにリンクを貼るときは、./cafe　でリンク。
http://blog.cpu4edu.net　でアクセスすると警告がでて、セキュリティ保護なしのページで表示される。なので、サブドメインは作っていちおうページは表示できるけど警告が出るので、　https://cpu4edu.net/cafeを直セスアクセスするとSSL対応してる。なのでここをリンク先にした。
せっかくサブドメインは作ったけど無理に使わなくてもいい。

レスポンシブ対応について：
スマホやタブレットの画面に合わせて表示させるレスポンシブ対応について。
PC画面でフルスケール出せるときは文字は横４０文字になっているが、幅が狭くなると文字が入らなくなる。
記事が、pre　で書かれてると、横を４０文字以内で改行をして記事を作っていても、画面の横幅を狭くすると画面が崩れる。

で書いて、改行は、
でないとレスポンシブル対応にならない。
プログラムリストは横幅が広いことが多いので、書き換えるのはかなり面倒。

youtube動画の埋め込みのレスポンシブ対応について：
youtubeで埋め込みリンクを表示させると縦横の幅固定値になってる。
https://hirashimatakumi.com/blog/6601.html
に書いてある通り、横幅100％、アスペクト比を設定しておき、iframe の外側を

で囲むと、
画面サイズに合わせて自動で100％にしてくれる。

そのほか：
アコーディオンメニューの幅が狭かったので、SP.cssを書き換え。
横幅を100％」にする設定。　PC用画面、タブレット画面、　スマートフォン画面それぞれで幅の設定が適応されるように書かないといけない。
スマホのアコーディオンメニューの文字サイズが小さい。これについては不明でこれから。
CSSを変更してもキャッシュが残ってることが多い、
PCだとSHIFT+F5、スマホだと、ブラウザのプライバシー設定のところで履歴を消す。


今見たページのアコーディオンメニューを開きっぱなしにするための改良：
contents.php　でコンテンツを読みだした後にサイドメニューを表示するので、コンテンツ内でスクリプトでチェックを入れても、サイドメニューに反映されない。
サイドメニューが表示された後にチェックを入れるようにスクリプトを書かないといけない。
ためしに、メインコンテンツとサイドメニューの順番を入れ替えると、表示がおかしくなった。また、レスポンシブ対応にするとメニューが先にきてコンテンツが後になるのでおかしくなる。
リンクで飛んだ後にもチェックボックスにチェックを入れた状態にするために、コンテンツ最初にアコーディオンメニューの番号を取得するように
スクリプトで記述
例


contents.php　のサイドメニュー表示後に、番号を調べてメニューのチェックボックスをチェックするスクリプトを書いたら上手くいった。
この処理は、コンテンツ表示時だけでよいので、トップとヘッドメニューのページにはこのスクリプトを書く必要なない。

twitterのリンク作成：
https://publish.twitter.com/#
ここからリンクを作ったものを適当な場所に張り付け。


facebookのリンク作成：
https://developers.facebook.com/docs/plugins/like-button
ここからボタンを作れるので、試しに適当に貼り付け。


googole adsense に申込：
以前Youtbeが緩かった時に作ったアカウントがあったので、adsenseのサイトにログイン、そこで、cpu4edu.netのサイトを登録。
サイトに指定のリンクを貼って、申込をすると審査される、
申し込み時点で、現在のページに広告挿入の案が入って来る、あちこち入るので、不可の場所だけ指定する。
以前のyoutubeの収入が若干残ったまま資格が無くなったので払われることはない。
審査が終了して、広告が許可された。
説明されている通り、
ads.txt
を作ってルートに置いてリロードすると認識された。
ページ内に広告がべたべた入った。
今のところ広告収入は平均すると１日1円程度、ある程度金額がたまらないと支払われない。
このペースだと２０年後にやっと入金されるくらいなので広告なんてあってもなくても問題ない。ない方がすっきりするけど、いろいろお試しなのでしばらくそのまま。


amazon アソシエイト：
これも以前登録してるので、リンクを作成して貼る。リンク作成は、アマゾンのサイトの上部にツールバーを許可すると、リンクが作れる。
画像付きが見やすかったんだけど、画像付きリンクは廃止されたので、テキストリンクのみ。
これも、広告収入は月に100円程度でほとんどない様子。
広告を貼って儲けるというより、自分の忘備録の意味合いが強い。