はてなブログテーマ|知識ゼロから1ヶ月でカスタマイズテーマを投稿したまでの方法。

私のTwitterのダイレクトメッセージとブログの問い合わせにこのようなメッセージが最近合計3回来ました。

猫ちゃん

Aさん「本当に初心者なのですか?テーマやブログ見ましたがシンプルで1ヶ月ってのは凄いですね!教えてほしいです!」

猫ちゃん

Bさん「たにやんさんのブログと同じようなデザインにしてほしいのですがやっていただけませんか?」

猫ちゃん

Cさん「まあまあ、ええやん、」

文章は変えていますがこんな感じです。何故、私に?という感想です。ちなみに1ヶ月の知識で以前、投稿したはてなブログのカスタマイズテーマがこちらです。

はてなブログテーマ|シンプルカードタイル型デザインを勢い1ヶ月で制作し投稿
参考

SIMPLE CARD YANはてなブログテーマ

思った以上にインストールされ私的にはビックリ。殆どの方がテスト試しなどの方が多く現在利用されている方はそこまで多くありませんが。

なので本日色々とCSSを修正いたしました。

最初に言いたい

そんなに褒めないでー笑。私は全然詳しくありません。

私が出来ると言ったらとても厚かましくなってしまいます。私は良い意味で既にあるカスタマイズテーマや優良記事で真似事をしただけなんです。

レベルで言えば10が最大なら私のレベルは1.5レベルほどの基本を覚えたかなくらいの程度。っていうのも基本的なCSSしかまだ知りませんし。Javascript、phpなんて未知の世界。

誰でもできる方法しか行っていません。すぐ出来るようなことしか行っていません。なので、今回は私の1ヶ月でテーマを投稿したまでのCSSの学び方と、カスタマイズにおける簡単な習得方法を教えます。

これはあくまでも”はてなブログ”で行えるように簡単に説明したいと思います。分からないキーワードや詳細はご自身でGoogleで調べましょう。私も何もしらない状態からやりましたので皆同じです。真面目にこれから教えることしか私やっていません。時間があるときひたすらCSSをいじっていただけです。

しいて言うなら機械強い、パソコン詳しい程度です。WEBデザイン系のお仕事の人ですか?とメッセージで聞かれましたが、まったく関係ない私は個人で海外との貿易関係の卸売りとバイヤーなので。WEBと言えばWEBショッピングとかですけど。。。デザインはセンス無し。

※これはあくまでもご自身でカスタマイズしてみたい、いずれテーマ作ってみたい人向けの記事かもしれません。でもコピペで十分の方にも役立つと思うし。Javaなどはこの記事には出できません。

あと最初に言うけど私のテーマを投稿するまでの学び方は全部公開するけど、優しくないので説明も少し。やりたいなら参考に頑張れってだけ。興味ない人は読んでも意味ない。どうしても無理な場合は聞くよ。まずはやってみなよ。

人に聞く前にGoogleに聞きなさい。

スポンサーリンク


”コピペでOK”はそのままではなくCSSをいじり倒せ

よくある「コピペでOK」記事は多いですよね。初心者にも優しく貼り付けるだけでいいなんて神様のような優良記事を書いてくれる方たちが多く素晴らしいかぎりです。

だけど学びたい方はコピペで終わりにしてちゃ意味がないでしょう。それじゃ何も学べません。と言いますかコピペという答えがそこにあるのです。なぜこのCSSがブログではこのように表示されるのかな?と疑問を持ちましょう。

コピペOKとせっかく答えを教えてくれているので、そこからもう少し頑張りましょう。見出し程度のCSSならなにもない状態から自分で書けるようになります。

CSS
.entry-content h1 {
font-size: 160%;
padding: 4px 10px;
border-left: 10px solid #444;
}

paddingって何?

4px 10px?この数字を変更したらどうなるんだろう

HTMLクイックリファレンス

上記リンクのこの場合CSS3リファレンスを見れば全部ある程度の意味と説明が全部書いてあります。あとは自分で直接デザインカスタマイズにて変更してみて、目で確認しながら覚えましょう。以上

はてなブログのテーマから導き出せ

はてなには、完成された素晴らしいテーマがたくさん投稿されています。

はてなテーマストア

色々なテーマをプレビューしてみるのも自由、適用するのも自由。

そしてちょっとした小ネタ

きっとあなたも公式や誰かが作ったテーマを使用していることでしょう。あなたのデザインCSSの一番上にこのような記述はないだろうか?

CSS
/*  */
@import url("https://hatenablog.com/theme/8599973812293916984.css");
/*  */

ちなみに私の投稿テーマを利用。

このリンク先を見たことがある人は初心者であればまずいないだろうし案外少ないのかもしれない。見たことがない人は見てみよう。

これは難しことは言わないけど、このリンクで私が作成したテーマをデザインCSSに読み込んでいるURLとなる。なのでこのリンク先には私の作成したテーマのCSSが書いてあるということ。

