R-style

Sharing is Power! / Create your own way.

Menu
  • ホーム
  • About
  • メルマガ
  • 著作リスト
  • Evernoteの使い方
  • Scrapboxの使い方
  • Tools
  • お問い合わせ
Menu

CSSの知識が無いまま、WordPressを始めて右往左往している人への「デザインの一歩目」

Posted on 2010 年 6 月 16 日2019 年 6 月 23 日 by Rashita

なにやら今更感タップリな話ですが、「セルフブランディング」を意識してブログを始めた、という方がおられるかも知れないのでちょっと書いておきます。基本的な知識をお持ちの方には何の意味もないエントリーなので、「Go to next feed」しちゃってください。

また、本格的にごりごり作り込みたいレベルに達することもできません。細かい知識は専門的なサイトでフォローしてみてください。今回の記事は「最低限のデザイン変更はどうやったらできるのか」という内容です。

編集はどこで?

基本的には、Wordpress(以下WP)の管理者ページから変更することが可能です。日本語であれば、

「サイドバー」→「外観」→「編集」

で、デザインの編集を行うことができます。

テーマを選ぼう

「いちから細かく作り込もう」と勢い立つのは良いのですが、かなり面倒なのであまりオススメしません。

もともと提供されているテーマが数多くありますので、その中から自分好みのものを探すのが一番楽です。またオリジナルなテーマを提供しているウェブサイトもありますので、その辺をうろちょろしてみてもよいでしょう。

テーマを探すには、

「サイドバー」→「外観」→「新しいテーマの追加」

からさまざまな条件で検索することができます。条件のすべてが理解できなくても、以下のポイントだけは押さえておいたほうが良いと思います。

・「色」
・「列」
・「幅」

この3つは、あとで「ちょっとだけ変える」ということが難しいので、この3つの要素を軸にして好みのテーマを探しましょう。

普通のブログスタイルならば、3列か左右どちらかのサイドバーが良いかなと思います。

ブログパーツやガジェット類を大量に追加予定ならば3列タイプを、そんなに「マッチョ」には詰め込まないというならば、2列、右サイドバー、左サイドバー、あたりで十分でしょう。

テーマの中身ファイル

もしかしたら、選択したテーマでデザインは十分満足、という方もおられるかも知れません。そういう方はここで終了です。思う存分ブログライフをお楽しみ下さい。ただ、ちょっとフォントのサイズが・・・とか記事タイトルの色を変えたい、という方は手を加える必要があります。

先ほど提示した

「サイドバー」→「外観」→「編集」

の画面を確認しましょう。

テーマファイルの中に「テンプレート」と「スタイル」の二つの項目があると思います。大体テンプレートファイルが20程度、スタイルは1つという所でしょうか。

何か一つファイルを選択すれば、テキストエリアにその内容が表示されるはずです。もしこのときに下の方に「ファイルを更新」ボタンが表示されていないか、「更新はできません」という類の文句がでている場合、サーバー上のファイルが変更できない設定になっています。

FTPソフトなどで「ファイル属性の変更」を行って下さい。
※FFFTPの使い方などを参照のこと。

phpって何?

テンプレートファイルは拡張子phpが、スタイルファイルには拡張しcssが付いていると思います。これがいったい何なのかを理解する必要は特にありません。大体以下のようなアバウト理解で十分です。

・php →構造設計図
・css →デザイン設計図

phpで要素の配置などを指定し、色やフォントなどはcssで指定する、ということです。これも詳しい話を書き出すときりがありません。

phpは構造設計図なので、ウェブブラウザで閲覧するときはそのファイルの内容が直接表示されるわけではありません。書かれている内容に基づいて、「あれをここに配置」「あそこからこれをロードして表示」「別のテンプレートを呼び出して表示」という感じでページを作っていきます。

つまり、ページの骨組みを変えたければこのphpファイルを変更すればよいということですが、これはやや敷居が高いものでもありますし今回のテーマからは外れるので割愛します。そういう部分はしっかりとテーマを選んで回避してください。
※もちろん最終的にいろいろいじり回したければある程度の理解は必要

配置された要素を「どんな感じで表示するのか」という指定が書かれたものがcssファイルです。今回はこちらを修正することで文字サイズなどを変更するお話です。

スタイルシートの中身

ちなみに、まったくどうでも良い話ですが、CSSは「カスケーディング・スタイル・シート」の略語です。カスケーディングって何やねん、という疑問に答えるにはCSSの全体像に迫る必要があるのでするっと割愛しておきます。とりあずcssはスタイルシートなんだな、というぐらいで把握しておいて下さい。

さて、スタイルシートの変更です。おそらく「Stylesheet (style.css)」というファイルがあると思うので、それをクリックしてテキストエリアに表示させましょう。

cssファイルをざらって見てもらうと分かりますが、大まかに以下のような感じのものがずらずら並んでいると思います。

要素名 {
スタイル名:スタイル指定;
}

要素名も#付きのもの、アルファベット(+数字)だけ、”.”が頭に付いてアルファベットが並んでいるもの、とさまざまあるはずです。

治療場所の発見

