実験学基礎Ⅰ(2単位)

そして デザイン職人への 道へ

実験報告(2018/7/6) 番外編

今回の更新は番外編です。

昨日、友人と編入学基礎Ⅰのブログをスマホで開いていたところ、メニューバーをクリックして開くことができないという問題を見つけました。以前はメニューバーを開くことができていたので、その原因を探り、解決に当たりました。

今回、無事解決することができたので、実験報告の番外編として学んだことをブログ記事にしておこうと思います。

 

1.メニューバーが開かなかった原因

編入学基礎のメニューバーは、どこかのブログで公開されていたものを参考にアレンジを加えたもので、(ブログデザインは自分の担当ではないので詳しくはわからない。)タイトル下の欄にhtmlを記述し、デザインCSS欄に色や幅などを指定する記述をし、フッタ欄で、スマートフォンでも作動するようにscriptを記述した構成を取っています。

しかし、今回はフッタ欄のscriptの記述がいつの間にか削除されてしまっていたのです。これが原因でした。どうやら編入学基礎Ⅰのブログデザイン改革にあたってGoogle Adsenseの広告コードを削除する際に一緒に消してしまったようです。

 

2.どうやって解決したか

まず、編入学基礎Ⅰのメニューバーに関する記述が多くなされているであろう、タイトル下欄とデザインCSSを疑いました。幸いにして実験学基礎Ⅰに全く同じものを保存していたので、タイトル下のhtmlとデザインCSS欄の記述を全コピペして貼り付けました。しかしそれでも解決せず、本当に焦りました。

その次に疑ったのは設定→詳細設定からのheadタグで囲まれた範囲の記述です。なぜかというとブログ全般のことについて書いてそうだから。けれどheadタグのところには関係のない記述が並んでいただけでした。ついでにheadタグには何を記述するべきなのかについてまとめたサイトも貼り付けておきます。未来の自分へ、復習してください。

saruwakakun.com

しっかしサルワカくんはわかりやすいです、、今度、編入学基礎Ⅰでも「ホーム画面に保存」をタップしたとき、スマホ用アイコン画像がきちんと表示されるように設定したいなと思います。

結局どれを疑っても解決しなかったので、最後は手あたり次第実験学基礎Ⅰと編入学基礎Ⅰの違いをみつけていきました。するとフッタ欄に違いがあることが分かりました。

 

3.今後の改善点

今回は各項目に記述されたコードが、ブログ上のどこに対応した記述なのか理解することができなくて、時間を多く割いてしまいました。ですので、今回は<!--説明--!>と記述すれば、その文章<>部はブログ上には表れないという特性を生かして、各項目に記述されていたコードが何に対応しているのか、コードの前に<!--説明--!>を使って書いておきました。これで一目でわかります。

 

4.最後に

ほんの小さなことですが、Webデザイン初心者(?)にとって問題の解決と説明を付けておくことは大きな経験となったので、まとめておこうとなりました。

そういえば、パンくずリストも同時に消えてしまっていたので、復活させておきました。編入学基礎Ⅰのデザイン更新は長い道のりとなりそうですが、少しずつ進めていきたいと思います。

 

今回も自分以外には全く伝わらない記事となりましたが、もし万一見てくれた方がいらっしゃいましたら、閲覧していただき本当にありがとうございました。