【はてなブログ】画像やGIFファイルのアップロードに失敗する場合の解決方法

先日、GIFファイルをはてなブログにアップロードしようとしたところ、 「アップロードに失敗しました」とメッセージが出てしまう件がありました。

試行錯誤してどうにかGIFファイルのアップロードに成功しましたが、 同じように画像やGIFファイルのアップロードで困っている人もいると思うので解決方法を紹介します。

画像やGIFファイルのアップロードで「アップロードに失敗しました」と出る

以下の画像のようにファイルをアップロードしようとしたのですが、「アップロード失敗しました」と表示されてしまいました。

アップロードゲージはMAXまでいくのにアップロードが完了せず、しばらく待った後に「アップロードに失敗しました」と出てしまうのでした。

何回かチャレンジしても状況は変わらず、アップロードは失敗してしまいました。

このケースについて、はてなフォトライフのよくあるお問い合わせにも載っていて 他の画像ソフトを使って保存し直すと良いと回答があります。

しかし私がアップロードしたかったのはGIFファイルだったので、保存し直す方法がよくわからなくて困ってしまいました。

アップロードに失敗する正確な原因はわからないのですが、 画像ファイルのサイズが大きかったり、通信回線が弱かった場合に起こる傾向があるように感じていました。

アップロードが失敗しないようにする方法

アップロードに失敗するのはファイルのサイズが大きいケースでよく起きていたので、 画像のサイズを縮小したり、外部Webサービスでファイルを圧縮したりしてみました。

すると無事にアップロードすることができました。

ちなみに私が使ってるGIF圧縮のWebサービスはEZGIF.COMというやつです。

画像圧縮だったらtyny.jpgを使ってます。

また、ある状況ではアップロードできなかったファイルも、 通信回線の強いところで試したところアップロードできたこともありました。

このことから、はてなブログで画像やGIFファイルを利用する際に「アップロードに失敗しました」と出る場合は、 画像サイズを小さくするか圧縮、または通信回線が強いところでアップロードすることをオススメします。

解決方法

• 画像サイズを小さくする
• ファイルサイズを圧縮する
• 通信回線の良いところで試す

おわりに

はてなブログで画像やGIFのアップロードで困っている人に向けて記事を書きました。

無事にアップロードできるように、この記事が参考になればうれしいです。

はてなブログの記事一覧に「前のページ」ボタンを追加する方法【コピペOK】

はてなブログの記事一覧には「前のページ」ボタンが無いのはご存知でしょうか？

実際、「前のページ」ボタンがなくても、ブラウザの履歴で前に戻ればいいだけなのでそこまで困りませんが、 感覚的に「次のページ」ボタンがあるのに「前のページ」ボタンがないのは嫌なので、自分でどうにか追加することにしました。

どうにかイイ感じに「前のページ」ボタンを追加することができたので、 今回は、はてなブログへ「前のページ」ボタンを設置する方法について紹介したいと思います。

「前のページ」ボタンの設置方法

設置方法

「前のページ」ボタンの設置方法ですが、これから紹介するソースコードを はてなブログのフッターHTMLに追加してあげればOKです。

はてなブログの「デザイン」 ⇛ 「カスタマイズ」 ⇛ 「フッタ」と進み、 紹介するソースコードを追加すればOKです。

ソースコード

JavaScriptのソースコードを以下に掲載します。

JavaScriptがわからない人でも理解できるように、 適宜ソースコードにコメントを付記しているので確認してみてください。

仕組みについてですが、URLに?page=という文字があったら記事一覧の2ページ目以降と判断して 「前のページ」ボタンを動的に挿入しています。
「前のページ」ボタンをクリックするとブラウザ履歴の一つ前のページに戻る処理を実行するようになっています。