まず最初にすべきは、自分のブログを表示することです。トップページを開いたら、その「ソース」を確認してみましょう。Firefoxなら「表示」の「ページのソース」から確認できます。
※右クリック「ページのソースを表示」でも同様

ソースをずらずらと眺めていくと、先ほど#付きで提示されていたような要素名が並んでいるのに気がつくでしょう。#が付いていると何が起こるのか、という事は一端置いておいて、これらが対応しているということを理解しておいて下さい。
※ちなみに、”#”付きが「id」で”.”付きが「class」に対応しています。

とりあえず、ソースを確認して自分が今変えたいと思っているのがどこの部分なのかを確認してみましょう。

もしブログのタイトル部分のフォントサイズがちょっと小さいなと思ったら、その部分を探します。仮に、以下のような部分を発見したとします。

<div id=”header”>

<h3><a href=”https://rashita.net/blog/”>R-style</a></h3>

これが、タイトルを表示している部分です。治療する場所は見つかりました。

スタイルシートの変更

同様に、先ほどのスタイルシートの編集画面から類似する場所を探します。すると「#header」という部分が見つかるはずです。でも、そこではありません。もう少し探してみましょう。すると「#header h3」という項目が見つかるでしょう。そこが対応箇所です。

この「#header h3」というのは、#deader(つまりid=”header”)内部にある、h3のスタイルを変えちゃいますよ、という意味合いです。発見した箇所にはもともとある程度スタイルが指定されているはずです。例えばこんな感じに。

#header h3{
margin: 0;
padding: 15px 0 0 15px;
font-weight:800;
font-size: 200%;
}

フォントサイズを変えたければ、「font-size: 200%;」の200%の部分を自分の好みの数に変更すればそれでOKです。変更したら「ファイルを更新」ボタンをぽちっと押しておけばOKです。

※もし、どうしてもこれが見つからないというのであれば、一番下の方に自分で書き加えましょう。

よくあるスタイル

先ほどはフォントのサイズを変更しました。フォントのサイズ変更は

font-size: 200%;

というような指定をします。200%の部分はパーセンテージ以外にもさまざまな指定の方式がありますが、その辺は詳しいサイトさんを見て下さい。これ以外によく使われるのが

font-family: sans-serif;
color:black ;
text-decoration: none;

というものです。

「font-family」はフォント名を指定します。「color」はテキストの色を指定。色名以外にも「#FFFFFF」のようなRGB指定もできます。「text-decoration」は文字の飾り付けを指定します。「none」(なし)を指定すれば、リンクのアンダーラインを消すことができます。

まとめ

これ以外にもさまざなCSSがあって、それらを使いこなせば、Coolなブログを作ることができますが、とりあえずはカッコイイテーマを探して、あとはテキストの色なりサイズを変えることから始めてみましょう。

ここで紹介したものは単なる入り口です。本格的にカスタマイズしたければ、自分でソースを見て、CSSの要素名を覚え、Wordpressの構造を知る必要があります。ただ、そこまで強くこだわる必要はないのではないかと、個人的には考えています。どうしても既存のテーマに物足りなさを感じたときに、ちょっと調べてみる程度のお付き合いでよいのではないでしょうか。

▼要素名をとりあえず知りたい方は
とほほのWWW入門

▼こんな一冊も:

パーソナル・マーケティング
パーソナル・マーケティング 本田 直之

ディスカヴァー・トゥエンティワン 2009-11-19
売り上げランキング : 4102

おすすめ平均 star
starすでにセルフブランディングの「コア」となるものをもつ人にとってはきわめて有用な本
starパーソナルマーケティングで人生が輝く!
starワークの実践が重要です。

Amazonで詳しく見る by G-Tools

WordPressレッスンブック 2.8対応―ステップバイステップ形式でマスターできる
WordPressレッスンブック 2.8対応―ステップバイステップ形式でマスターできる エビスコム

ソシム 2009-09
売り上げランキング : 2319

おすすめ平均 star
star基礎から勉強したい人には是非おすすめ
star理解しやすいです。
starカスタマイズを理解したいなら最初にこれを買うべき

Amazonで詳しく見る by G-Tools

編集後記:
今回は、ちょっとだけデザインを変える人向けに、かなり限定的に書きました。理解が不十分にしか進まない箇所だらけですが、応急処置はできるのではないかと思います。もし、本楽的に知りたい人がおられるならば、また詳しい解説を書いてみます。

2 thoughts on “CSSの知識が無いまま、WordPressを始めて右往左往している人への「デザインの一歩目」”

  1. ピンバック: links for 2010-06-16 « 個人的な雑記
  2. ピンバック: R-style » 「あなたのBlog術教えて下さい!」企画

コメントを残す

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

有料メルマガ配信中!

サークルもやってます

New Book!

すべてはノートからはじまる あなたの人生をひらく記録術

「やること地獄」を終わらせるタスク管理「超」入門 (星海社新書)

オススメ本

→これまでの著作一覧
  • →SNS:
  • rashita2 さんのプロフィールを Twitter で表示
  • rashita さんのプロフィールを GitHub で表示

Hot Books!

