こんにちは、いつもご訪問下さいましてありがとうございます。
今日の記事内容はタイトルに書いた通りで、最近体験したデザインＣＳＳの追記後に起きた素人には想定外のトラブル発生と復旧までに要した労力から、『カスタマイズは自己責任で行うべし』と反省を込めてキーボードをたたいています。
最近、自分のブログを少しでも見やすくしようとあれこれブログのカスタマイズをやろうとしていました。
通常操作で行うことの出来るデザイン→カスタマイズの操作なら何の問題もありませんが、自分の好きなデザインテーマを使って思う様にカスタマイズする場合は必要なＣＳＳを貼り付ける作業をすることになります。
そうなると参考にさせて頂いた記事を頼りの作業になります。
私が参考にさせて頂いた記事にも詳しい操作方法が書かれていまいたので作業自体は簡単に出来、目的であったヘッダー画像の余白を無くすことも出来ました。
簡単操作で出来るカスタマイズ！？
本当は凄く難しいことをやろうとしていました。
何故難しい内容かと言うと、ＣＳＳ自体何も解っていない私のような素人がうっかり書き換えると元戻し出来なくなる恐れもあるからです。
下に貼り付けた画像は自分のブログをGooglechromeで開き、任意の場所でマウスを右クリック後、一番下の検証をクリックすると現れるものです。
ちょっと画像がぼやけていますが、右側に書かれている文字列や記号が、ブログ全体のデザインを構成しているＨＴＭＬやＣＳＳ等の記述内容になります。
カーソルを移動させると、タイトルや記事等に使われている部分がどの様に記述されているかを知ることが出来ます。
毎日書いているブログ記事や、その土台になっているデザインテーマは全てこのようなＨＴＭＬやＣＳＳで構成されており、専門的な知識を持った技術者が作成されたものです。
一行毎に書かれている意味や部分的に変更することによって生じるデザインの変化等が理解出来ていないと、想定外の事が起きてもおかしくありません。
例えば書いてある言葉の意味が判らない文面に文字を入れてその後に発生したトラブルの対応をするようなものです。
実はＣＳＳの勉強しようと思って一冊本を買ってみたんですが、難しくて読み進めることも出来ずに棚に飾ったままになっています。
それでも、自分のブログ記事のＨＴＭＬやＣＳＳがどのように記述されているかを見る事とデザインを変更する場合の基本ステップだけは何となく理解は出来たつもりです。
HTMLとCSSは密接な関わりをもっているようなので、 変更したい部分を触っただけでもブラウザの種類によっては別の部分が表示されなくなる可能性は充分にあると言うことです。
忘れないように、備忘録として書いて置こうと思います。
➀デザインの元になるテーマに変更する
➁どのようなＨＴＭＬ・ＣＳＳで書かれているかをGooglechromeで確認する
➂はてなブログのデザインＣＳＳで変更
この部分をしっかり勉強し直して再チャレンジしてみようかと思っています。
もうひとつ、今回もサブブログでテストしていましたが、注意しなけらばいけないのが変更した部分だけではなく、その他の部分にも影響が出ていないかをすべて見極めていく必要があると思いました。
例えば、インターネットエクスプローラーでは表示しなくてもMicrosoft EdgeやGooglechromeなら表示するとか、編集機能や表示自体にも当然影響が出る可能性があるということです。
カスタマイズはあくまで自己責任で行うことになりますので慎重の上にも慎重に確認する必要があると思いました。
