はてなブログで強調表示の表現をCSSカスタマイズしてみます。 はてなブログテーマInnocentの強調表示 斜体（イタリック体）による強調は日本語には合わない 外部CSSファイルにカスタマイズ内容を記述する 強調表示の使い過ぎに注意 はてなブログテーマInnocentの強調表示 普通に使うのはemタグとstrongタグです。この他にmarkタグを使用することもあります。 はてなブログではInnocentというテーマを使っていますが装飾はミニマムです。 emタグは斜体（イタリック体）で表示されるのみです。字が斜めに傾いて表示されます。 斜体（イタリック体）による強調は日本語には合わない この斜体というのが曲者で、もともと欧米の書体の強調表示が元になっています。 なので日本語の強調表示に斜体を当ててみても今一つ強調しているようには見えません。アルファベットなどの欧米書体の中で使う分には良いので

クリックされやすいリンクの色はどんな色でしょうか？ 大抵のリンクは青色をしていますが、その青色も調べてみると実にさまざまな種類があることが分かりました。 主だった検索エンジンやブログサービスなどの青色リンクの色を比較して独自テーマ制作の参考にしていきます！ リンクの色 CSSカスタマイズで手間いらず 何か参考になるリンクはないか？ 2019年リンク色の調査結果 大手の検索エンジンでの検索結果の表示やブログサービス 大手ニュースサイトやブログサービス ターゲットリンクの色を考える まとめ リンクの色 今回はクリックされやすいリンク色についてトコトン考えてみましょう。 まぁまずはリンクは青色ってことでいいですよね。 リンクの色を赤にしても誤認されるだけですからね。 特にココゾというターゲットリンクは誤認されないように注意することが必要です。奇をてらう必要はありません。 じゃあ次に、どんな青色だ

一年の計は元旦にありということなので2019年の計画を立ててみます。 はてなブログに関することだけでなく少し私的なことも含めています。 この一年間でやりたいことを書いていくと頭も整理されてきますのでお正月の間に計画を立てるのはすごくお勧めですよ！ はてなブログの計画 週一ペースでブログ記事を書いていく オリジナルテーマの作成 Googleアドセンスの審査通過 はてなブログカスタマイズ 私的な計画 機械学習の勉強をする ドイツ語の学習 スイーツと温泉 グルメと美術館 まとめ はてなブログの計画 2018年の中ごろにはてなブログを始めました。 20記事程度書いたところで、はてなブログProに移行し、更に独自ドメインも取得しました。 以後半年ほどの間に50記事を書いてきました。 週一ペースでブログ記事を書いていく ブログ記事を毎日書くのはとうに諦めています。 それだけの時間が取れないこともありま

年末になったので、はてなブログの大掃除をしてみました。 半年ほどの間に50本と少々の記事をアップしてきましたが、はてなブックマークのホットエントリ入りも果たすことができ、読者の数も順調に増えてきました。 ひとつの区切りとしてブログの中身を見直し、手を入れるべきところには手を入れてメンテナンスをしてみました。 ご参考にしていただければ幸いです。 ブログのバックアップ 普段からマークダウン記法でローカルに記事を書く方法 ブログ大掃除（記事の削除） 今年書いたブログ記事を読み直してみる ブログのバックアップ 大掃除の前にブログのバックアップを取っておくことをお勧めします。 はてなブログの場合のバックアップ方法を記載しておきます。 ダッシュボードから「設定」を選びます。 「詳細設定」のタブをクリックします。 スクロールして「エクスポート」の項目にある「記事のバックアップと製本サービス」のリンクをク

Chromeブラウザの拡張機能を使っていますか？ とても便利でお勧めしたいChrome拡張を紹介します。 Web開発する場合にお役立ちのものやSEO対策用など10個の拡張機能をリストアップしてみました。 はてなブログを運用する方に便利なものも最後にご紹介します！ Hover Zoom+ Roomy Bookmarks Toolbar CSSViewer WhatFont ColorZilla HTML5 Outliner headingsMap HTMLエラーチェッカー Wappalyzer Hatena Bookmark はてなのお知らせ まとめ Hover Zoom+ まず最初にご紹介するお勧めのChrome拡張はHover Zoom+です。 chrome.google.com これには随分とお世話になっています。 WEBサイトで表示されている画像にカーソルを当てることで拡大したものを

はてなブログをマークダウン記法で書く方法を網羅的に調べます。 どのようなHTMLタグに変換されているのかをきちんと調べてテーマ制作の参考にしようと思います。 更に、ツールボックスを使った場合に挿入される内容などもこの機会に調べておきます。 はてなブログをマークダウン記法で記述する場合の参考にしていただければ幸いです。 見出し 見出しレベル1（H1) 見出しレベル2（H2) 見出しレベル3（H3) 段落と改行 強調表示 リンク 画像 リスト 箇条書きリスト 順番付きリスト 引用（ブロッククウォート） コード コードブロック テーブル 水平線 ツールバー 見出し 大見出し 箇条書き 番号付きリスト リンク 続きを読む 引用 目次 脚注 太字 斜体 打消し アンダーライン 文字の大きさ 文字色 まとめ 編集サイドバーからの挿入 写真を投稿 過去記事貼り付け 引用貼り付け 見出し 見出しを書く時は