→紹介記事

→紹介記事

→紹介記事

最近の投稿

  • ノートがやがてうまく使えなくなる問題
  • ノートで世界を知る、自分を知る
  • 一つの情報に、もう一度触れること
  • 執筆はメモからはじめる
  • ブログ死すとも文章は死せず
  • Heptabaseが示す思考ツールの未来

カテゴリー

  • 0-知的生産の技術 (1,580)
    • BlogArts (121)
    • Evernoteの使い方 (177)
    • Scrapboxの用法 (101)
    • Scrivenerへの散歩道 (22)
    • アウトライナーで遊ぼう (88)
    • プログラミング (11)
    • 執筆法 (45)
    • 断片からの創造 (93)
    • 物書き生活と道具箱 (682)
  • 1-情報ツール考察 (74)
  • 2-社会情報論 (108)
  • 3-叛逆の仕事術 (392)
    • 「タスク」の研究 (260)
  • 4-僕らの生存戦略 (259)
  • 5-創作文 (91)
  • 6-エッセイ (217)
  • 7-本の紹介 (465)
  • コレクション (4)
  • 未分類 (2,832)
    • まとめ記事 (516)
    • 企画 (83)
    • 告知 (261)
    • 感想群 (111)
    • 時事ニュース (1,241)

タグ

#365日の書斎 #AppleScriptでEvernoteを操作する #「目標」の研究 #わりと身も蓋もない話 applescript blog BlogArts CategoryAllegory Dynalist Evernote GTD iPhone・iPad・Mac Scrapbox Scrivener Workflowy 〈学びの土曜日〉 「本」の未来 『「やること地獄」を終わらせるタスク管理「超」入門』 うちあわせCast ささやかな質問 ほぼ日手帳 アウトライナー アナログ道具あそび ショートショート セミナー・オフ会・イベント セルフ・ブランディング タスク管理 ノート ノート術 ポッドキャスト 哲学 思想 思考の技術 情報カード 情報摂取の作法 手帳術 政治・社会 教育 文房具 文章の織り方 新しい時代を生きる力 書評 発想法の探求 経済・金融 電子書籍

アーカイブ

メタ情報

  • ログイン
  • 投稿フィード
  • コメントフィード
  • WordPress.org

My Works

著作リスト

著作リスト

アーカイブ

カテゴリー

アーカイブ

  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年5月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年8月
  • 2015年7月
  • 2015年6月
  • 2015年5月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2014年5月
  • 2014年4月
  • 2014年3月
  • 2014年2月
  • 2014年1月
  • 2013年12月
  • 2013年11月
  • 2013年10月
  • 2013年9月
  • 2013年8月
  • 2013年7月
  • 2013年6月
  • 2013年5月
  • 2013年4月
  • 2013年3月
  • 2013年2月
  • 2013年1月
  • 2012年12月
  • 2012年11月
  • 2012年10月
  • 2012年9月
  • 2012年8月
  • 2012年7月
  • 2012年6月
  • 2012年5月
  • 2012年4月
  • 2012年3月
  • 2012年2月
  • 2012年1月
  • 2011年12月
  • 2011年11月
  • 2011年10月
  • 2011年9月
  • 2011年8月
  • 2011年7月
  • 2011年6月
  • 2011年5月
  • 2011年4月
  • 2011年3月
  • 2011年2月
  • 2011年1月
  • 2010年12月
  • 2010年11月
  • 2010年10月
  • 2010年9月
  • 2010年8月
  • 2010年7月
  • 2010年6月
  • 2010年5月
  • 2010年4月
  • 2010年3月
  • 2010年2月
  • 2010年1月
  • 2009年12月
  • 2009年11月
  • 2009年10月
  • 2009年9月
  • 2009年8月
  • 2009年7月
  • 2009年6月
  • 2009年5月
  • 2009年4月
  • 2009年2月
  • 2009年1月
  • 2008年12月
  • 2008年11月
  • 2008年10月
  • 2008年9月
  • 2008年8月
  • 2008年7月
  • 2008年6月
  • 2008年5月
  • 2008年4月
  • 2008年3月
  • 2008年2月
  • 2008年1月
  • 2007年12月
  • 2007年11月
  • 2007年10月
  • 2007年9月
  • 2007年8月
  • 2007年7月
  • 2007年6月
  • 2007年5月
  • 2007年4月
  • 2007年3月
  • 2007年2月
  • 2007年1月
  • 2006年12月
  • 2006年11月
  • 2006年10月
  • 2006年9月
  • 2006年8月
  • 2006年7月
  • 2006年6月
  • 2006年5月
  • 2006年4月
  • 2006年3月
  • 2006年2月
  • 2006年1月
  • 2005年12月
  • 2005年11月
  • 2005年10月
  • 2005年9月
  • 2005年8月
  • 2005年7月
  • 2005年6月
  • 2005年5月
  • 2005年4月
  • 2005年3月
  • 2005年2月
  • 2005年1月
  • 2004年7月
  • 2004年6月
  • 2004年5月
  • 2004年4月
  • 2004年3月
©2022 R-style | WordPress Theme by Superbthemes.com