もちろん、コピペして利用して頂いてOKですので是非ご利用くださいね。

                    
                        File: hatena-pager-prev.html
                        ----------------------------

                        <script type="text/javascript">
                            // 現在のページが記事一覧の2ページ目以降の場合処理実行
                            if (location.search.indexOf("?page=") === 0) {
                                // aタグの作成
                                var a = document.createElement('a');
                                a.addEventListener("click", function(){history.back();}); // クリックすると一つ前の履歴に戻る処理を追加
                                a.innerHTML = "前のページ"
                                a.setAttribute("href", "#"); // hrefがないとスタイルが崩れるので設定（onClickが処理されるよう#を指定）
                                a.setAttribute("rel", "prev"); // seo対策
                                // spanタグの作成（中に作成したaタグを入れる）
                                var span = document.createElement('span');
                                span.classList.add('pager-prev');
                                span.appendChild(a);
                                // classがpagerのdivタグに上記で作成したものを挿入する（classがpager-nextのspanタグよりも前に挿入する）
                                var element = document.getElementsByClassName("pager")[0];
                                element.insertBefore(span, element.firstChild);
                            }
                        </script>
                    
                

設置イメージ

「前のページ」ボタンの設置イメージを以下に載せました。
（スマホでスクリーンショットしたものを載せます）

なお、自分のブログのデザインに合うように、CSSでデザインをカスタマイズしてあります。

参考までに、関連するCSSを以下に掲載します。

                    
                        File: hatena-pager.css
                        ----------------------

                        /* Pager */
                        .pager {
                            position: relative;
                            margin: 2em 0;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-pack: justify;
                                -ms-flex-pack: justify;
                                    justify-content: space-between;
                        }

                        .pager a {
                            color: RGB(68, 153, 187);
                        }

                        .pager a:hover {
                            color: RGB(68, 153, 187);
                        }

                        .pager.autopagerize_insert_before .pager-prev {
                            padding: .5em 0;
                            border: 1px solid #ddd;
                            border-radius: 3px;
                        }

                        .pager.autopagerize_insert_before .pager-prev a {
                            padding: .5em 1em .5em 2em;
                        }

                        .pager.autopagerize_insert_before .pager-prev:before {
                            content: "<<";
                            font-weight: 900;
                            position: absolute;
                            left: .5em;
                            top: .5em;
                            color: RGB(68, 153, 187);
                        }

                        .pager.autopagerize_insert_before .pager-next {
                            padding: .5em 0;
                            border: 1px solid #ddd;
                            margin-left: auto;
                            border-radius: 3px;
                        }

                        .pager.autopagerize_insert_before .pager-next a {
                            padding: .5em 2em .5em 1em;
                        }

                        .pager.autopagerize_insert_before .pager-next:after {
                            content: ">>";
                            font-weight: 900;
                            position: absolute;
                            right: .5em;
                            top: .5em;
                            color: RGB(68, 153, 187);
                        }

                        .pager.pager-permalink .pager-prev {
                            margin-right: .25em;
                            padding: .5em;
                            border: 1px solid #ddd;
                            border-radius: 3px;
                        }

                        .pager.pager-permalink .pager-next {
                            margin-left: auto;
                            padding: .5em;
                            border: 1px solid #ddd;
                            border-radius: 3px;
                        }
                    
                

おわりに

はてなブログの記事一覧に「前のページ」ボタンを設置する方法を紹介しました。

はてなブログの設定として、フッタにJavaScriptを追加するだけなので簡単に設定することが出来ます。

今回紹介したJavaScirptのソースコードは自由にコピペして使って頂きたいので必要な方は是非ご利用くださいね。

はてなブログでnoindexを設定する方法（特定の記事を検索結果に表示させない方法）【コピペOK】

特定の記事を検索結果に表示させない方法は、記事のmetaタグにnoindexを設定すればできます。

今回はそのnoindexの設定方法を、特にはてなブログ向けに紹介します。

noindexについて

noindexとは

noindexとは文字の通りでindexが無い状態のことです。

記事に対してnoidexを設定するとGoogleにindexされなくなります。 indexされない、すなわち検索結果に表示されなくなります。

検索結果に表示させないようにする必要があるのか疑問を持つ人もいるかと思いますが、 noindexを必要に応じて設定する理由は、良質なサイトにするためです。

Googleによるウェブマスター向け公式ブログ では以下の様に記載されています。（抜粋）

