読者です 読者をやめる 読者になる 読者になる

高校中退からの人生ガイドライン

高校を中退した人に役立つ情報を集めています。

高校中退からの人生ガイドライン

高校を中退した人向けに情報発信しています。

はてなブログのカスタマイズ方法。

ブログを続けていく上で、内容はもちろん大切ですが、同じ文章を書いていてもデザインで印象が大きく変わると思います。ページのデザインを編集してみましたので、参考にしたページを紹介しながら、実際にやってみた内容を書いてみたいと思います。

※このブログで実際に使っているカスタマイズです。これだけのカスタマイズを自分できちんとやろうとすると1日簡単に潰れてしまいます。でもすごく勉強になると思います。ご了承ください。

はてなブログのカスタマイズ

 パソコン向けページ

はてなブログを始めるときに、まずやるべき9つのこと(はてなブログの使い方・初期設定) - ニッチブログ

まず初めにやっておくべき設定です。見落としがちですので、確認しておきましょう。

管理画面 >> 設定

からできる編集です。この中身をきちんと編集するだけでも、サイドバーに記事の画像を表示したり、はてなブックマークの数や本文を表示したりできます。けっこういろいろ設定できる部分がありますので、今一度見直してみましょう。

はてなブログにページトップへ戻るボタンをつけよう! - No Hack No Life

記事が長いとスクロールの量も増えるので、画面の上部に戻るボタンが欲しくなります。これは簡単にできました。スマホだと邪魔になるかなと思って、PC向けページのみ表示するようにしています。フッタにJavaScriptのコードをペーストして、デザインCSSのところにCSSをペーストするだけです。

コピペ一発!はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ! - いつ俺〜いつから俺ができないと錯覚していた?〜

SNSシェアボタンです。デフォルトのボタンのチェックマークを外して、記事下・記事上にコードをコピペするだけです。 簡単だと思います。

導入するだけではてなブログをオシャレにできるテーマ「Codomisu Flat」を公開しました。 - ひつじの雑記帳

ここのデザインテーマをインストールして、指示どおりに編集しました。

ヘッダーのナビゲーション(ページ上部のメニュー)や、記事一覧のスライドショーを簡単に作ることができます。そんなに難しくないですが、コードを少し書き換えないといけないので、この辺は多少の知識は必要かもしれません。

 

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

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

 

 

スマートフォン向けページ

Googleアドセンスの新広告「ページ単位の広告」の設置方法【はてなブログ】 - いつも向かい風

アドセンスの「ページ単位の広告」です。画面の下のほうとか、最初に開いた時に画面全体に表示されるやつですね。さっそく導入してみました。

<head>タグに入れろという指示ですが、最初どこだか分かりませんでした。

管理画面 >> 設定 >> 詳細設定

に<head>タグ内にコードを加える項目があるので、そこにアドセンスのページからコピーしたコードをペーストするだけでした。

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

この指示どおりにコードを貼っていくだけで、スマホ版のページもかなりちゃんとしたデザインになります。僕もまだ全部は試していないですが、ちょっと導入しただけでもいい感じになりました。ぜひやってみてください。

コピペ一発!はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ! - いつ俺〜いつから俺ができないと錯覚していた?〜

SNSシェアボタンです。上記のPC版と同じサイトですが、スマホ版の編集方法も紹介しています。

 

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

 

 

まとめ

はてなブログのカスタマイズは基本的に

  • html
  • css
  • JavaScript
  • jQuery(JavaScriptのライブラリ)

というコード(プログラミング言語)で動いています。

余裕があれば、このようなコードの書き方を勉強しておくといいかもしれません。

ただ勉強してもすぐには自分で考えて書くのは難しいため、基本的に上で紹介したような記事を参考にしながら、必要に応じて自分で書き換えていく形になると思います。

上のようなサイトを見れば知識がなくてもなんとかカスタマイズできると思いますが、見慣れないコードばかりで大変な作業だと思います。

こういう記事は詳しい人が書いているので、どうしても説明を省いている部分もあります。少しでも知っているとコードのどの部分を自分で書き換えなければいけないのか把握できる為、少し余裕ができると思います。

プログラミングについてはまた後日、詳しく書きます。

当サイトについて

たっちゃんです。当サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。