2019年8月31日SHAREツイートシェアはてブLINEPocketこんにちは、Ichi先輩(@Abstract1Life)です。今回は、みなさんの参考用・自分の保存用にブログのカスタマイズをどのブログを参考に行っているか記事にまとめておきたいと思います。私自身にはほとんどプログラミング能力は無いので、このブログのデザインはほぼ参考記事のコピペで作成しています。色とかスペースとか位置とかは多少いじっていますが、数字を変えているだけなので、誰でもできると思います。本記事は「はてなブログ」でブログ運営をしていた時のブログデザインです。現在はワードプレスに移行しており、デザインが異なりますのでその点はご了承ください。本文の文字の大きさ&フォントサイドバーの文字の大きさ&フォント画像に枠をつけるコード挿入Amazonアフィの文字色変更コードの挿入はてなブログ:スマホ版カスタマイズ見出し・日付部分の色&スペースヘッダー&グローバルメニューシェアボタン設置まとめ:はてなブログのカスタマイズカスタマイズの基礎知識ブログデザインをカスタマイズする前に、とりあえず基礎知識だけ確認しておきましょう。基礎知識が無くてもコピペでカスタマイズ出来てしまいますが、知っておいた方が何か問題があった時に確認出来て便利です。HTML:HTMLはブログの文書構造を表現しているプログラムCSS:CSSはブログの文章の外観を表現しているプログラムつまり、基本的にはHTMLがしっかりしていれば文章自体は存在するんですが、CSSも上手く使ってやらないと見やすくならないということですね。Scriptなどを使うと、文章に「動き」をつけることが出来ますが、基本的には上の2つを使ってカスタマイズするのが主流な流れだと思ってください。はてなブログ:PC版カスタマイズPC版でカスタマイズしている部分は、以下の通りです。本文の文字大きさ&フォントサイドバーの文字の大きさ&フォント画像に枠をつけるコード挿入Amazonアフィの文字色変更コードの挿入ブログデザインテーマ&記事幅デザインはブログテーマの「Innocent」です。このテーマは、少し設定するだけで簡単にグローバルメニューが設置できるのが魅力です。記事幅に関しては、初期設定だとAdsenceが記事幅より飛び出してしまっていたので、720pxに変更しています。「Innocent」を作った作者の半月さんがカスタム記事を書いているので、そちらを参考にして変更しています。記事自体は「Blank」テーマの記事ですが、こちらのテーマも半月さんが作ったテーマなので、今のところ問題なく使えています。はてなブログテーマ「Blank」の記事幅を変更する方法MoonNote見出し・日付部分の色&スペース見出しと日付の部分に関しては、オシャレに定評のある「Literally」さんの記事を参考にさせていただきました。プログラミングに詳しかったらこんな感じに細かい部分にこだわりたいなというブログのカスタマイズをされています。記事自体はスマホ用ですが、PC版でも問題なく使えるソースだったので、下記の記事からコピペで設定しています。はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法LITERALLYシェアボタン設置シェアボタンは最近変更しました。はてなオリジナルでも良かったのですが、twitterの数が表示されないため、凸凹になってしまって気持ち悪かったので、綺麗なものにした感じです。こちらはゆきひーさんの記事を参考にさせていただきました。Lifeプロフィール欄の新規作成はてなブログでは、サイドバーに既存のプロフィール欄を置くことが可能ですが変更できる点が少ないので、かなり不便です。具体的にはプロフィール画像が小さかったので、大きくしたいなと思って、新しくHTMLでプロフィール欄を作成しました。参考にさせていただいたのはこちらの記事です。スパイスのように効いてくる!はてなブログのプロフィール欄カスタマイズの巻HSKぐうたらジャーナルサムネ画像の枠作成サイドバーにある最新記事や人気記事のサムネの画像ですが白い画像などを使ってしまうと、他のサムネ画像とのバランスが悪くなってしまうので枠をつけました。枠をつけることによって端が揃うので整った印象を与えることが出来ます。サムネの画像に枠をつける記事が見当たらなかったので、この2記事を参考にCSSコードを作成してみました。本文の文字の大きさ&フォント文字の大きさとフォントの変更はこちらのサイトを参考にして変更しています。私の場合はフォントを「メイリオ」に指定しています。可読性が良くなるように心掛けています。はてなブログのフォントの種類を変えましたIT系女子ログサイドバーの文字の大きさ&フォントサイドバーに関しては、こちらのYukihyさんの記事を参考に、サイドバーの項目に対して、上記の本文に当てはめた文字の大きさとフォント変更のコードを入力しました。このYukihyさんの記事は、上手く使えばかなり色々とカスタマイズが捗るのでとってもお気に入りの記事です。画像に枠をつけるコードについては、サイドバーのサムネイル部分に一部使わせていただいた、こちらのサイトを参考にさせていただきました。画像に枠がついていると、揃った印象がある気がします。うぇぶ小屋Amazonアフィの文字色変更コードの挿入はてなぶろぐで挿入できるAmazonアフィのリンクはそっけない感じなので、こちらの記事を参考に、Amazon感を強めています。商品紹介をちょっぴり改善するカスタマイズMoonNoteこちらのコードを入れると、文字色の変更とロゴが追加されるので見た目が整いますよ。基本的に「カエレバ」「ヨメレバ」等のサービスを使うの方がおすすめです。はてなブログ:スマホ版カスタマイズスマホ版のデザイン変更は、はてなProではないと出来ないのでご注意ください。デザインテーマの「Innocent」はレスポンシブルデザインに対応しているのですが、あえてレスポンシブルにはしていません。スマホ版はシンプルにしました。スマホ版で変更している部分は、以下の通りです。注意レスポンシブデザインではPCのカスタマイズをするだけでモバイル版を気にしなくても大丈夫です。先ほども触れましたが私の場合には個人的にレスポンシブではなくして独立してカスタマイズしていました。見出し・日付部分の色&スペースこちらはPC版と同じくLiterallyさんの記事を参考にさせていただいています。スマホ版で見てもとってもおしゃれで、ある意味ブログっぽくない感じがします。はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法LITERALLYヘッダー&グローバルメニューヘッダーのタイトル部分を編集したり、グローバルメニューをつけたりするのには、狭間純平さんのこちらの記事を参考にさせていただきました。スマートなスマホ画面になるのでお気に入りの記事です。狭間さんのページ自体も色が抑えめで、スマートなページの印象です。【スマホ版】はてなブログのヘッダー部分のカスタマイズ方法まとめ(グローバルナビ・フォント変更・デフォルト表示削除など)Awesomeシェアボタン設置シェアボタンもPC版と同じく、ゆきひーさんの記事を参考にさせていただいています。Lineのシェアボタンも入るので、色味が増えてPC版よりにぎやかな印象です。Lifeまとめ:はてなブログのカスタマイズ私自身はこういったブログのカスタマイズをするのは初めてなので、色々な方が参考記事を出していてくださってとても助かりました。コピペで色々おしゃれできるのはいいですよね。シンプルに見やすいブログにしていますがブログ運営という意味ではもう少し工夫が必要なのかもしれません。今後も色々と研究してより良いデザインを目指したいと思っています。こちらの記事では、グラフィックデザイナーの方にカスタマイズに関してアドバイスしてもらったことをまとめています。はてなブログに関するカスタマイズの参考になるので、ぜひコチラの記事も読んでみてはいかがでしょうか。