• サイト内に同一または類似のトピックについて、キーワードがわずかに異なるだけの類似の記事や完全に重複する記事が存在しないか？
• 記事が短い、内容が薄い、または役立つ具体的な内容がない、といったものではないか？

また、以下のようにも述べられています。

低品質なコンテンツがサイトの一部にしか存在しない場合でも、サイト全体の掲載順位に影響を与えることがあるということにご注意ください。低品質なページを削除したり、内容の薄いページをまとめて役に立つコンテンツに改善したり、もしくは低品質なコンテンツを他のドメインに移動させたりすることが、最終的に良質なコンテンツの掲載順位を改善することにつながります。

これらのことから、Googleから良質なサイトと認識してもらうためには、低品質な記事はむやみに検索結果に載せない方が良いことがわかります。
noindexを適切に使えば、より良質なサイトにすることができるのです。

noidexを使うケース

noindexは以下のケースで設定すると良いです。

• ユーザーにとって価値を提供していない
• 記事自体は必要だが検索結果には表示させなくてよい

上記に該当する記事やページはどれなのか判断が難しいですが、 いろいろ調べてみると以下が対象になり得ます。

• 文章が短かく内容が薄い記事
• サイトマップやカテゴリーページ
• プライバシーポリシーや問い合わせページ

Googleはnoidexを設定すべき対象を明確にはしていないので、noindexを設定すべきか否かについての明確な答えは今のところありません。

例えば、プライバシーポリシーをnoindexにするか否かについても議論があって、 「必要だけど検索には載せなくて良いからnoindexを設定する派」と 「サイトのプライバシーポリシーを確認する際に検索される可能性があるのでnoindexを設定しない派」で別れています。

このように悩む部分はありますが、基本的に「ユーザーにとって価値がない」または「検索に載せるべきものでない」場合にnoindexの設定を検討します。

なお、noindexでもクローラによる巡回は行われるのでnoindexしたページからのリンクは認識されるようです。
クロールすらさせたくない場合はrobots.txtで制御しましょう。

はてなブログへnoindexを設定する

noindexの設定方法

記事やページをnoindexに設定する方法は簡単で 対象のページのhead要素に以下の1行を追加するだけです。

この1行を追加するだけなのですが、はてなブログでは個別のページ毎にhead要素の内容を編集できないため、 一手間必要となります。

はてなブログにnoidexを設定する方法

はてなブログで特定ページのhead要素を編集するには、JavaScriptを用いて動的に追加してあげれば良いです。

JavaScriptのコード自体は記事中に書くことが出来るので、個別のページ毎に設定が可能となります。

技術的なことに詳しくない人やJavaScriptに馴染みがない人にとっては難しいかもしれませんが、 やることは以下のコードをコピペして記事のどこかに貼り付けるだけです。
（クローラに速く認識してもらうために記事の一番上に貼り付けることをオススメします。）

                    
                        File: hatena-noindex.html
                        -------------------------

                        <script type="text/javascript">
                            // 追加するmetaタグの作成
                            var newMeta = document.createElement("meta");
                            newMeta.setAttribute("name","robots");
                            newMeta.setAttribute("content","noindex");
                            // 作成したmetaタグをhead要素内末尾に追加
                            document.getElementsByTagName("head")[0].appendChild(newMeta);
                        </script>
                    
                

掲載したJavaScriptは大きく2部に分かれています。
1部目は追加するmeta要素を作成し、2部目では作成したmeta要素をhead要素内の末尾に追加しています。

なお注意点ですが、はてなブログの「見たまま編集」モードでは利用できません。
紹介したコードはHTMLとして認識してもらう必要があるので、「はてな記法編集」、「Markdown編集」、「HTML編集」モードのいずれかである必要があります。

設定イメージは以下のようになります。

おわりに

はてなブログの個別のページにnoindexを設定する方法を紹介しました。

はてなブログではhead要素を個別に編集することができないので、JavaScriptを用いました。
コピペして記事に貼り付けるだけなので、はてなブログでnoindexの設定が必要な人は利用してくださいね。

