◎ 予想もしていない事態が起こって、頭がしっちゃかになってしまった前回のレポート !! 混乱の元が、まさかのあの パンくず・リスト で、自分は把握したつもりでいたのだけど アタマのメインの項目の部分が、あとからいらなくなるらしき？の展開で かなりに混乱してしまったのです これにはさすがに打ちのめされました
やっとここいらを何とかクリアし、その後に 小さな星がほら、ひとつ の場所で スクリプトとCSS等もダウンし、お礼もカキコして CSSとスクリプトはメモ帳のデータにしておきました 今回のこのレポートを順に追うと、 ①まず自分のブログの管理画面で、カテゴリーを構成し パンくず・リストをセットしておく
②に 小さな星がほら、ひとつ の場所で スクリプトとCSSの2つのデータをダウンし、CSSとスクリプトはメモ帳のデータにしておく ③これが済んでから、今回のパートになる はてな・テーマのイノセントの場所へ向かう・・と、ここまでの事が出来ていないと、今回のこのレポートは おそらく無意味になってくるかも知れません で、今回はイノセントの総本山から、行ってみてます !!
- テーマ・イノセントの場所へGO !!
- ここがかなりツライ？ URLの対処 !!
- HTMLを乗り切れば、後は貼り付けをして行くだけ・・
- 次はスクリプトを !!
- レスポンシブの対応も忘れずに・・
- CSSの文法には順序が有る・・？
テーマ・イノセントの場所へGO !!
◎ ナビゲーション・バー イノセントでのキャッチフレーズの上のメニューになりますが、ここでのHTML・・最終難関がここの問題 !! ここでも散々に脳を揺らされラリルレロ 慣れだけで食い下がってきた自分には、あまりにも厳しい現実が・・ !! しかしそこいらのコトが有ったから、このレポートが書けているのですね・・ただ、コピペで簡単？なんて気分で来てたら ちよっと辛いかも・・!!
◎ そうしてから、ここのページへ移動・・イノセントの項目を探して行ってみて下さい
イノセントナビゲーションバー編・カスタマイズ
http://moonnote.hateblo.jp/entry/customize-innocent-navigation-bar
◎ で、問題のここの部分を見てまして、一応自分の場所へ持って行く事にしました
◎ ドラッグでコピーが出来そう？ 行ってみます
◎ 何とか自分のメモ・ソフト リーフ・パッド に貼り付けが出来ました 第一段階はこれで何とかクリアー ホッ・・の状態？
◎ 自分で見やすい様に、改行を入れて HTML文を確認してるトコの図になります
◎ この文を見て、思って来たのが ①②③の事柄・・上で起こり・・らしき始まりが有って、下で/を入れて終わりにして居るんじゃないかな !! と、感じました
◎ 次のこの文法・・自分が大チョンボをして、メニューが開いてくれずに大悩みに陥った部分ですが Aの ホーム でのラストの部分には<Li>となっていますが、Bの カテゴリー の部分にはこれが有りません !! そしてBの方には線を引いておいた記述が有りますが、Aにはありません
ここのページの記述にはそこいらの事が載っている様です・・前回のパンくず・リストの為に メインのカテゴリーとサブのカテゴリーのコトを、くどい位に書きましたが このBの記述を書き換えてやれば、イケるのではないか？ と、予測をたててみました
◎ 自分のページをここでちょっと見ていただけますか・・メニューの項目はこうしています これを見ると トップ と、 音楽に有難う の部分には、下に向けた矢印のマークが有りません つまり、ここにマウスでカーソルを載せても 何も表示されず、クリックをすればそのファイルがずらっと並んだページへ移動します 前回で階層と云う表現をやりましたが、1階層で済んでいます
矢印が付いた項目はカーソルを上に置くと、2階層目の項目が表示されますが 自分の場合はここまでにしています パソコンやタブレットならば、次の3階層あたりもOKでしょうが 現在のネット世界はあきらかにスマホがメインになってきています そこいらを考慮して もし、項目がもっと増えたら、別のブログを立ち上げよう・・と、云う気でいます ですので項目はせいぜい5つあたりまでが限度・・ここいらを割りきってやっています
◎ ・・今回は見本があるので、自分のページのやり方で文を書き換えていってます ここいらは勝手ながらご了解下さい・・トップ ブログ関連 の次に、前回やった階層構造の 音楽に有難う を持って行きたいので 階層構造の部分をコピーし、上に貼り付けよう・・と、思います
◎ いちいち図でわずらわしいかも？ですが、トロいながらに確実なのを狙ってます 街の中なら何とか訂正も出来ますが、現在は山の中の茂みの中に居る様な状況で 一歩間違えれば遭難・・こんな状態だからです で、コピペで貼り付けをしました
◎ 前回のカテゴリー（項目）の様に 音楽に有難う と、 ロック の状態にしました 一応、グラフィックも書き替えてみています 上の方でやりましたが、ここには2種類の文法がありました 1階層のモノとサブのカテゴリーの有る、2階層のモノです
ここで項目の字も入れ替えたので、あとは a href="#" と、記述された # の部分を書き換えればOKになってきます あと、目障りならば四角枠の中の ロック の下の 子カテゴリーの行は削除してもイイかもしれません
ここがかなりツライ？ URLの対処 !!
◎ さぁ、今回で一番面倒な操作をやる時になりました !! ここをやり出すと、一気に文が増えるので混乱しますが 一緒にぜひ発狂して下さい？ この トップ の # から、やってみます
◎ どれをやればいいのか・・？ これが自分のトップのページですよね !! 最新のレポートが書かれたブログです で、①の部分をマウス・ドラッグしてコピーをしてます
◎ これを トップ # の部分にあった # を削除してから、貼り付けを終えました １階層の場合はこれにて一見落着 !! 次は難関の2階層の行ですが、まず矢印の上の行の # を考えて行きます
◎ 自分のブログの管理画面・・前回で散々見て来ましたが ここの カテゴリー をクリックして 音楽に有難う のページを出してみてます で、これをクリックしました
◎ 出て来た、ページの、ここの上のURLの部分をドラッグで又コピー
◎ テキスト画面に戻り、 # の場所に貼り付けました あとは ロック の項目をやってしまえば一応、終了でいいと思います
◎ 次に続いてまた管理画面の カテゴリー で この項目部分をクリック
◎ ここのページが出たらまた、URLをドラッグでコピー
◎ ロック の # 場所にペーストすれば、これで完了です 今回は両方をやりましたが、改行をうまく使い リーフ・パッド も3つ立ち上げてのやり方でやってます 1画面じゃかなり厳しいので、応用なんかも上手く用いて乗り切りました HTML の部分・・解っていただけましたでしょうか？ ここはこれで一応の終了・・
HTMLを乗り切れば、後は貼り付けをして行くだけ・・
◎ HTMLが何とか出来たので、これを自分のブログの管理画面に貼り付けをしないとなりません ここいらも簡単に図を追ってもらえますか・・すみません
◎ このヘッダの、 タイトル下 の所をクリックすると、ウィンドウが開くのでそこに貼りつけてます
次はスクリプトを !!
◎ 前回のレポートからの長い道のりでしたが、ここをやってしまえばすべてが終了・・ここの部分はテーマの作者さんも述べていますが、HTMLを貼り付けたアトにやる操作らしきなのです ここいらを念頭にやってみてます
◎ ・・で、スクリプトを貼り付ける場所を、また図で確認してみて下さい・・
◎ 小さな星がほら、ひとつ の場所で スクリプトを3行入れておきましたが、改行をして、このスクリプトを前の方に持っていってます
◎ ここの最後の部分がいくらか、目に入りにくい・・コピペの場所から離れてしまっているからで、人間心理の盲点的部分・・・これを押した次の画像も目に入りにくいから、次の画像もチェックしてみて下さい
◎ ここの部分でラストの確認をしてます・・ しかし、慣れた人も居れば、パソコンを始めたばかりの人だって居ます !! これで確認して、パソコンの電源を切ったあとに もう一度見たら、出来ていない時の画面が出て来たりしてしまう事が 実際、有ったりするんですよね
前回の（その①）の出だしのあたりで、ブラウザーの履歴を消去の事を書いてるけど こう云う部分迄を考慮しとかないと、設定したのに出来ていないと勘違いして 出来ているのを知らずに、また設定をやる・・なんて事になって来たりします !! ブラウザーの履歴の消去は、3日に1度あたりは考えた方がイイと思ってます
レスポンシブの対応も忘れずに・・
このInnocentの作者さんが訴えたい部分を、なるべく載せて行きたい・・ !! これを載せるのを忘れていたので、追記の状態で載せておこうと思います
CSSの文法には順序が有る・・？
◎ コピペでやったけど、表示が変わらない？ なんてコトが有って、諦めてやめたりしてたけど、色々やっている内に このCSSがうまく表示されないのは順番が有ったりするのかな？ なんて考えだしてきたのです 特に、 見出し が、下手にコピペで別の要素のモノを足すと 元のモノに戻ってしまう時が有ったからでした 見出しの部分ではリセット・・の文法等も必要になるかも知れません？
このカスタマイズとやらで、さんざん悩まされたのは 思い出せば、全てがこのCSSの部分になっている様です カスタマイズのラストとして、自分は 上に戻るボタン が欲しかったのですが ネットの記事どおりに、貼り付けても左の端に寄ってしまって 記事の表示とは違うものになってしまい、悶々として居ました
◎ ・・が 一番後ろにコピペしておいたのを、最初の方にもって行き直したら バッチリ !! さすがにこの時には涙出ましたね〜 あとInnocentのここの場所の一番下の方のコメントの欄で、作者さんが質問に答えて色々カキコをしていますが、ここいらが、かなり有り難いモノが有ったりしています
そう云うのを自分も、CSSの参考にさせて貰い 上に戻るボタンの時もやはり、一番先頭の次あたり部分に持っていきました ここのページにてぜひ、作者さんの答えの部分等を、色々と参考として確認してみて欲しいと思います
◎ ナビゲーション・メニューの縦の幅を変えるのも、どうしても解らなかったので 自分も質問させてもらい、これで何とかクリアー出来ました 自分のメニューはモス・グリーンのカラーにベージュの色の字にして、14.5ポイントでやってみています グローバル・メニューの部分では、必須の方面でした
こうして色々とお世話になったので、イノセントの紹介ブログページを何とかやってみるコトにしたのですが・・ （その①） は、ぬわんと？ 4日あたりもかかってしまったのです？ とにかく、 パンくず・リスト の説明が難しかったし、それに付随して画像もてんこ盛り状態・・ しかし今回の（その②） とあわせて、何とか作者さんへの恩返しが いくらかでも出来ればなのです ・・・!!
