ネットと副業

副業が本業の収入を大きく超えたので会社やめました

日記

〈はてなブログ〉デザインテーマのCSSをカスタマイズする方法

投稿日:

f:id:nekonkeo:20140919053407j:plain

 

ブログサービスのデザイン

ブログサービスでブログやりはじめると、

他の人とデザインがまったく同じだったりなんかして、

なにかと自分のブログデザインを

オリジナルにしたくなるものですね。

 

アメブロやはてなブログなどの

ブログサービスのブログでは

HTMLやCSSの編集機能が限られることがほとんど。

 

 

wordpressなど使って本格的なブログなら

各phpの中身からCSSまでガシガシいじれるわけですが、

はてなブログでも、まぁCSSはいじれるのか

ってことがわかりました。

 

 

デザインテーマを選ぶ

デフォルトのテーマからCSSをいじってもいいのですが

テーマの中から、自分の理想に近いテーマを選んで

そのCSSをいじくる方が、達成感がありますね。

 

なのでまずテーマを選びます。

ダッシュボードから“デザイン”を選びます。

f:id:nekonkeo:20140920000823j:plain

 デザインページから左サイドを一番下まで

スクロールすると“テーマストアでテーマを探す”が

出てくるのでクリックしてテーマストアを開きます。

f:id:nekonkeo:20140920001200j:plain

 

 

f:id:nekonkeo:20140920001249j:plain

 テーマストア。

私の場合、シンプルなデザインをベースにしたほうが

CSSをいじりやすいので、

公式テーマから一番人気の“Epic”を選びます。

 

テーマをインストールすると先ほどの“デザイン”ページの

左サイド、“インズトールしたテーマ”に登場します。

f:id:nekonkeo:20140920001542j:plain

適応したいテーマを選択すると右側のプレビューも変わります。

テーマを反映するには、左サイドメニュー上の

“変更を保存する”をクリック。

 

ぶじ、テーマが反映されましたね。

 

 

 

CSSを編集する。

テーマが反映できたところで、

CSSを編集します。

デザインページの“カスタマイズ”を選択します。

f:id:nekonkeo:20140920002216j:plain

デザインテーマ“Epic”の場合、

CSSは外部ファイルをインポートしています。

 

“デザインCSS”をクリックすると下記が表示されます。

/* <system section=”theme” selected=”alpha2″> */
@import “/css/theme/alpha2/alpha2.css”;
/* </system> */

 

 

私はてっきり、ここにCSSが直書きしてあると思っていたので

importされてるのを見たときに、ガクゼンとしました。

「これじゃCSSいじれんぢゃん。。。」

とあせることはありません。

 

imortされているCSSのURLをコピーして

(上の場合、 /css/theme/alpha2/alpha2.css をコピー)

ブログのURL http://blog.hatena.ne.jp の後ろに追加。

つまり

http://blog.hatena.ne.jp/css/theme/alpha2/alpha2.css

のページをひらくとCSSが丸裸になります。

f:id:nekonkeo:20140920003053j:plain

 

表示されてテキストを全コピーして

Dreamweaverなどで編集しましょう。

 

編集できたCSSを、

さきほどの“デザインCSS”欄に上書き

しちゃいます。

 

カスタマイズ完了です。

 

-日記

執筆者:


comment

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

関連記事

まずは無料ブログでアフィリエイトをはじめてみる

アフィリエイトをはじめるのに、まず立ちふさがる難関が、広告を掲載するために自分WEBサイトを立ち上げることでしょう。WEBサイトといわれても、そんな知識や技術がない方がほとんどでしょう。 アフィリエイ …

『億男』観て号泣してしまいました

億男見てきました。感動しました。 友人に「億男」になるなら見てこいとすすめられて観てきましたので、感じたことをまとめておきたいと思います。なるべくネタバレのないようにしますが、ネタバレが気になる方は読 …

no image

《ホームページ制作》共通部分をphpで読み込む

「共通してる部分を全ページいちいちベタ書きコーディングするの!!?」 ホームページを制作していると、こういう悩みに必ずぶち当たります。メインのナビゲーションだったりフッターだったり、全部のページで同じ …

no image

〈超簡単〉Instagramの自分フィードをブログやホームページに設置する方法〈SnapWidget〉

人知れず、Instagramをやっております。 会社の同僚や、友人・知人に報告するでもなく、人知れず、写真を撮り、更新して、知らない人から「いいね」をもらってニヤニヤする、根暗なSNS活動をしておりま …

3月のライオン

3月のライオン(アニメ)のホームページいいなぁ

3月のライオン 数年前から単行本ではまってます。 すごく面白いです。 15歳で将棋のプロになった、主人公の桐山くんの日々の戦いとその周りの人たちをめぐるお話。将棋マンガというわけではなく、“人”の話が …