はてなブログのHTML編集で目次リンクを設定する方法【コピペOK】

目次

はじめに

当記事の目的

当記事の目的は、はてなブログでHTML編集で記事を書いている人に向けて、 見出しタグから自動で目次リンクを作成する方法を紹介することです。

はてなブログで目次を作成する方法

はてなブログには編集モードが複数ありますよね。

• みたまま編集
• はてな記法編集
• Markdown編集
• HTML編集

はてなブログでは[:contents]と記事に書けば自動で目次を生成してくれます。
しかし、HTML編集だけは[:contents]と書いても目次は作成されません。
はてなブログのHTML編集で記事を書いている場合、目次の作成は個別にコーディングする必要があるのです。

今回紹介するJavaScriptを使えば個別にコーディングする必要はなくなります。
必要のある作業はコピペだけです。

目次のサンプル

当記事の目次も今回紹介するJavaScriptから自動生成しています。
記事の上の方にある目次を見てみてください。
目次の各項目をクリックすると該当の見出しタイトルへジャンプするようになっています。

はてなブログのHTML編集で使えるJavaScript

コピペOKのJavaScript

以下に見出しタグから目次リンクを自動生成するJavaScriptのコードを記載しました。

            File: create-toc.html
            ---------------------

            <!-- 目次を作成する先 -->
            <div id="toc"></div>

            <script type="text/javascript">
                document.addEventListener('DOMContentLoaded', function () {
                    var contentsList = document.getElementById('toc'); // 目次を追加する先(table of contents)
                    var div = document.createElement('div'); // 作成する目次のコンテナ要素

                    // .entry-content配下のh2、h3要素を全て取得する
                    var matches = document.querySelectorAll('.entry-content h2, .entry-content h3');

                    // 取得した見出しタグ要素の数だけ以下の操作を繰り返す
                    matches.forEach(function (value, i) {
                        // 見出しタグ要素のidを取得し空の場合は内容をidにする
                        var id = value.id;
                        if(id === '') {
                            id = value.textContent;
                            value.id = id;
                        }

                        // 要素がh2タグの場合
                        if(value.tagName === 'H2') {
                            var ul = document.createElement('ul');
                            var li = document.createElement('li');
                            var a = document.createElement('a');

                            // 追加する<ul><li><a>タイトル</a></li></ul>を準備する
                            a.innerHTML = value.textContent;
                            a.href = '#' + value.id;
                            li.appendChild(a)
                            ul.appendChild(li);

                            // コンテナ要素である<div>の中に要素を追加する
                            div.appendChild(ul);
                        }

                        // 要素がh3タグの場合
                        if(value.tagName === 'H3') {
                            var ul = document.createElement('ul');
                            var li = document.createElement('li');
                            var a = document.createElement('a');

                            // コンテナ要素である<div>の中から最後の<li>を取得する。
                            var lastUl = div.lastElementChild;
                            var lastLi = lastUl.lastElementChild;

                            // 追加する<ul><li><a>タイトル</a></li></ul>を準備する
                            a.innerHTML = value.textContent;
                            a.href = '#' + value.id;
                            li.appendChild(a)
                            ul.appendChild(li);

                            // 最後の<li>の中に要素を追加する
                            lastLi.appendChild(ul);
                        }
                    });

                    // 最後に画面にレンダリング
                    contentsList.appendChild(div);
                });
            </script>
            

はてなブログでの使い方

以下の２つだけです。基本的にコピペすればOKです。

1. JavaScript（<script>〜</script>）を記事内の一番下にコピペする
2. 目次が生成される先として<div id="toc"></div>を設置する

なお、ご存知の通り、記事を表示するタイミングでJavaScriptで目次リンクを生成しているので少なからず描画に時間がかかります。
描画時間をかけたくない場合は今回紹介したJavaScriptで目次を生成し、生成されたものをコピペして使えばいいと思います。

おわりに

今回ははてなブログの記事をHTML編集で書いている人に向けて、目次リンクを自動生成するJavaScriptを紹介しました。

目次リンク作成に困っていた人の役に立てたらうれしいです。

