れんちの備忘録

れんちの備忘録

ゆとり世代社会人が日々の中で調べたこと、考えたことのメモ

《ブログカスタマイズ》はてなブログ初心者が初めて記事をつくる時に参考になるサイト一覧

f:id:watchdogs064:20180502081044j:plain

  こんにちは、れんち です。

 前回はじめて、ちゃんとした(?)ブログ記事を書くことができましたが、図や表、twitterの埋め込み方等のブログの作法を調べたり、文章構成をどうするか悩んで記事を書きなおしたり...正直とても大変でした。初めての記事ということもあり、1つの記事を書くだけなのに、軽く10時間以上は費やしたんじゃないかと思います。
 それなりの頻度で投稿していきたいと考えているので、1記事にかける時間の短縮は今後の課題ですね。

 さて、これからはてなブログをはじめようと思っている方に、同じブログ初心者として、僕がこれまでに記事を作った際に参考になったサイト様を紹介したいと思います

 

 

ブログテーマを変更する方法

 まず、「ブログを始めるからには、やはり見た目を好みのものにしたい。でも、自分でデザインするのは知識がないし無理」ということで、テーマストアから気にいったものを選ぶことにしました。

テーマ ストア - はてなブログ

 本ブログは、シロマ様作成の、シンプルで格好いい「Brooklyn」というデザインテーマを使用させていただいています。まだ使いこなせていませんが、そのうちカスタマイズもしたいと考えています。

www.notitle-weblog.com

目次を作成する方法

目次の作り方

 「記事に目次を入れてみたいけど、なんか難しそう。」と思ってましたが、とても簡単に目次が作れるので、作り方を知らない方はご覧ください。

seaotterman.hatenablog.com

目次のカスタマイズ方法

 目次を作ってみたけど、もう少し自分好みにデザインを変えたいと思って、えむしてっく様の目次を使わせていただきました。比較的シンプルなデザインが好きな方向けです。

mshitech.hatenablog.com

記事を装飾する方法

ボックスデザイン(囲み枠)を入れる方法

 まとめ等、記事内で特に強調したい箇所を見やすくするために使用しています。デザインの種類が豊富にあるので、自分のブログに合ったものが見つかると思います。

saruwakakun.com

蛍光ペン風にアンダーラインを入れる方法

 文章に視覚的にメリハリをつけるために使用しています。
 ガジェレポ!様の記事は、「太字」「斜体」「下線」表示を、それぞれ「赤」「黄」「緑」の3色の蛍光ペン風に色分けして表示するように変更してくれる方法を説明しています。HTMLをいじる必要がないので、とても簡単に色分けすることができます。

www.gadgerepo.com

 まろはる様の記事では、更に10色分の蛍光ペン風色分けをしてくれる方法を記載しています。記事により色どりを持たせたい場合に便利です。

maroharu16.hatenablog.com

 はてなブログアイコンWebフォント一覧

 ホームアイコンやツイッターアイコンなど、今後ブログデザインをカスタマイズする際に使えそうなアイコンが一通りそろっています。

shirokai.hatenablog.com

記事内へ各種コンテンツを貼り付ける方法

URLの貼り付け方法

記事内に埋め込む形でURLを挿入する方法

 本記事でも多用しているように、他の方のブログ記事を紹介する際に、記事内にどうやってURLを埋め込むかを説明しています。

staff.hatenablog.com

埋め込んだURLを中央揃えにする方法

 本記事内の埋め込みリンクも、記事内の「中央揃えにする」という項目を参考にしています。

raku-book.hatenablog.com

画像の貼り付け方法

画像サイズを最適化して貼りつける方法

 ブログに張り付ける画像を、どのくらいのサイズに圧縮したらいいかについて説明されています。「はてなフォトライフで画像を最適化する方法」を参考にしました。

www.mochi-mochi-kun.com

画像を中央揃えで表示する方法

 こちらの記事はCSSにコードを記述することにより、いちいちHTML編集をすることなく、ブログ内の画像全てを中央揃えにできる便利な方法を説明しています。

uriuridayo.hatenablog.com 

 各画像ごとに中央揃えを指定したい場合は、以下のサイトの通りにHTMLを編集すれば簡単にできます。

www.zakkiblog.net

twitterの貼り付け方法

特定のツイートを記事内に貼り付ける方法

 ブログ記事だけではなく、twitterも引用したいと思い、MUTANT様の記事を参考にさせていただきました。

www.mutant-tetsu.com

twitterを中央揃えで表示する方法

  twitterも中央揃えにしたいという方はyonta24様の記事が参考になると思います。

affiliate-hatekun.hatenablog.com

 表の挿入方法

 エクセルで作成した表をそのまま貼り付ける方法が参考になりました。

www.mutant-tetsu.com

「上に戻る」ボタンを設置する方法

 記事が長くなってしまうような場合はあると便利だと思い、本ブログでも、あにお様の記事を参考に設置させていただきました。

aniota-alvarado.hatenablog.com

ブログトップページを記事一覧ページに変更する方法

 はてなブログProを使っている人は簡単に設定できるようですが、無料版で使っている人は、はまち様の記事に書かれている方法で一覧ページを設定できます。

iitaikotoha.hatenablog.com

 おわりに

 以上、僕が記事を作った際に参考になったサイトを、ブログ初心者目線で挙げました。
 ブログ作成に関して自分もまだまだ勉強が必要ですが、これから少しずつ、内容のある見やすい記事を書けるようにしていきたいなぁと思います。

 最後まで読んでいただきありがとうございました。