Luminous Tale.

過去よりも未来よりも「現在」を幸せに生きるために。今ここにある日常を輝かせるための“魔法”をお届け。旧「月光の狭間」。

*

ブログ移転作業真っ只中! ~「要素を検証」が何気に超便利~

      2015/02/22

この記事の所要時間: 611


Pixabayより)

ブログ移転の準備を着々と進めております怜香@Ray_mnzkです。
とはいえ、なかなか思うようにいかず難儀しているのが現状です……何せ私、CSSの類は何一つ勉強しておりません。ひたすら都度都度Google先生にお伺いを立てながら作業を進めておる次第……。
それでもやっていくうちに少しずつ仕組み(?)を覚えてきたようで、とりあえず背景色と文字色指定の書き方ぐらいはわかるようになりました。何事も慣れというべきか。

そんなわけで今日はブログ移転についてのお話をしますが、その前にこのブログをお読み下さっている皆さんに大事なお知らせ。

このブログ「泡沫の残滓」ですが、ブログ移転に伴い、ブログ名を変更致します
新しいタイトルは、

月光の狭間

です!
ブログの雰囲気もがらりと変えます。今は淡い色調ですが、ほぼ黒背景に近くなります
アドレスだけは今のものを引き継ぐので、「アクセスしてみたら全然違うブログが表示された!」と驚かれるかと思います……が、アドレスが正しければ、それは私のブログです。ご安心くださいませ。

それでは本題に入りましょう。新しいブログのデザインも少しお見せしますね。

 

目次

 ・新ブログ、デザインはこんな感じ!
 ・調べて分かった記述をどこに書き込めばいいのか?
 ・CSS初心者の強い味方「要素を検証」
 ・スマホでの表示も確認できる!
 ・CSS初心者でもブログデザインを思いのままに!
 ・今日のあとがき
 

新ブログ、デザインはこんな感じ!

こちらが新しいブログのスクショです。デザインだけはほぼ決まり(見出しのデザインだけはまだ出来てないけど)。サイドバーや上部メニューの中身などはこれから作るところです。
ちなみに、元のテーマは「Attitude」というものです。元々は真っ白でした。

見ての通り、今のデザインとはまるっきり違います。というか、色遣いが全然違います。
今は水色基調ですが、新ブログでは紺色基調になります。私がこの色を大好きなことが原因ですw
画像はすべてDream Fantasy様からお借り致しました。私が愛してやまない幻想的な画像の数々……。これを活かしたいがためにこの色遣いにしたと言っても過言ではありません。この場を借りて御礼申し上げます。

ちなみにちょこちょこ細かい細工をしてあります。主に画像周り。アイキャッチ画像には様々なものがあり、総じてカラフルなので、ブログの雰囲気に少しでも馴染むようにと思っていじってあります。
それにしても、どんなことも調べたら出てくるのですね。勉強になる!

調べて分かった記述をどこに書き込めばいいのか?

さて、前述したとおりCSS初心者の私。ようやく背景色や文字色変更の記述は把握したものの、まだまだ分かっていないことだらけです。

そんな私の目下の悩み。
それは、色変更等の記述を、いったいどこに書き込めばいいのかわからないことです。

お目当ての部分の色やサイズを変えるための記述はググれば判明します。しかし、それをどこに挿入すればいいのかは、自分の使っているスタイルシートを見て割り出すしかありません。
とはいえ、そのスタイルシートの記述を見たところで、どれがどの部分に対応しているのかわかったものではない。「widget」って書いてあるところはウィジェット周りのデザインに関わることである、というようなことがかろうじて分かる程度……。

ですが、そんな私でも、お目当ての部分についてのスタイルシートの記載場所が分かる手段があったのです!

CSS初心者の強い味方「要素を検証」

それが、Google ChromeにてF12キーを押すと使える「要素を検証」という機能。
下の画像で示した部分です。

何やらごちゃごちゃっといろんなことが書いてありますが、肝心のスタイルシートの部分真ん中左にある部分となります。下記参照。

で、これを用いてどうやってお目当ての位置のCSSを調べるのかというと……
「要素の検証」欄の左上にある小さな虫眼鏡マークを使います!

ここをクリックしてから、左側のページのお目当ての部分をクリックします。
すると、その部分のCSSが真ん中左の部分に表示されるのです!

上の画像では、水色の四角で囲われた部分はすべて同じ位置を示しています。 実際のページにおける「アーカイブ」の部分のHTMLが上段に、CSSが真ん中左に表示されていますね。

ここで青○で囲んだ部分のチェックボックスをオフにすると、該当部分の要素が反映されていない状態を表示させることが出来ます。上の画像の場合だと、チェックをオフにすれば「アーカイブ」の文字色が深緑色ではなくなります。
これを利用することで、自分が変更したい部分がどこなのかを明確に知ることが出来ます。

お目当ての部分、そしてその部分で変更したいところがはっきりしたら、あとはそこを丸々コピーして「カスタムCSS」欄に貼り付け、変更したい部分の記述を変えるだけです!
CSSについてよく知らない状態でも、どこを変更すれば望み通りの状態になるのか分かりやすいので、初心者でもデザイン変更が楽しめますね。

スマホでの表示も確認できる!

この「要素の検証」、さらにすごい機能がついています。

先ほどピンク四角で囲んだ虫眼鏡マークの隣のボタン
そこをクリックすると、スマホでの表示状態に切り替わるのです!