見出しタグから入れ子の目次を自動作成するJavaScriptを作りました【コピペOK】

目次

はじめに

当記事の目的

ブログなどの記事で目次があると記事の全体像がわかりやすいですよね。
特に長い記事だと目次があると助かりますよね。

今回はそんな便利な目次を自動作成してくれるJavaScriptを紹介し、 簡単に目次を作れるようになってもらいます。

目次のサンプル

実際に作成された目次のサンプルを当記事にも反映してみました。
記事の一番上部にあるのがJavaScriptで自動作成した目次です。

（いつも私が書く記事ではこんなに章分けをしませんが、今回は例として多めに分けています。。。）

見出しタグから目次を作成する方法

見出しタグから目次を作成する方法として、JavaScriptを用います。

JavaScriptを使用して記事中の見出しタグ（h2タグ、h3タグ）を抽出し、それぞれの内容から目次を自動作成します。

実際に作成したJavaScriptのコード

以下に見出しタグから目次を自動生成するJavaScriptのコードを記載しました。

            File: create-toc.html
            ---------------------

            <!-- 目次を作成する先 -->
            <div id="toc"></div>

            <script type="text/javascript">
                document.addEventListener('DOMContentLoaded', function () {
                    var contentsList = document.getElementById('toc'); // 目次を追加する先(table of contents)
                    var div = document.createElement('div'); // 作成する目次のコンテナ要素

                    // .entry-content配下のh2、h3要素を全て取得する
                    var matches = document.querySelectorAll('.entry-content h2, .entry-content h3');

                    // 取得した見出しタグ要素の数だけ以下の操作を繰り返す
                    matches.forEach(function (value, i) {
                        // 見出しタグ要素のidを取得し空の場合は内容をidにする
                        var id = value.id;
                        if(id === '') {
                            id = value.textContent;
                            value.id = id;
                        }

                        // 要素がh2タグの場合
                        if(value.tagName === 'H2') {
                            var ul = document.createElement('ul');
                            var li = document.createElement('li');
                            var a = document.createElement('a');

                            // 追加する<ul><li><a>タイトル</a></li></ul>を準備する
                            a.innerHTML = value.textContent;
                            a.href = '#' + value.id;
                            li.appendChild(a)
                            ul.appendChild(li);

                            // コンテナ要素である<div>の中に要素を追加する
                            div.appendChild(ul);
                        }

                        // 要素がh3タグの場合
                        if(value.tagName === 'H3') {
                            var ul = document.createElement('ul');
                            var li = document.createElement('li');
                            var a = document.createElement('a');

                            // コンテナ要素である<div>の中から最後の<li>を取得する。
                            var lastUl = div.lastElementChild;
                            var lastLi = lastUl.lastElementChild;

                            // 追加する<ul><li><a>タイトル</a></li></ul>を準備する
                            a.innerHTML = value.textContent;
                            a.href = '#' + value.id;
                            li.appendChild(a)
                            ul.appendChild(li);

                            // 最後の<li>の中に要素を追加する
                            lastLi.appendChild(ul);
                        }
                    });

                    // 最後に画面にレンダリング
                    contentsList.appendChild(div);
                });
            </script>
            

コードの説明

jQueryなどは使わずに純粋なJavaScriptで動くように書きました。なので、外部ライブラリは特に必要ではありません。

また、JavaScirptがわからないよって人でも、何らかのコードを読める人であれば解読できるように多めにコメントをつけておきました。
コメントを読んでもらえればやっていることはわかると思います。

必要であればコピペして適宜アレンジして使ってください。

簡単なコードの流れは以下となっています。

• 記事中のh2、h3タグを抽出する
• 抽出したタグ毎に目次の項目を作成していく
  • aタグで見出しタグに飛べるように見出しにidを設定する
  • 目次にaタグ要素を追加する
• 作成した目次を記事にレンダリング（表示）する

目次自動作成のJavaScriptで出来ること

紹介したJavaScriptで出来ること

紹介したJavaScriptを用いれば、記事内のh2とh3タグを自動で探してそれぞれの内容を元に目次を作成します。

作成する際はaタグを利用し、クリックすれば該当の見出しタグに飛ぶようにしてあります。
なお、そのために見出しタグ(h2、h3タグ)でidを持っていないものへは自動でidを付与しています。

また、作成される目次はh2タグとh3タグの見出しで入れ子になるようしてあるので、記事の階層がわかるようになっています。

紹介したJavaScriptの使い方

今回紹介したJavaScriptは以下の手順でご利用ください。

1. JavaScript（<script>〜</script>）を記事内の一番下にコピペする
2. 目次が生成される先として<div id="toc"></div>を設置する

なお、JavaScriptでh2タグ、h3タグを探す際に.entry-contentclass配下の見出しタグを探すように設定しているので、 適宜修正してご利用ください。
（私ははてなブログでブログを書いているので、.entry-contentclass配下を探す設定にしています。）

該当のコードは以下となります。
var matches = document.querySelectorAll('.entry-content h2, .entry-content h3');

おわりに

今回は見出しタグから自動で目次を作成するJavaScriptについて紹介しました。

HTMLから自動で目次を作成したい場合には使えると思うので、是非ご利用ください。

はてなブログでアイコンを使う2通りの方法（デフォルト ＆ Font Awesome 5）

はてなブログでアイコンを使いたい場合がありますよね。
よく使われている方法を2通り紹介します。

1. はてなブログがデフォルトで読み込んでいるアイコンを使用する方法
2. Font Awesomeを利用する方法

なお、細かいことを言うと、はてなブログのデフォルト読み込みのアイコンを利用したほうがページ読み込み速度は若干早いと思いますが、 Font Awesomeの方がアイコンの数が圧倒的に多いので、私はFont Awesomeしか利用していません。

はてなブログがデフォルトで読み込んでいるアイコンを使用する方法

はてなブログはデフォルトでいくつかアイコンを読み込んでいるので、すぐに利用できます。
もちろん、はてな記法、Markdown、htmlのいずれでも利用できます。
以下のようなアイコンを利用できます。

                
                    File: hatena-icon.html
                    ----------------------

                    <!-- はてなのアイコン -->
                    <i class="blogicon-hatenablog"></i>
                    <!-- 人物のアイコン -->
                    <i class="blogicon-account"></i>
                    <!-- ツイッターのアイコン -->
                    <i class="blogicon-twitter"></i>
                
            

詳しい使用方法については以下のサイトがとても詳しくてわかりやすかったので参照してみてください。

orefolder-sample.hatenablog.com

Font Awesomeを利用する方法

はてなブログでのFont Awesomeを利用するには、詳細設定の「headに要素を追加」欄にコードを追加をする必要があります。
なお、今回紹介するのは現時点（2018年4月）最新版のFont Awesome 5の設定方法です。無料でたくさんのアイコンが使用できます。
最新版はアイコンがとても探しやすくなっているのでオススメです。私も最新版を導入しています。

はてなブログへの設定は以下をコピーして詳細設定の「headに要素を追加」欄に貼り付けるだけなのでとても簡単です。

                
                    File: font-awesome-5.html
                    -------------------------

                    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
                
            

使い方ですが、以下のサイトから気に入ったアイコンのコードをコピーして貼り付けるだけです。

Font Awesome : https://fontawesome.com/icons

アイコンの拡大・縮小もhtmlのclassに設定を加えるだけで簡単にできます。

                
                    File: font-awesome-5-example.html
                    ---------------------------------

                    <!-- 75%に縮小（fa-xsをつける） -->
                    <i class="fas fa-camera-retro fa-xs"></i>
                    <!-- 87.5%に縮小（fa-smをつける） -->
                    <i class="fas fa-camera-retro fa-sm"></i>
                    <!-- 通常版 -->
                    <i class="fas fa-camera-retro"></i>
                    <!-- 133%に拡大（fa-lgをつける） -->
                    <i class="fas fa-camera-retro fa-lg"></i>
                    <!-- 2倍に拡大（fa-2xをつける） -->
                    <i class="fas fa-camera-retro fa-2x"></i>
                    <!-- 5倍に拡大（fa-5xをつける） -->
                    <i class="fas fa-camera-retro fa-5x"></i>
                    <!-- 10倍まで拡大可能 -->
                
            

以上で、はてなブログのデザインや記事にアイコンを使う2通りの方法でした。
アイコンをうまく活用して素敵なブログにしたいですね。

伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール

posted with ヨメレバ

高橋 佑磨,片山 なつ 技術評論社 2016-08-05

Amazon

Kindle

楽天ブックス

楽天kobo

はてなブログにソースコードを貼る方法（Gistを利用）

はてなブログにhtmlやcssなどのソースコードを貼り付けたいときありますよね。
はてな記法、Markdownそれぞれにも記載方法がありますが、どうせならどの記法にも対応できて、かつ、保存しておけたらうれしいですよね。
Gistという無料のソースコード共有サービスを利用すれば、それができます。

今回はGistを利用するまでの流れと、はてなブログの記事に貼り付ける方法についてレクチャーします。
なお、Gistでソースコードを貼り付けると、以下のように表示されます。

            
                File: gist.html
                ---------------

                <div>
                    <p class="bold">
                        こんな感じに表示されます。
                    </p>
                </div>
            
        

Gistの利用方法

バージョン管理共有サービスであるGithubの中の一つがGistなので、まずはGithubのアカウントを作成します。
以下のリンクからGithubのページに飛ぶことができます。
アカウントが作成できたらすぐにGistを利用することができます。

github.com

Githubアカウントの作成

以下の図に沿って進めてください。

まずはGithubのアカウントを作成します。ユーザー名、メールアドレス、パスワードを入力してアカウントを作成します。

アカウント作成すると、登録したメールアドレス宛に確認メールが届くので、「Verify email address」をクリックして確認を済ませましょう。

アカウントの設定画面では、フリープランでGithubを利用することを選択して簡単なアンケートに答えます。

Gistの作成方法

gist.github.com

アカウントが作成できたら、すぐにgistの作成ができます。
画像の流れ通りに進めると、下の画像のようにGithubのリポジトリの作成をするか問われますが、Gistの利用だけであれば作成は不要です。
Gistの作成は「New gist」からできます。

Gistの作成は、「拡張子付きのファイル名の入力」と「内容の入力」の２つだけです。
作成したGistの説明については、記載してもしなくても大丈夫です。

Gistの作成ができたら、貼り付け用のスクリプトがあるのでコピーしてhtmlに貼れば、作成したGistを表示することができます。

はてなブログにGistを貼り付ける方法

はてなブログの記事作成画面ではGistを貼り付ける機能がついているので、それを利用すればすぐに貼り付けることができます。
Githubのアカウント名を入力すれば作成したGistの一覧を表示してくれるので、選択して貼り付ければ良いだけです。

以上がGistの利用方法と、はてなブログへの貼り付けでした。

はてなブログにBootstrap 4を設定する方法

ブログをやるならデザインはかっこよくしたいですよね。
デザインを編集する際には、ブログを表示するデバイスの画面のサイズに応じて編集（レスポンシブ対応）しないと、パソコンではかっこよく見えるけどスマホではそうではないなどと困ったことが起こりやすいです。
そんなとき、BootstrapというCSSフレームワークを導入すれば、html上でクラスを指定するだけで、デバイスに応じたレスポンシブなデザインにすることができます。
今回はそのBootstrapをはてなブログに設定する方法についてレクチャーします。

設定するのは現時点(2018年4月)で最新のBootstrap 4.0.0です。
なお、Bootstrapのバージョンが上がる度にこの記事を更新していきます。

この記事を読めばはてなブログへBootstrapを設定できますが、より詳しく知りたい方は本家のサイトもご覧ください。

getbootstrap.com

はてなブログへの設定作業はとても簡単で、大きく「headに要素を追加」と「footerに要素を追加」の２つです。3分くらいでできると思います。

はてなブログのheadに要素を追加

はてなブログにBootstrapのCSSを読み込ませるため、headに以下の要素を追加します。
設定 > 「詳細設定」タブ > 「検索エンジン最適化」項目 > 「headに要素を追加」欄に要素を追加します。

                
                    File: bottstrap-css.html
                    ------------------------

                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
                
            

追加したら、必ず変更の保存を忘れないようにしましょう。

はてなブログのfooterに要素を追加

はてなブログにBootstrapのJavascriptを読み込ませるため、footerに以下の要素を追加します。
設定 > 「デザイン」ボタン > スパナマークのタブ > 「フッタ」欄に要素を追加します。

                
                    File: bootstrap-js.html
                    -----------------------

                    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
                
            

こちらも追加したら、必ず変更の保存を忘れないようにしましょう。
これにて設定が完了です。あとは記事でもデザインでもBootstrapのクラスを利用することが可能となります。

はてなブログをレスポンシブデザインモードにする

せっかくBootstrapが使えるようになったので、はてなブログをレスポンシブデザインモードに設定しておきましょう。
なぜなら、html上でBootstrapのclassをうまく利用すれば、一つのhtmlでパソコンとスマホの両方に対応できるからです。
はてなブログのデザインでは、パソコンとスマホそれぞれに設定することが可能ですが、それをやめて一括でデザイン設定するようにしたほうが楽なので私はそうしてます。

設定はすごく簡単です。
設定 > 「デザイン」ボタン > スマホマークのタブ > 「詳細設定」項目の「レスポンシブデザイン」にチェックする。
これだけです。

Bootstrapを自由自在に使えるようになれば、デザインの調整をする際にとても便利です。
是非、Bootstrapをどんどん利用していきましょう。

CSSフレームワーク Bootstrap入門

posted with カエレバ

掌田津耶乃 秀和システム 2018-02-22

Amazon

楽天市場

Yahooショッピング

はてなブログにGoogleアナリティクスを設定する方法

ブログを運営するならどれくらい自身のブログにアクセスされているか気になりますよね。
そこで今回は、はてなブログにGoogleアナリティクスを設定する方法について写真付きでレクチャーします。
はてなブログには元々アクセス解析の機能が備わっていますが、Googleアナリティクスではより詳細にアクセス解析することができます。

大きくGoogleアナリティクス側の設定と、はてなブログ側の設定を行います。

• Googleアナリティクスの準備
• はてなブログへGoogleアナリティクスのトラッキングIDを設定

Googleアナリティクスの準備

まずは、はてなブログに設定するGoogleアナリティクスのトラッキングIDの取得方法をレクチャーします。
以下のURLからGoogleアナリティクスのページに飛ぶことができます。

https://analytics.google.com

「お申し込み」ボタンから進み、アカウントの情報を入力していきます。

アカウントの情報を入力していきますが、入力に失敗してしまっても大部分は後から変更可能なので安心してください。

• トラッキングの対象：ウェブサイト
• アカウント名：なんでもいい（後から変えられます）
• ウェブサイト名：なんでもいい（後から変えられます）
• ウェブサイトのURL：はてなブログのURL（後から変えられます）
• 業種：なんでもいい（コンピュータ、電化製品とかでOK）（後から変えられます）
• レポートのタイムゾーン：日本（後から変えられます）

データ共有の設定では、特にこだわりが無ければすべてチェックした状態で「トラッキングIDを取得」ボタンを押します。

最後にGoogleアナリティクス利用規約をよく読み、良ければ「同意」ボタンを押します。

すると、トラッキングIDを取得できるので、コピーして、はてなブログへの設定に進みます。

はてなブログへGoogleアナリティクスのトラッキングIDを設定

Googleアナリティクスで取得したトラッキングIDを自分のはてなブログに設定します。
はてなブログの 設定 > 詳細設定 の「Google Analytics埋め込み」の欄に、先程コピーしておいたトラッキングIDを貼り付けます。
貼り付けができたら、「変更する」ボタンを押して設定を反映します。

以上で、「はてなブログにGoogleアナリティクスを設定する方法」でした。
これで、Googleアナリティクスのページでアクセス解析ができるようになります。