https://hatenablog.com/theme/8599973812293916984.css

別タブで開くので一度見たことがない人は見て。びっしりとCSSという名の英語が書いてあるはず。目が痛くなる。

逆に言えば、これをコピペしてCSSに貼り付ければ同じようにデザインが適用される。で、変更したい場合も直接変更できるので勝手が良いがそれはおすすめしていない。これを利用してCSSを真似しながら覚える方法。

私のさきほどのリンクのCSSは非常に見にくいと思う。テーマ投稿者の中には同じような人もいる。あれはスタイルシートのCSSを圧縮しているため。

ス ポ ン サ ー リ ンク


CSS圧縮サイト

以下のサイトで圧縮は出来る。

圧縮サイト:CSS Minifier

使い方は左側の【縮小前のコード】にコピペしたCSSを貼れば右側の【縮小後のコード】に表示される。/*見出し*/などの文字は消えるため注意。

CSS展開サイト

だが今回の私のCSSは既に圧縮しているため逆に圧縮を展開できる便利サイトを教えよう。展開すればCSSが見やすくなる。

もし余裕があるなら私のさきほどの目が痛くなるCSSをコピペして展開サイトに貼り付けペーストしてみよう。

注意点:/* Responsive: yes */からコピペしてください。

https://hatenablog.com/theme/8599973812293916984.css

同じように左側に圧縮されたCSSを貼り付けると右側に展開されたCSSが表示されるはずだ。私のさきほどの投稿テーマのCSSも全てキレイに整理されて表示されたはずだ。

展開サイト:Pretty Diff

結果的に

最初に紹介したコピペでOKの進化バージョンとでも思ってくれればいい。これは公式以外の個人ユーザーの今あるテーマに使うことが出来る。どのようなCSSでこのスタイルをつくっているのか、触っていれば意外と覚えていけるものです。以上

はてな:サブブログをカスタマイズ用に持て

これは今まで紹介したことをサブブログでやってみようというものです。

サブブログを作り非公開にしてカスタマイズ専用にする。触りまくればいい。以上

デベロッパーツールを使って良い意味でパクれ

Google Chromeのデベロッパーツールを上手く使おう。見出しはもちろん簡単なカスタマイズならこのデベロッパーツールから全て見れる。使い方ですが、サルワカさんがとても丁寧に分かりやすい記事書いています。

デベロッパーツール使い方:サルワカ

私の使用しているカスタマイズ用エディター

※私のこのブログのエディターを使用したCSS編集画面。

Brackets

コードヒント:foと打てばfontなどコードのヒントが一覧されるので覚えるのにも書くのにも便利。

コードカラークイックビュー:編集時に色(例 #0000ff)上にカーソルを置けば,色がポップアップ表示される。クイック編集するとカラーパレットが表示されるので,その中から好きな色をすぐ変更できる。.

などその他にも色々あるが初心者には優しい。使い方は検索すれば出る。しかしだいたいのことはすぐ使っているうちに理解してくる。色分けされるのは当たり前、検索するのも簡単。置き換えもすぐできる。保存しておけばBackupとして有効。

無料エディター:Brackets

Mac、Windows両方対応。無料で非常に使いやすい。このエディターで編集し、はてなのデザインCSSにコピペ。編集するときは保存したエディターから編集。

ス ポ ン サ ー リ ンク


私が今まで読んだCSS本

作りながら学ぶHTML/CSS デザインの教科書

8月末の私の誕生日に読者にAmazon欲しいものリストから頂いた本。

HTML5&CSS3 デザインブック

レスポンシブに特化した本。

HTML&CSS 標準デザイン講座

CSSとHTML。初心者には学べる

はてなブログ Perfect Guide Book

はてなブログで書いているなら基本中のことはこの1冊でできる。

以上

私のことを褒めてくれた方にはありがとうと言いたいが、そこまで難しいことはしていなく誰でもできる範囲のカスタマイズなのです。

まったく詳しい説明もなく初心者に優しくない!というコメントがありそうだが私にもできているのだから皆さんもできます。

是非少しでも参考にして自分でカスタマイズを励んでほしい。

丸丸パクリはしないように!ライセンスも確認するように!

少しくらい参考にするのは問題ない!

そしてカスタマイズテーマ投稿してみよう!!!

 

はてな:カスタマイズテーマの手引き

 

しっかりと公式でも書いているように※オリジナルテーマの作成は、CSSの知識がある方を対象にしています。となっている。1ヶ月あれば余裕でできるからやってみよう。

 

CSSがある程度理解できるようになったらJavascriptとか次の段階にいきなさい。

ほんわか生息中

Twitterではほんわか生息しているので気軽に絡んでください。

 

Twitter@taniyantoiu

 

コメントを残す

メールアドレスが公開されることはありません。

Copyrighted Image