「文字サイズとかいじってみたけど、スマホで見た時レイアウト崩れていたりしないかな?」と思った時、わざわざ自分のスマホでブログ表示させなくても、これだけで確認可能なのです。
これを知った時は驚きました。気になったその場でスマホ表示も確認できるって本当便利!

CSS初心者でもブログデザインを思いのままに!

そんなわけで、「CSS?なにそれ美味しいの?」となるほどCSSの知識皆無だった私でも、前述したようなデザインのブログに仕立てることが出来ました。実はまだうまくいかないところがいくつかあるんだけど、そこは「要素を検証」を駆使して何とか対処してみせます!

それにしても、「要素を検証」って今まで一度も触ってみたことなかったのですが、こんなに便利なものだったとは……。初めて見た時は「なんだこの文字の羅列!」ってなったのですが、意味が分かってくるとその便利さがよく分かりました。
とっつきにくい見た目しているけれど、CSSいじってみたいなら使う価値ありです!

今日のあとがき

正直CSSをろくに知らない私にブログのデザインなんてできっこないと思っていたのですが、案外いい感じに進めることができています!これは嬉しい驚き。
そして、この機にCSS勉強してみようかな……という気持ちになってきました。こうやってブログをやっていく以上時々デザイン変更する機会はあるでしょうし、そういう時に役に立つはず。いつかホームページを作る機会に見舞われた時にもね。

新ブログの完成はもうしばらく先になりそうです。平日はなかなかいじる時間が取れないし。土日に時間を確保できる今月中、遅くとも来月上旬までには終わらせたい。だって花組始まったら確実に土日潰れるww
(しかしもうちょいデザインシンプルでもいい気がしなくもない……ww)

 - ブログ

Sponsored Link
Sponsored Link

  関連記事

WordPressテーマ「Stinger5」で「続きを読む」の位置にアドセンス広告を入れる方法
この記事の所要時間: 78

Wordpressテーマ「Stinger5」使用時に「続きを読む」の位置にアドセンスを配置しようとすると、デフォルト設定のままでは1ページにアドセンスが4つ表示されることになり規約違反になってしまう。これを回避して、問題なく「続きを読む」の位置にアドセンスを配置しようというお話。

久々にブログにリファラースパムが来ていたので対策してみた
この記事の所要時間: 944

Googleアナリティクスを確認していると、ページタイトル別PV数一覧の中に見慣れぬページタイトルが……。もしやこれはスパムか!?ということで調べて対策を取ってみた。そんなお話。

モブロガー必携エディタアプリ「SLPRO X」アップデートで画像まわりと投稿設定がさらに使いやすくなったよ!
この記事の所要時間: 630

7月26日、言わずと知れたモブロガー必携エディタアプリ「SLPRO X」がバージョン1.1.2にアップデートした。今回もまたひとつ使いやすさが向上し、ますます理想的なブログエディタになっている。今回はそのアップデート内容についてご紹介する。

普段のネットサーフィンからブログ記事を生み出せる。ブロガー御用達ブラウザ「するぷろーら」アップデートで検索・共有機能が超強化!
この記事の所要時間: 832

6月20日、ブロガー御用達ブラウザ「するぷろーら」がバージョン5.0にメジャーアップデートした。検索・共有機能が大幅に強化され、さらに「ネット上からネタを拾ってブログ記事にする」力が増したと感じたので、早速ご紹介する。

ブログテーマ変えてみました!
この記事の所要時間: 821

先日偶然出会ったWordpressテーマ「Stinger5」に一目惚れしたのをきっかけに、ブログテーマの変更を行った。その際に行ったカスタマイズや、苦労した点などのお話。

今年も一年ありがとうございました!
この記事の所要時間: 445

2016年も大晦日。まもなく到来する2017年を前に、ブログにまつわる今年の振り返りと、来年に向けた抱負を語ってみようと思う。

ブログを独自ドメインにしてみました
この記事の所要時間: 612

この記事の所要時間: 約 6分12秒 (Pixabayより) 昨日の記事通りに早めの時間に親指シフト練習してたら見事に寝落ちた怜香@Ray_mnzkです。 どういうわけか親指シフトの練習していると途端 …

ブログをカスタマイズしてみました
この記事の所要時間: 63

この記事の所要時間: 約 6分3秒 photo credit: Jorge Quinteros via photopin cc ブログを始めて1か月半少々経ちました。 最初は「頭に思い浮かんだことを言 …

「Workflowy」と「するぷろX」で記事を書こう!ブックマークレットによるシームレスな連携で記事執筆が捗る!
この記事の所要時間: 1816

Workflowyで記事の構成を決めて、するぷろXで書く。モブログのひとつの形であるが、ふたつのアプリ間を行き来することなく、スムーズに連携することができれば、もっとモブログは捗るのではないだろうか?そんな思いを叶えるブックマークレットに出会うことができたので、ご紹介しつつ語ってみる。

もっと手に馴染むブログエディタを求めて。新しいブログエディタ探しの顛末をまるっと語ってみる
この記事の所要時間: 2224

とあるきっかけから、記事執筆に使うブログエディタをするぷろXから変更することになった。どのブログエディタに行き着いたのか、その過程と紆余曲折を詳細に語っていこうと思う。ブログエディタ探しの一助になることを願って。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA