人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

ブログスキンのアレンジの第1歩

2016年 10月 30日
エキサイトは公式ブログスキンを豊富に用意していますが、自分で少しアレンジしてしたい人は多いと思います。 エキサイトはスキンのアレンジに関しては寛容です。 システムは強固ですから、ユーザーが間違って変なスキンコードを書き込んでも、それまで投稿したブログデータ自体は安全です。 もしアレンジに失敗してデザインが崩れても、公式スキンに戻せば元通りになります。

しかし、ブログ公式スキンは「書き換え不可」なので、アレンジの最初で判り難い部分があります。 アレンジするには、公式スキンをマイスキンに一旦登録してから、それをスキンに設定する遠回りが必要です。

ここの説明は、最も判り易い手順書をめざしました。 初めて自分の使っている公式スキンをアレンジする場合の手順で、そのスキンに関してアレンジが反映された後は必要ありません。

また、以下は(1)~(3)の3節で説明をしていますが、アレンジするコード内容が判っている場合は、(2)節を飛ばして目的を達することが出来るでしょう。



(1)公式スキンをアレンジ可能にする最初の操作 

●ブログの設定画面で「デザインスキン」を押し、下図の様に「PCデザインスキン」を表示します。 あなたの「現在使用中のスキン」が示され、下方の「スキン選択」のカテゴリは「すべて」になっているはずです。 この画面で①の「編集」を押します。

ブログスキンのアレンジの第1歩_a0349576_15283956.png

●下の様に「PCデザインスキン編集」が表示されます。 この画面で➁の「作成する」を押します。

ブログスキンのアレンジの第1歩_a0349576_15341465.png

●これで、現在使用中のスキンのコピーがマイスキンに作成されます。 画面は下の様に最初に戻りますが、下方のカテゴリが「マイスキン」に切り替わっている事に注意してください。

カテゴリの「マイスキン」は、これまでに使用したり作成したスキンの保存場所で、自分で削除しなければ履歴が自動的に残ります。 先ほど「作成」したコピーは④です。 一方、「現在使用中のスキン」は未だ最初のままで、その日付➂は元の公式スキンが製作された日付です。

ブログスキンのアレンジの第1歩_a0349576_15354075.png

●この画面で、「マイスキン」④の赤枠内の「適用」を押します。 これが一番肝心な操作で、これをしないとアレンジが反映しません。

ブログスキンのアレンジの第1歩_a0349576_15461403.png

スキンの変更に「OK」を押すと、下図の様に「現在使用中のスキン」の日付➄が現在に変わります

ブログスキンのアレンジの第1歩_a0349576_15472841.png

「マイスキン」のコピー④(書換え可能なスキン)が適応されたわけです。

「スキン名」「スキンイメージ」などは、公式スキンとマイスキンにコピーしたものは同じになり変えられません。 現在使用中のスキンがどちらなのかは、実際のコードと日付➄が見分ける方法になります。(最後の補足を参照ください)

以上がスキンアレンジの第一歩の操作です。 この後はスキンの編集がブログ画面に反映する様になります。



(2)アレンジしたい要素について調べる 

簡単な例として、ブログタイトルの文字を大きくする手順を説明します。

ブログスキンのアレンジの第1歩_a0349576_15542715.png

アレンジするに先だち、このタイトル文字がスキン中のどういうコードで修飾指定されているかを、知る必要があります。

●ブラウザ上でこのタイトル文字を右クリックして、IE11ならば「要素の検査」、Chromeなら「検証」を押します。(以下は、IE11での操作の例です)

ブログスキンのアレンジの第1歩_a0349576_16434909.png

下図の様なウインドウが開きます。 少し慣れや知識が必要ですが、難しく考えずに見学して下さい。

ブログスキンのアレンジの第1歩_a0349576_16463840.png

タイトル文字から「要素の検査」を始めたので、上の左枠は「At Studio TA」を含んだ行が反転しています。 左枠はブラウザが表示しているHtml、右枠はそれを修飾するCSS(スキン)の内容が示されます。 右枠でこのタイトル文字の修飾内容を見渡したところ、文字サイズに関する指定は見当たりません。

