こもりみち*たまゆら

ひきこもりコミュ障メンヘラオタク女の生存戦略日記

※ 当サイトはアフィリエイト広告を利用しています

【CSS初心者から】はてなブログでカスタマイズがうまくいかない人へオススメの方法

f:id:hioari96:20161013231333j:plain

ブログテーマ変更いたしました。

カスタマイズがなんとか成功…

めちゃくちゃ時間かかりました。

昨夜は真夜中の二時半ぐらいまでかかってうまくいかずにふて寝しました。

 

そして、今現在成功した模様…

変更を保存して反映されるまでの空白の数秒間がめちゃくちゃ緊張しますね…

ドキドキです…

 

 

目録

  

 

 

はてなブログは編集が(比較的)ラク

※個人の感想です。

 

はてなブログはいろいろなテンプレートがありますし、見出し機能や目次など公式のタグ???(であってるのかな?)を入れるだけでできてしまうのでブログの目的「書くこと」に集中できます。

 

カスタマイズの方法も検索すれば【コピペで簡単】と銘打った先駆者さんたちの記事がずらーと並びでますし。

 

わたしの経験内ではカスタマイズの手間暇はあまりかからなくて楽だなぁという感想を懐きます。

 

その分HTMLやCSSなど知識をもっていじり倒したい人には物足りないと思いますが…

 

『玉響*花心風』の変更箇所

・テーマを変更

「Blank」から「Innocent」へ

テーマ作成さんはどちらも同じ方。

カスタマイズの方法などは作成者さんのブログに記載されています。

 

moonnote.hateblo.jp

 

・見出し 

こんな感じにしました↓ 

 

見出し3

見出し2

見出し1

 

今まではただ単に大きくなって太文字になるだけだったので、

線で囲んでみたり点線つけてみたり。

 

もちろんわたしが考えたわけではなくコピペさせて頂きました。

参考にしたサイト様は下記に記述しておきます。

 

 うまくいかないカスタマイズ

 

 【コピペで簡単!】というタイトルに「よっしゃ!」となったのですが、

やってみた当初は上手く反映されなかったり、デザインがぐちゃぐちゃになったりとちんぷんかんぷんでした。

 

同じテーマを使用している他のブログさんでは上手くいっているカスタマイズなのに何故???と頭を抱え、頼ったのはGoogle先生。

  

 「はてなブログ カスタマイズ うまくいかない」

「はてなブログ 見出し カスタマイズ 反映されない」

 

 

などなど疑問解決のためにいろいろと単語を変えて検索してみました

 

 

 カスタマイズがうまくいかなかった場合の記事が見当たりませんでした。

 

 

わたしの検索方法が間違っていた可能性は大いにありますが。

 

もしくはみなさんすぐにテーマ作成者さんのところに連絡して対策をとっていたのだと思います。

 

しかし、わたしはコミュ障。ネット上でも発揮されるコミュ障です。

作成者さんへの質問は最後の最後にとっておきたい。

というか経験上、「よっしゃ!勇気出して聞いてみるぞ!」と思い行動した時にばかり簡単すぎるケアレスミスだったり、よく考えればわかることだったりするので…

 

 

ということでもしかして存在するかもしれないわたしと同じように、

「はてなブログカスタマイズがうまくいかないけど、ぐぐってもでてこない!!」

 

という方のためにド超級初心者が行ったことを書いていこうと思います。

参考にでもしてもらえれば幸いです。

 

 

やることはめちゃくちゃ簡単です。

すでにそうしている方もいらっしゃると思います。

 

まず、メインのブログとは別に「お試しブログ」を作ります。

現在、はてなブログは無料版で三つ、有料版のPROで五つブログを作成することができます。(2016年10月)

 

 お試しとはカスタマイズお試しブログのことです。

 

このブログのテーマをメインブログで使用しようと思っているテーマにします。

サイドバーの並び方も可能な限りメインブログに近づけておくといいです。

 

記事を作成します。

 

例えば目次をカスタマイズしたいなら、

記事には 

目次表記するための

 

:contents []←本来ならこれ必要ですが目次がここにできちゃので。

 

を記述します。

 

それから、見出しを作ります。

 

わかりやすいように

 

見出し3

見出し2

見出し1

 

と書いておいてそれぞれの見出しにするとカスタマイズの結果がすぐわかってラクです。

 

ここまでできたならカスタマイズする方法をぐぐりましょう。

 

はてなブログにはカスタマイズの先駆者がたくさんいますから、

マイナーすぎる部分でない限りかならずヒットします。(と思います)

 

だいだいのカスタマイズはデザインCSSをいじることで行なえます。

 

注意したいのはテーマによってはいじっても反映されないものがあるということ、と

カスタマイズCSS同士で互い(もしくは片方)の変更を打ち消してしまうことがある、という二点です。

 

これをメインブログでやらかすと、どれとどれを打ち消しているのかわからずにデザインが崩壊します。今までのブログカスタムがパー\(^o^)/になります。

 

なのでカスタマイズお試しブログで一度試してみましょう。

 

 

同じテーマで同じカスタマイズCSSでうまくいった変更ならば、メインのブログで同じことをしてもうまくいく可能性が高いです。

※他のテーマに合わせて記事を書いていた場合は、変更際にデザインが崩れる可能性はあります。

 

まとめ

  • カスタマイズお試しブログを作る。
  • メインブログで使いたいテーマと同じテーマにする
  • 同じカスタマイズCSSを使用してみる
  • うまくいけばそのままメインブログでもうまくいく可能性が高い。

 

 

 

 

 

たったこれだけのことですがわたしはメインブログでやらかしました。

なんとなりましたが心臓に悪い…のでうまくいったデザインCSSはメモ帳などに保存しておきましょうね…いじくる前に変更前のデザインCSS保存必須です…

 

 

参考にさせていただいたブログ

見出しはこちらを参考にさせて頂きました。

ありがとうございます。

 

www.yukihy.com

 

参考にしようと思って挫折しました。

いろいろな見出しのCSSサンプルが置かれています。

webnonotes.com

 

こういう枠は↓のサイトさんを参考にさせて頂きました。

 

HTMLのお勉強・枠をつける - ウェブサイト制作ツール紹介 Jimdo diy

 

枠に対する豆知識的な何か

 

枠は、見たまま編集でコピペすると

 

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">

</div>

とこのまま表示されてしまいます。

 

なので、HTML編集で表示したい場所にコピペしましょう。

 

すると、

 

 

と枠ができあがります。

 

また空白のまま枠を広げようとえんたキーを押すと枠がどんどん増えていってしまいます。

 

枠外で書いてコピペするという方法もありますが、

枠内に直接打ち込みたい、という方は改行する時にシフトキーと押しながらエンタキーを押してみてください

改行できるはずです。

/*jQuery をフッターに記述する*/