Top Page > FC2ブログ > FC2ブログ【basic_white】(1)テンプレート「basic_white」の点線(囲み…

FC2ブログ【basic_white】(1)テンプレート「basic_white」の点線(囲み線)を消す

【2014/02/19 追記】

FC2ブログのデザインを決める時に、最初はテンプレート「grey_2column」を使っていましたが、公式テンプレートのデザインをいくつか見ているうちに、テンプレート「basic_white」がやけにカッコよく見えてきたので、こちらに変更することにしました。



元々FC2のブログはメインサイトの要素として存在させようと思っていたはずなのに、メインの更新は途絶えたまま(笑)ブログテンプレートの改造に時間を使い、なんだか恐ろしいことになってしまいました。
他にやらなければならないことがたくさんあるのに(もう1つ別のブログをやっているのでその更新とか、それこそメインサイトの更新とか)、1つのことに集中しちゃうとどうしても他のことを後回しにしてしまうこの性格‥‥(´;ω;`)



ということで、ちょこちょこと変更した点を思いついたままに書いてみようと思います。
まずは全体像の変化をわかりやすくするために、画像を掲載します。



編集前の「basic_white」
テンプレート「basic_white」


元々のテンプレートはコレですね。
ホワイトが基本色なので明るい感じだし、シンプルな構成だと思います。



編集後の「basic_white」
編集後のテンプレート「basic_white」


シンプルで明るい「basic_white」が、真っ黒になってしまいました(笑)
パッと見、「背景色が黒色に変わっただけじゃねーか!!」と思われるでしょうが、これがそう簡単な話ではないのです。
背景色を変えるだけでも実はメンドクサイんですよこのテンプレート!!



公式は背景色が白で、だからこそ「border」の点線がパーツの周りに入れて区切ってあって、この点線があるからパーツの位置とか大きさがわかりやすいんですよね。
でも私は背景を黒にしたかったので、そうするとこの「border(囲み線)」がものすごく邪魔!
コレをいちいち探し出して消すのがメンドクサイんです!!





テンプレート「basic_white」の点線(囲み線)を消す方法


テンプレート「basic_white」の点線を消す方法、というか「やり方」を書いておきます。
もしも私のように「basic_white」の構成だけが欲しくて、背景色を変更したりパーツを点線で囲まないような場合は、理屈は簡単ですが作業がメンドクサイので頑張ってください!



編集するのはCSSです。HTMLではありません。


<編集方法>
1. CSS編集画面で「Ctrlキー」+「Fキー」を同時に押して検索画面を出す
 (検索画面を出すには常にこの方法を使います)


2. 検索画面で「border」という単語を検索する(44個かな?出てきます)


3. CSSの中で「border-top: 1px dotted #B5B5B6;」などの記載部分を見つけ出す
  <この部分の意味>
   border:線
   -top:上、つまり「上の線」です(「-bottom」だと下、つまり「下の線」)
   1px:線の太さは1ピクセル
   dotted:線の種類(この場合は点線。ここが「solid」ならば実線)
   #B5B5B6:色の種類(カラーコード)


4. 不必要だと思う線を非表示にする
  (消したいのは点線なのだから「dotted」表記がある「border」は非表示の候補に入れる)


5. 線を非表示にする方法
   線を示す部分を「/*」と「*/」で囲むと非表示になります
   例:/*border-top: 1px dotted #B5B5B6;*/
   これで消えます


6. つまり何をするのか?
   「border」の「dotted」を探し出して全部非表示にしてしまう、ということ


●上記のやり方をすれば点線を消すことができます。
ただし、私自身がすべての「border」で確認したわけではありませんので44個全部を非表示にすればいいというものではないと思います。消したいのは点線つまり「dotted」ですので、これも検索した上で非表示の対象にすればいいです。
探し出した部分を1つずつ「/*」「*/」で囲み、プレビューでいちいち確認してみてください。
意図した場所が消えていないのであれば、それは必要な線なのでしょうから「/*」「*/」を付けないでください。


●もしかしたら「#B5B5B6」で検索してみたらもっと早く非表示にしたい対象の線を見つけ出せるかもしれません。「#B5B5B6」が点線(囲み線)の文字色コードのようですからね。


●「テンプレートの設定」画面でプレビューボタンをクリックして見ることができるのはあくまでもトップ画面ですので、記事本文のページなどは「更新」しないと確認ができません。
点線を非表示に設定してプレビューしても変わっていないように見えるかもしれませんので、その場合は一度編集を保存(更新)して、改めて自分のブログを確認して、またCSS編集画面でいじる、ということを繰り返すことになります。

意図したページをダイレクトにプレビューする方法もありますが、その方法はご自分で探してみてください。(だって文章書くの、メンドクサイんだもんw)


※プレビュー方法について、記事を追加しました。【2014/02/19】

FC2ブログの「プレビュー画面」を利用してテンプレートを確認する
前回の記事で触れていた「プレビュー画面」の利用方法について説明したいと思います。前回の記事では、テンプレート「basic_white」の「プレビュー画面」を利用して、ヘッダー下の「タブ」(リンク設定しているボタン的なヤツ)‥‥



デフォルトのテンプレートから変更した部分


「basic_white」の点線が邪魔なので消し去ってやりましたが、その他にもデフォルトの「basic_white」から変更した部分がいくつかあります。


例えば、横幅のサイズです。
編集後の「basic_white」の画像を見ていただくとわかると思いますが、横幅を狭くしました。


あとは、右上に設置されていた「リスト表示」か「グリッド表示」かを選択できるボタンも邪魔!!だったので消し去ってやりました!
テンプレート「basic_white」は、右上に設置されているスイッチボタンを使って閲覧者が自由にトップページの見え方(リスト表示かグリッド表示か)を選択できるというのがウリなのでしょうが、私はコレを邪魔だと思ってしまったんですよね。

だって、リスト表示とグリッド表示で記事の高さを変えてしまうと構成が崩壊していくから!
(思いっ切り作ってる側の意見じゃねーか!w)


グリッド表示のトップ記事の高さを変えて、他の記事はリスト表示の高さにして‥‥そんでもって「続きを読む」のボタンの位置を色々いじって‥‥とかやっていると自分でも混乱してきちゃって、「もうめんどくさいから全部リスト表示にしたれ!!」と思ってしまいました。



ま、どちらにしてもこのスイッチボタンは、トップページから外れると(個別記事ページなどに移動すると)スイッチボタン自体が消えるという仕様になっていましたので、私にとっては無意味な機能でした。(ってオイ!!w)



テンプレート編集の際に参考にしたサイト様の紹介


私は今回初めてFC2ブログさんを使わせてもらいましたが、独自タグを理解するのが難しかったです。
今でも構造をイマイチ理解していないのですが、この「basic_white」というテンプレートを編集する時に参考にさせていただいたサイト様がありますので、ちょっと勝手にご紹介しておこうと思います。(勝手に紹介していいのかわかんないけど、紹介しますw)



サイト名は『素材圏』様です。
「basic_white」「FC2ブログ」などの単語で検索をかけるとすぐに出てくると思います。
リンクは貼りませんので気になる方は検索してみてください。
とてもわかりやすく説明してくださっています。
是非ご参考に!!



ちなみに上記の「トップページをリスト表示にしてしまう方法」つまり「スイッチボタンを非表示にする方法」は『素材圏』様に詳しく書いてありますので、気になる方は検索してみてください。




あ、どうでもいいですが、私はこのブログはテキトーに書いていくことを信条としておりますので、トラックバックとかしません。
ていうか、トラックバック機能って何?(´・ω・`)
何のためにあるの?
イマイチ理解できないので、やらない!!(笑)
というか、他者様と関わるのは恥ずかしいのですよ、なんかねw


コメント機能は利用するけども、他のことはやらない。
アフィリエイトとかもできるみたいだけど、知らない。
プラグインもたくさんあるみたいだけど、テキトーにしか使わない。
RSSって何ですか?(´・ω・`)
知らない!!
知らないものは使わない。



ということで、このブログでいったい私は何をしたいのかわからない仕様になってますが、結局私はダラダラと記事を書いていきたいだけなので、いいんです。


で、こうやって参考にさせていただいたからと勝手にサイト名を出していいのかどうか迷いますので、どうしましょうか?
もちろん参考にさせていただいたからと言って相手様のサイトに行ってコメントをするなんてこともしません。(オイ!)
でもこういう人って他にもいるんじゃないですか?
勝手に使わせてもらって、そのままの人っているんじゃないですか?

と、私だけじゃないはずだ!!という言葉を免罪符に振りかざして、逃げたいと思います。



『素材圏』様、本当に申し訳ありません。
でもものすごく丁寧に説明されておられて、わかりやすかったです。
ありがとうございました。



(ここで勝手にお礼を言っている意味!!)
(ちゃんとご本人様に言えよ!!www)




次の記事の紹介

次の記事では、FC2ブログのテンプレート「basic_white」に、「記事一覧」のようなタブを追加する方法について書いています。


FC2ブログ【basic_white】(2)「記事一覧」のようなタブを増やす
FC2ブログのテンプレート「basic_white」を色々といじっています。メインサイトのことは忘れてしまったかのようにFC2ブログのテンプレート編集のことばかり記事にしていいますが、まぁ、今はコレが私の中でのブーム‥‥



posted by mameemon | Comment ( 0 ) | Category ( FC2ブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。