●修飾が見当たらなければ、その親の要素で指定されている場合が多く、そこに指定がなければ更にその親要素と、調査範囲を拡げると必ず見つかります。 この例では、直の親要素<h1>をクリックすると、下図の様にすぐに見つかりました。

ブログスキンのアレンジの第1歩_a0349576_17032726.png

右枠の「font-size: 24px;」が、このタイトル文字のフォントサイズ指定です。 右枠の情報から、この指定はCSSの中で「#blog-head h1」というセレクタの項目で書き込まれている事が判ります。

●「要素の検査」の機能は大変に有効で、実際のブラウザ表示を確認しながら、アレンジをテストする事が出来ます。 このウインドウからの操作は、ネットの先の実データ(ブログの投稿データやブログスキン)を書き換えるものではなく、「要素の検査」を開いた時点のブラウザの持つデータを操作します。 書き換えや失敗等で、元データが損傷する事はありません。

ここでは、下図の様に「font-size: 24px;」の「24px」をクリックして、値を書き換えています。

ブログスキンのアレンジの第1歩_a0349576_17123372.png

数値は直接書き込みや「↑」「↓」キーで操作可能です。 この書き換えに従ってブラウザ表示が変わり、タイトル文字が大きくなる事が確認出来ます。

「要素の検査」は一時的なテストで、これで得た情報を元に、実際のHtmlやCSSを書き換えてアレンジを実現します。 ここからが、実際のアレンジです。


(3)実際にブログスキンを編集する 

●先の「PCデザインスキン」で「編集」⑥を押して、「PCデザインスキン編集」に入ります。「編集可能なマイスキン」を扱うので、ここからは編集結果が毎回ブログの表示に反映します。

「PCデザインスキン編集」の下方のコード編集枠に注目します。 この画面を開いた最初は「全体」が選択されていますが、下図はスキンのCSSを編集するために➆の「CSS」を選択して押そうとしている所です。

ブログスキンのアレンジの第1歩_a0349576_16354712.png

●CSSのコード編集枠が表示されたら、編集枠にカーソルを入れ、スクロールしてコードを見て行きます。
探すのは、先に調べた「#blog-head h1」というセレクタの項目です。 それが何処に書かれているかは、スキンによって様々です。 このスキンの場合は、ずいぶん下の行でしたが「要素の検査」の右枠の通りの項目内容が見つかりました。

ブログスキンのアレンジの第1歩_a0349576_17455609.png

文字サイズの指定箇所⑧を見つけ、この24pxを48pxに書き換えました。「更新する」➈を押すと「編集したマイスキン」が上書きで登録されます。

これで更新内容がブログの表示に反映します。 下図の「プレビュー」ボタン➉を押すと、すぐに更新が適当か確認出来ます。

ブログスキンのアレンジの第1歩_a0349576_17511549.png

下の様にタイトルが倍の大きさにアレンジされました。

ブログスキンのアレンジの第1歩_a0349576_17543081.png



以上、ブログスキンのCSSを書換えて、表示をアレンジする手順を簡単に説明しました。

アレンジする箇所を調べる方法は、IEでは「要素の検査」(DOM Explorer)、Chromeでは「検証」(Developer Tools)を利用します。 これらを利用しながら、一方でCSSやHTMLの書式の意味をネットで調べて、少しずつ簡単なアレンジを試して行けば、かならず門は開かれます。

DOMの使い方は、以下の所で説明していますので参考にしてください。





〔補足〕
手間を惜しまない方は、公式スキンの移植コピーをする事で「スキン名」や「スキンイメージ」を好みのものに変える事が出来ます。 これは、公式スキンとマイスキンの混乱を避ける目的です。

●「マイスキンを作成」でスキン作成を開始し、これに公式スキンのコードや基本設定を移植して、その過程で独自の「スキン名」や「スキンイメージ」を設定します。



by Ataron | 2016-10-30 15:25 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。