Blogger HTML編集方法のコツ(初心者向け)

おすすめ記事ピックアップ

Bloggerは他のブログサービスより柔軟にHTMLコードを編集(追加・修正・削除)できます。自由度はかなり高いです。HTMLコードと言いましても、分類するならに言うならHTML、CSS、JavaScript(jQuery)という感じですね。

HTMLはサイトの骨格、CSSはデザイン装飾、JavaScript(jQuery)は、機能や動きのあるデザイン装飾というイメージです。詳しく知りたい人は、ググりましょう。Bloggerでそれぞれの編集方法について説明したいと思います。

Bloggerレイアウトの説明

Bloggerは「レイアウト」という管理ページがあります。ここではヘッダーやフッター、サイドやポストエリアへのガジェットを配置したり移動したりできます。ドラックドロップで移動できるので、とても便利な機能です。BloggerのHTMLカスタマイズは、主に「レイアウト」で各種の設置や配置を行い、「HTMLの編集」でHTMLコードをカスタマイズして、「ガジェット」でTwitter等の外部ブログパーツを埋め込みして利用することが多いです。これらを自由に使えるとカスタマイズの幅が広がります。


Blogger HTMLの編集方法

Blogger HTMLの編集は、「テンプレート」→「HTMLの編集」で行うことができます。簡単にBlogger HTMLの編集画面の説明をします。「ウィジェットへの移動」は、設置したガジェットのエリアへ飛ぶことができます。「Chromeの要素の検証」で、ガジェットの「widget id」を調べると簡単に利用できます。


「テンプレートを編集」は、通常見ているコードの画面です。「テンプレートをプレビュー」が変更したコードのプレビューを見ることができます。しかしこのプレビューは機能がイマイチです。あまり使うことはないでしょう。保存して通常の画面で確認したほうが確かです。ちなみに「テンプレートを保存」したあとでも、「Ctrl +Z」で編集を戻すことができます。なのでプレビューを使う必要があまりありません。

他のボタンはほとんど利用することはありません。ウィジェットがおかしくなってしまい、どうしようも無くなった時は、「ウィジェットテンプレートデホルトに戻す」をやってみましょう。どうしようも無くなったときのみ利用しましょう。たまに解決できたりします。

コード検索は、コードの画面にカーソルを合わせて、「Ctrl +F」を押しましょう。折りたたまれたコードまですべて検索できるようになります。ブラウザーの検索機能だと、正しくコードを検索してくれません。

またコードは▼で折りたたまれています。該当箇所を見たい時は広げましょう。コード内も・・・でコードが省略されていることがあります。こちらもクリックして広げましょう。コードを全部コピーして、エディターに貼り付け編集する方法もあります。好みの問題ですね。


Blogger HTMLの全体は、はじめにHTML宣言見たいのがあり、次にBloggerの書式が出てきます。ここにテンプレートの制作者やJavaScriptのリンクが続き、CSSコードが記述されています。CSSコードの後にウィジェットガジェットが書かれている感じです。ウィジェットガジェットはレイアウトと連動している部分が多くあります。検索方法と全体像がつかめれば、何か変更したいときに、探しだせるようになります。

Blogger CSSの編集方法

CSSの追記は、「テンプレート」→「カスタマイズ」→「上級者向け」→「CSSを追加」で、追記することができます。CSSは重複していても後から書かれたものや、!importantすれば、追記したものを優先して適用されることができます。この方法で修正もできるのですが、あまりオススメではありません。なぜかうまく動かないことや、追記した情報が存在しているにも関わらず見えなくなってしまうことがあるからです。

私としては、「テンプレートを編集」から直接CSSを変更・追記する方法をオススメします。HTML内の最初の方にCSSが記述されています。「Ctrl +F」検索と「Chromeの要素の検証」を使って、直接カスタマイズしましょう。私の場合ですが、自分がカスタマイズしたCSSは、CSSの最後に記述するようにしています。あとから修正したい場合はそこを見ればわかるからです。あとはコメントアウトを利用して補足を書いておけば分かりやすいです。


Blogger JavaScript(jQuery)の編集方法

「ガジェットの追加」で「HTML/JavaScript」を選び記述して追加する方法と、「テンプレートを編集」から直接埋め込む方法があります。外部サードパーティ(例えばTwitterなど)から、提供されるブログパーツや貼り付けコードは、「ガジェットの追加」で「HTML/JavaScript」から設置するのが良いと思います。


jQueryなどのJavaScriptを読み込む場合は、「テンプレートを編集」から記述もしくは、読み込みを設定します。googleのjsや、bootstrapなどを設定する場合などですね。bloggerには、FTP(ファイルのアップデート)機能がありませんので、独自にコードファイルをアップして、読み込ませたい場合は、別のサーバにアップする必要があります。JavaScriptをまるまる「テンプレートを編集」でHTML内に記述しても、結構うごいたりしますので、ご自身で最適な方法を見つけるのが良いと思います。

Bloggerのカスタマイズの参考になれば幸いです。質問等がありましたらコメントください。分かる範囲で回答します。


いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : Blogger HTML編集方法のコツ(初心者向け)
Blogger HTML編集方法のコツ(初心者向け)
Bloggerは他のブログサービスより柔軟にHTMLコードを編集(追加・修正・削除)できます。自由度はかなり高いです。HTMLコードと言いましても、分類するならに言うならHTML、CSS、JavaScript(jQuery)という感じですね。 HTMLはサイトの骨格、CSSはデザイン装飾、JavaScript(jQuery)は、機能や動きのあるデザイン装飾というイメージです。詳しく知りたい人は、ググりましょう。Bloggerでそれぞれの編集方法について説明したいと思います。
http://3.bp.blogspot.com/-4ckhOWE4Np0/UplvsgxVpvI/AAAAAAAANeQ/-Vdp8fhL2sw/s640/sono1.png
http://3.bp.blogspot.com/-4ckhOWE4Np0/UplvsgxVpvI/AAAAAAAANeQ/-Vdp8fhL2sw/s72-c/sono1.png
ふりむけばコウホウ
http://www.furimuke.com/2013/12/Blogger-HTML.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2013/12/Blogger-HTML.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy