はてなブログでは、ソースコードなどを構文（シンタックス）に応じて色付け（ハイライト）表示する シンタックスハイライトに対応しています。今回、シンタックスハイライトに関する改善を行いました。 jsx, tsx形式のシンタックスハイライトの追加 JavaScript形式のシンタックスハイライトの改善 jsx, tsx形式のシンタックスハイライトの追加 jsx 及び tsx 形式に新たに対応しました。 はてな記法、Markdownでのハイライト方法は以下のとおりです。 はてな記法 >|jsx| ...ソースコードを記述する... ||< Markdown ```jsx ...ソースコードを記述する... ```詳しい利用方法やその他の形式の対応につきましては、下記のヘルプをご参照ください。 JavaScript形式のシンタックスハイライトの改善 JavaScriptのシンタックスハイライトの改善

今回は、はてなブログでCSSデザインを使う８つの方法 を紹介します！ はてなブログにCSSデザインを追加する方法はいくつかありますが、今回はその中でも、比較的簡単な、はてなブログの設定項目からCSSを追加する方法 を紹介します。 Googleタグマネージャーを使用した設定方法もありますが、そちらは次回記事で紹介したいと思います。 まずは、今回紹介する「はてなブログの設定項目でCSSを使う方法」で、とりあえず試してみるのがオススメです！ 目次 はてなブログにCSSの追加してみる！ CSSを追加可能な場所一覧 おすすめの設置場所 サンプルCSS（動作チェック用） 設定方法【設置場所別】 headに要素を追加 記事中 記事上 記事下 ヘッダ フッタ サイドバー デザインCSS 動作チェック サンプル投稿（動作チェック用） クラス名の指定について ブログ構成要素のカスタムについて スマホ表示でのC

ブログを書くようになって数年になりますが、最近になってやっとSNSの良さに気が付いたワタシです。それで、いろいろ複数のSNSを使ったり試したりしています。 でも、あまりたくさんのものに手を出すと、管理も大変ですよね。それで、ブログも書けるしSNSとしても使える、noteとtumblrとの使い分けについて、私が今のところ思っていることをまとめておこうと思います。 ブログとしてもSNSとしても使えるウェブサービス noteとtumblrは、ぜんぜん違うものですが、ブログとしても使えて、SNSとしても利用できるという点においては、共通しているかな、と思っています。 私は両方使っていますが、ここ数日、やたらとはまっているのがtumblr（タンブラー）です。 タンブラーは、少し前からアカウントを持っていましたが、ツイッターで仲良くなった方に、何かとアドバイスいただき、最近またカスタマイズにハマってい

すぐに忘れてしまうので、備忘録として書いておきます。 別タブでリンクを開くようにする 別タブでリンクを開くようにする場合、 <a href="" target="_blank"></a> を使用する。 (使用例) <a href="Webサイト等のURL/" target="_blank">Webサイト名等</a> 枠線を書く そして、上のコードを囲った枠については こちら↓ を参考にしました。 コピペで使える簡単スタイル！「コピペ枠わく」 例では、グレーの枠線です。 <div style="border: 1px solid #cccccc; padding: 10px;"> ここに文章を書く </div> HTML&CSS初心者におすすめの学習書 いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA) 作者: 狩野祐東 出版社/メーカー: SBクリエイテ

今回は、はてなブログで「トップに自動スクロールするボタン」を設置する方法について紹介します。 このボタンをクリックすることで、ページの一番上までスクロールさせることができます。 記事のボリュームが大きくてスクロールするのが大変な記事でも、簡単にトップへ移動することができるようになるのでチェックしてみてください。 はじめに 今回は、久しぶりに「はてなブログカスタマイズ」の記事です。 内容は「はてなブログでトップにスクロールするボタンを設置する方法」 実際に設置してみるとこんな感じになりました。 こちらのボタンをクリックすることで、記事を読み進めていても「一瞬で1番上まで自動スクロールさせる」ことができちゃいます。 縦長のページに設置しておくことで、ユーザーの利便性がアップするので参考にしてみてください。 jQueryを記述する 今回の処理では「jQuery」を使用しました。 はてなブログでj

こんにちはユレオです。 本日の記事はブログ運営者に向けた内容で、ブログをしていない方からすると「？」という内容です。 私は2017年6月にブログ運営を始め、現在1年4か月目に入り、ようやくブログ運営初心者を脱却してブログ中級者になったくらいかなー　という身なので、ブログ運営について深いお話はできないかもしれませんが、お付き合いください。 本日はブログ運営者が避けては通れない「記事のリライト」についてのお話と、当ブログの先々月より行ったリライトの実験結果についてお話したいと思います。 ※これからアフィリエイト始めたい方は無料登録で報酬アップや特別報酬もある「もしもアフィリエイト」がおすすめです。 ブログ記事を「リライトする」とは何のことか？リライトすることでどんな効果が得られるの？ ブログ運営をしていると「リライト」という言葉を目にすることがあるかと思います。 ところで「リライト」って何？な

@setsuyakufufuをフォロー にほんブログ村 節約料理 お問合わせフォームを作る意味とは？ わたしが書いた寄稿記事をご紹介！ インタビューやサイトレビューの寄稿記事 料理の寄稿記事 節約術の寄稿記事 お問合わせフォームの作り方とは？ ステップ1　Googleフォームにアクセス ステップ2　フォームを選択する ステップ3　内容を入力する ステップ4　追加項目を入力する ステップ5　自動返信を調整する ステップ6　回答のシートを作成する ステップ7　通知ルールの設定 ステップ8　はてなブログに「お問合わせフォーム」を導入する ステップ9 正しく動作するか確認する まとめ お問合わせフォームを作る意味とは？ メールフォームを作成しておくと、ブログの読者と簡単にコンタクトを取ることができます。 読者の中には、企業の方もおられます。わたしのブログにも、幾つもの企業から問い合わせがありました

こんにちは！わたMANです。 皆さんはブログのカスタマイズにどれだけ力を入れているでしょうか？ ブログのカスタマイズによってはリピーターや読者が増えて、PV数の増加に繋がります。 私が今までやってきたブログのカスタマイズは下記の記事からご覧いただけます。 www.herawata.com 私は正直、そこまでブログのデザインに気を遣っている方ではありませんでした。しかし、そのせいでだいぶ今まで損をしていたのかもしれないと感じています。 今回はブログのスマホ画面下に人気記事・カテゴリなどを表示するメニューバーを設置した話について書いていきたいと思います。 過去にタイトル下にメニューバーを設置した話 スクロールしても追従するメニューバーを設置 画面下に複合メニューバーが表示されるようになった 画面下のメニューバーを設置するきっかけをくれた人物とは？ まとめ 過去にタイトル下にメニューバーを設置し

従来では、Webサイトに訪れるユーザー向けサイトマップのみを実装することが主流でした。ユーザー向けサイトマップには「自分がWebサイト上のどこにいるのか」「どのようなページが用意されているのか」といった要素が含まれており、別名“HTMLサイトマップ”とも呼ばれています。 しかし、近年では検索エンジン向けの“XMLサイトマップ”もセットで導入しているWebサイトが大半です。XMLサイトマップを使うと、Googleなどの検索エンジンに各ページ構造を理解してもらえるため、クローラビリティが向上してSEO効果も高まるとされています。 この記事では、ユーザーや検索エンジンに好まれるサイトマップとはどのようなものか、サイトマップの効果や作り方をご紹介します。 最後まで読み終わる頃には、自社サイトの検索順位を上げる効果的なサイトマップを作成できるようになっているでしょう。 サイトマップを作成する重要性と

どーも！がるしーです 最近話題の「Pinterest（ピンタレスト）」という画像取集サービスが面白くてハマっています！ Instagramのような画像メインのSNSのようですが、その違いは画像をピン（保存）してブックマークできるという特徴があります 自分が過去に検索したワードと関連性の高い画像や、自分が登録した興味のあるジャンルから画像を閲覧することができていいね！したりすることもできるんです 本日はそんな「Pinterest（ピンタレスト）」をはてなブログで紹介したいときに使える 記事に埋め込むやり方をまとめてみました！ はてなブログで「Pinterest（ピンタレスト）」を埋め込む方法 ①埋め込みたいピンをクリックして選択 ②埋め込むボタンを押してウィジェットビルダーを開く ③コードを設定と記事に張り付ける はてなブログで「Pinterest（ピンタレスト）」を埋め込む方法 まずピンタ

独自ドメインとは「はてなブログPro」でブログ運営をされている方を対象にした内容で、多くの方が待ち望んでいた機能でもあります。 何故多くの方が待ち望んでいたかというと、Googleは2018年7月リリースの「Chrome 68」からHTTPのサイトにはもれなく「保護されていません」と表示するようになるとのアナウンスがありました。 その為、多くの方がSSL化を行いHTTPS配信への対応を進められていますが、対応する項目が多くトラブルも発生しているかと思います。 そうしたトラブルの中でHTTPS配信にした後に実際の画面は問題が無いのに、「デザイン」画面で見た時だけ崩れるといった方はおられないでしょうか？ これはテーマストアからデザインテーマをダウンロードして設定している方に見られる症状ではないかと思います。 本日はSSL化とHTTPS配信設定をした後に、はてなブログのデザイン編集画面が崩れた方