Macは使いにくいという記事が溢れています。 特にWindowsからMacに乗り換えた方の使いずらいという記事が目立ちます。 前回の記事で使い勝手を比較した際に、これは単なる「慣れの問題」と書きました。 しかし深く考えてみるとそこには単に慣れの問題にとどまらない重要な事実（思想）があることに気付きました。 今回は独自視点でMacの使いにくさについて掘り下げて考えていきます。 Macとウインドウズの比較 Macが使いにくいという記事が溢れていた！ Macでもカットアンドペーストができるようになった！？ Macでカットアンドペーストする方法 Macの本質と二面性 MacのGUI MacのCUI Macの二面性 Windowsユーザはどうなのか？ Macとの正しい付き合い方？ Mac使いは嫌われないよう注意 Macのカットアンドペーストの謎が解けた！ じゃあなぜカットアンドペーストのショートカッ

今回はウィンドウズとMacの比較を行います。 どちらを選ぶべきでしょうか？ ウィンドウズPCだけを使ってきた方、Macだけを使ってきた方はお互い違うPCはどうなのか興味があるのではないかと思います。 はるなぴはウィンドウズPCとMac両方使ってきましたので、それぞれの特徴を纏めてみたいと思います。 ウィンドウズPCの特徴 圧倒的なWindows OSのシェア 豊富なバリエーション Macの特徴 Macのデザイン ハイスペックで少し高い Windows PCとMacの使い勝手の比較 WindowsユーザがMacに乗り換えた場合 Macユーザがウィンドウズに乗り換えた場合 iPhoneとの連携 Windows PCとMacの差があまり（重要では）なくなってきた 開発環境 デザイン ビジネスユースではウィンドウズか 今後Macのシェアが落ちるのではないか Macのトラックパッドについて ブロガー

DockerをWindows10Homeにインストールしましょう。 Chocolateyを使ってdocker-toolboxをインストールすればとても簡単です。 更にCentOS7のdockerイメージを導入してみましょう。これでDockerの勉強も簡単にできますね。 Windows10にDockerをインストールする方法 Chocolateyを使ったdocker-toolboxのインストール方法 DockerでCentOS7イメージを使う VagrantとDockerの使い分け Windows10にDockerをインストールする方法 Windows10Home（64bit）にDockerをインストールするにはChocolateyを使ってdocker-toolboxをインストールするのが簡単です。 Chocolateyを使ったインストール例についてはこちらの記事もご参照ください。 www.

Windows10環境にVirtualboxとVagrantをインストールして仮想化環境を作りましょう。 Chocolateyを使うと簡単に構築できます。 更にVagrantにCentOS7のBoxを追加してCentos7環境を作りましょう。これでWindows10にCentOS7環境があっという間にできあがります。 Linuxの勉強をしたい場合もこれで本格的にできますね！ Windows10にVirtualboxとVagrantをインストールする方法 Chocolateyを使ってVirtualboxをインストールする方法 Chocolateyを使ってVagrantをインストールする方法 Vagrantを使ってCentOS7環境を楽々構築する Guest Additionsを作ってくれるプラグインをVagrantにインストールする Vagrantを起動する SSHでCentos7にログイン

curlを使うと何がいいのか？ ウェブサイトのHTMLファイルをコマンドひとつで簡単にゲットできるようになります。 これをウェブスクレイピングと呼びます。 CurlをWindows10にインストールしてウェブサイトをスクレイピングしましょう！ Linuxを使用している方にはcurlとかwgetというコマンドはお馴染みだと思いますが、Windowsユーザは知らない方も多いのではないかと思います。 CurlのWindows10へのインストール ChocolateyによるCurlのインストール Curlの使い方 Curlをコマンドラインから使用する Proxyの内側からCurlコマンドを打つオプション 取得したHTMLをファイルに落とす方法 CurlのWindows10へのインストール CurlのWindows10へのインストール方法を説明します。 はるなぴの手元環境がWindows10なのでW

CSSだけを使ってtableを見やすく表示するカスタマイズ方法を備忘録として書いておきます。 スマホ表示もレスポンシブ対応を含めて考えていきます。 tableを見やすくするためにテーブルセルに枠線をつけます。さらにヘッダ領域に背景色をつけ、何を比較しているのか目立つようにします。 このカスタマイズでtableを更に見やすく表示しようという作戦です。 tableをどう表示するか スマホ表示 レスポンシブ対応 tableに枠線をつけるCSS テーブルヘッダに背景色をつける マークダウン記法でtableを書く tableをどう表示するか ブログを読むときに内容がtableで表にしてあると分かりやすいということが多いですよね。 列ごとの内容が簡単に比較できますから。 文字ばかりに頼った記述だと読者は疲れてしまいます。テーブル表示を織り交ぜることで読者が楽に内容を読み取ることができるようになります。

オリジナルテーマを制作するにあたり、まずCSSの開発環境を整えます。 はてなブログでのテーマ制作とはすなわちイコールCSSの開発だからです。 今回はNode.jsを使ってCSSの開発環境を整備していきますので、その手順を備忘録として記録しておきます。 Node.jsとは Chocolateyを使ってnodistをWindowsにインストールする Node.jsとは Node.jsとは何でしょうか？ Wikipediaの説明を引用します。 Node.js は、イベント化された入出力を扱うUnix系プラットフォーム上のサーバーサイドJavaScript環境である。 何だか難しいですね。分かっている人が納得するための説明みたいで、分からない人が分かるようになる説明とは思えません。 とりあえずはJavascriptの実行環境だと思っておけばいいと、はるなぴは思います。 サーバーサイドJavascr

今回はアイコンの作り方について考えてみます。 ブログでもそうですがツイッターなどのSNSではアイコンはとても重要です。企業のロゴと同じで、見る人に真っ先に認知されるところだからです。 企業がロゴを使ってブランド価値を高めるのと同じように、個人ブロガーもアイコンやアバターを工夫することで拡散力を高めることができます。 もちろんこの方法のみが正しいと主張するわけではありません。そこまで気を使いたくない、自分のお気に入りの風景やペットの写真をアイコンに使いたい、というのも自由です。 あんまり拡散、拡散とそればかりを考えていると疲れてしまいますからね！ 個人ブロガーにとってのアイコン（アバター） なぜアイコンがそんなに重要なのか？ アカウント名の何が失敗なのか 目立つことの重要性 アイコンの作り方 自撮りをアイコンにするのはお勧めしない 色はどうするか 顔アイコン以外の選択肢 個人ブロガーにとって

今回は自作テーマの対象ブラウザをどこまでの範囲とするかについて考えてみます。 具体的には自作テーマでIE11対応を切っていくことができるのかどうかについて調査して分かったことを書きます。 なぜInternet Explorer 11サポートが問題になるかというと、IE11には様々なバグがあり、最新のCSS3を工夫なしで使用すると表示崩れが発生してしまう可能性があるからです。 ブラウザシェアを確認する Googleアナリティクスで自分のサイトのブラウザシェアを確認 browserl.istを利用してブラウザシェアを調べる 自作テーマで何故IE11対応が問題となるのか flexbox対応のバグ IE11を切れるか ブラウザシェアを確認する 2018年夏のブラウザシェアを見てみましょう。 webrage.jp こちらの記事によれば2018年7月時点でシェアは次のようになっています。 順位 ブラウ

はてなアンテナ使ってますか？　今回ははてなアンテナでお気に入りブロガーさんのサイト更新を知る方法について説明します。 はてなアンテナを使い始めてからはサイトの更新をチェックするのがとても楽になりました。お勧めです！ はてなアンテナとは はてなアンテナの利用方法 サイトの登録設定 スマホからはてなアンテナが使えるようにする メールによる通知も可能 はてなアンテナによる被リンク効果 はてなお気に入り はてなアンテナとは はてなアンテナとは、登録したサイトの更新状態をチェックしてくれるはてなのサービスです。 無料で使うことができますよ。はてなブログを書いているのなら利用するのはとても簡単。お勧めです！ はてなアンテナの利用方法 はるなぴはお気に入りブロガーさんのサイト更新をチェックするために使っています。 自分の記事にブックマークをつけてくれたら嬉しいですよね。そこで付けてくれた方のサイトを登録

ファーストビューとはサイトが表示されたときに訪問者が一番初めに目にすることのできる領域のことを指します。 スクロールせずに見ることができる範囲と言ってもいいでしょう。 今回はファーストビューを意識してブログをカスタマイズする方法について考えていきます。 なぜファーストビューを意識する必要があるのか？ ファーストビュー内に入れるべき内容 記事に何が書いてあるのかを分かりやすく表示する 読者の気を引く はてなブログテーマInnocentをファーストビュー対応にカスタマイズする パンくずリストを調整する サイドバー上部に注目記事を設置する方法 まとめ なぜファーストビューを意識する必要があるのか？ そもそも何故ファーストビューを意識しなければならないのでしょうか？ それはGoogleが記事を評価するときの指標のひとつになっているからです。ファーストビューに記事とあまり関係のないコンテンツを入れて

はるなぴログも大分テーマのカスタマイズが進んできました。 そこで今回は、はてなブログでオリジナルテーマ自作の構想を練ってみたいと思います。 はてなブログテーマInnocentの問題点は何か？ 自作してみたいオリジナルテーマの内容を考えてみる Innocentからの乗り換えがスムーズにできる 適切なSEOを考慮する モバイルファーストレスポンシブ対応可能 モダンブラウザをメインに考える モバイル用スピードアップデートに対応できるパフォーマンス 導入後即使用可能な出来合い感のあるテーマ SNSボタンは基本カスタマイズしないでオプションとする https化（常時SSL化）に無理がない はるなぴログで導入したカスタマイズを適用する はてなブログテーマInnocentの問題点は何か？ まずは今使っているテーマInnocentの問題点を洗い出してみます。 Innocentは非常に優れたテーマでSEOも