はてなブログの独自ドメインも、ついにHTTPSに対応したので、昨日一日かけてHTTPSにして修正した。 HTTPS化のやり方については超簡単で、ダッシュボードの「設定」→「詳細設定」の中にある「HTTPS配信を有効にする」を押すだけだ。 それだけなんだけれど、下のような注意書きが出てくるので、めちゃビビっていて、色々と調べてから押そうと思っていた。 この辺りは調べると、ありがたいことに詳しい手順を書いてくれている人がたくさんいる。 公開しているハテブの「HTTPS」タグがついているものが参考にさせてもらった記事なので、参考にしたいかたはどうぞ……どうぞって自分の記事じゃないのだが。 コードのことなんて右も左も分からない自分でも何とか二、三時間でHTTPSに移行できた。ありがたや～。 ここからは自分がHTTPS化した過程で、単なる備忘録だ。 急きょ仕入れたにわか知識によると、「HTTPS化」

「http://」で始まるSSL化していないサイトは2018年7月よりは「保護されていません」と警告が表示される そもそもHTTPSとは何のことなのでしょうか？ すごくざっくりと言えば「通信が暗号化」がされているか否かを示すもので、WebサイトのURLの冒頭が「https://」ならば、そのwebサイトやwebを見るための機器やブラウザでしっかりと「通信が暗号化」されていることを示します。 もっと分かりやすく言えばネットでの情報が傍受されたりハッキングの被害を防いだりとインターネットを利用するうえでより安全に使用できるようになるといった技術です。 そして、2018年7月より「http://」で始まるSSL化されていないwebサイトは「保護されていません」という警告を出すとgoogle様はおっしゃっているわけです。 ちなみに「保護されていません」と出るというのがどんな感じなのかというと、ＵＲ

今回は、CSSを使って「特定のsrcを持つ画像」だけ見た目を調整する方法を紹介します。 特定のドメインだけ見た目をカスタマイズしたり、任意の文字列が入っていれば調整できました。 WordPressやはてなブログのカスタマイズで活用できるので、ぜひ試してみてください。 はじめに 今回紹介する内容は「特定のsrcを持つ画像だけにCSSを割り当てる方法」です。 HTMLで画像を設置しようとすると、以下のように記述すると思います。 <img src="http://画像のURL.png"> srcで表示したい画像のURLを指定しているのですが、実は、CSSでは「srcに入っている文字列」で条件分岐ができちゃうんです。 同じような方法を使えば「href」などの属性でも条件を作れるので試してみてください。 特定の画像だけに割り当てるCSS では実際に、特定の画像だけで動作するCSSをチェックしていきま

はじめに はてなブログの高速化の記事。 はてなブログは遅いらしい 多くのブロガーさんが言及してますが、はてなブログは処理が遅いらしいです。 パソコンでは問題ありませんが、スマホからのアクセスが急増した近年に於いては、SEOの観点からも放置できない課題になっています。 と言っても、ユーザーにどうこう出来る部分って少ないんですよね。 効果が期待できるのは、画像の圧縮くらいでしょうか。 有名なgoogleのページスピードで計測すると、画像圧縮前後で大きく改善する事が報告されています。 PageSpeed Insights 僕らが出来ることは少ないけれど、それでももがいてみました。 その施策を纏めます。 尚、施行前後でスピードを計測してはいません。 なんとなく早くなったな～と体感してる位です。 効果のほどは不明ですので、その点ご了承下さい。 画像の圧縮とアップロード時の画質の調整 最も効果が大きい

どうも、みーさんです。 はてなブログで、ブログの見栄えを良くしたい！ ここでは使える！と思ったブログのカスタマイズやについて紹介していきます。 良いなと思ったら、使ってみてくださいね。 はてなブログでマーカーを使ってカスタマイズ はてなブログの見出しを変える はてなブログでオシャレなプロフィールを設置する はてなブログで吹き出しをしてみたい はてなブログでカテゴリー一覧を設置 クラウド風カテゴリー 階層化カテゴリ はてなブログでこの記事〇分で読めます表記がしたい まとめ はてなブログでマーカーを使ってカスタマイズ これや これ こういうマーカーライン引いたようなのを、ブログで再現できます。 私が他のサイトさんで見かけて、いいなと思って、早速取り入れました。 gadgerepo.com 大事な部分にマーカーを引くと、最後まで読んでもらえる確率が上がります。 はてなブログの見出しを変える 見出

はてなブログのテーマ「510」を公開したので、その紹介をいたします。 「510」はこのブログに使われているテーマのほぼクローンです。 どのような動作をしているのかは、テーマストアのデモページか、このブログを見てもらえればと思います。 特徴 改変元 デザイン PCでの表示 スマホでの表示 具体的に何が優れているのか マウスオーバーの挙動をPCのみに限定 スマホでの表示領域を広く 広告収益の最適化 モバイル優先のナビゲーション 関連リンク フィードバック 特徴 このブログテーマの特徴は「モバイルからのユーザービリティに特化したレスポンシブデザイン」であることです。 レスポンシブデザインとは、PCでもスマホでも、それぞれの端末に応じて最適なデザインを提供するものです。 このデザインの特徴としては、一度設定を行えば、PCでもスマホでも同じコンテンツとなるので、ブログ管理のコストを下げることができま