はるなぴログ

WEBサイト作成技術研究

GraphvizをWindowsにインストールしてフローチャート図を書こう!

Graphvizを知っていますか? これを使うとフローチャート図を描くことができます。 おっと今はあまりフローチャート図とは言わず状態遷移図と言ったりするのですね。 Windows10にChocolateyを使ってGraphvizを簡単にインストールしましょう。 Graphvizの使い…

Mathjaxの使い方を覚えて美しい数式表示をしてみよう!

Mathjaxを導入して数式を美しく表示してみましょう。 CDNを利用して簡単にMathjaxを導入する方法についてご紹介します。 またインライン表示、ディスプレイ表示の方法や数式番号を付ける方法についても解説していきます。 はてなブログのMarkdown記法モード…

【2019年版】クリックされやすいリンク色を極める!

クリックされやすいリンクの色はどんな色でしょうか? 大抵のリンクは青色をしていますが、その青色も調べてみると実にさまざまな種類があることが分かりました。 主だった検索エンジンやブログサービスなどの青色リンクの色を比較して独自テーマ制作の参考…

Chrome拡張機能で是非お勧めしたいもの10選

Chromeブラウザの拡張機能を使っていますか? とても便利でお勧めしたいChrome拡張を紹介します。 Web開発する場合にお役立ちのものやSEO対策用など10個の拡張機能をリストアップしてみました。 はてなブログを運用する方に便利なものも最後にご紹介します!…

秀丸マクロのrunexを使ってPandocでマークダウン記法の変換をしよう!

秀丸エディタをインストールしていますか? 秀丸マクロではrunex文を使って外部コマンドを実行することができます。これは超便利! 前回の記事で紹介したPandocを秀丸マクロに組み込み、マークダウン記法で書いているブログ記事を簡単にHTMLファイルに変換す…

Pandocをインストールしてマークダウン記法を自分好みに変換しよう!

前回の記事では、はてなブログでのマークダウン記法の書き方について説明しました。 今回はPandocというソフトウェアをWindows10にインストールします。 更にPandocのオプション設定によりマークダウン記法を自分好みに変換する方法について説明します。 Pan…

はてなブログをマークダウン記法で書く方法

はてなブログをマークダウン記法で書く方法を網羅的に調べます。 どのようなHTMLタグに変換されているのかをきちんと調べてテーマ制作の参考にしようと思います。 更に、ツールボックスを使った場合に挿入される内容などもこの機会に調べておきます。 はてな…

Macは本当に使いにくい?MacとWindows使い勝手比較第二弾

Macは使いにくいという記事が溢れています。 特にWindowsからMacに乗り換えた方の使いずらいという記事が目立ちます。 前回の記事で使い勝手を比較した際に、これは単なる「慣れの問題」と書きました。 しかし深く考えてみるとそこには単に慣れの問題にとど…

ウィンドウズPCとMacどちらを選ぶべきかを比較してみる

今回はウィンドウズとMacの比較を行います。 どちらを選ぶべきでしょうか? ウィンドウズPCだけを使ってきた方、Macだけを使ってきた方はお互い違うPCはどうなのか興味があるのではないかと思います。 はるなぴはウィンドウズPCとMac両方使ってきましたので…

DockerをWindows10HomeにインストールしてCentOS7環境を導入しよう!

DockerをWindows10Homeにインストールしましょう。 Chocolateyを使ってdocker-toolboxをインストールすればとても簡単です。 更にCentOS7のdockerイメージを導入してみましょう。これでDockerの勉強も簡単にできますね。 Windows10にDockerをインストールす…

VirtualboxとVagrantをWindows10にインストールしてCentOS7環境を構築しよう!

Windows10環境にVirtualboxとVagrantをインストールして仮想化環境を作りましょう。 Chocolateyを使うと簡単に構築できます。 更にVagrantにCentOS7のBoxを追加してCentos7環境を作りましょう。これでWindows10にCentOS7環境があっという間にできあがります…

curlをWindows10にインストールしてウェブサイトをスクレイピングしよう!

curlを使うと何がいいのか? ウェブサイトのHTMLファイルをコマンドひとつで簡単にゲットできるようになります。 これをウェブスクレイピングと呼びます。 CurlをWindows10にインストールしてウェブサイトをスクレイピングしましょう! Linuxを使用している…

CSSだけでtableを見やすく表示するカスタマイズ方法

CSSだけを使ってtableを見やすく表示するカスタマイズ方法を備忘録として書いておきます。 スマホ表示もレスポンシブ対応を含めて考えていきます。 tableを見やすくするためにテーブルセルに枠線をつけます。さらにヘッダ領域に背景色をつけ、何を比較してい…

オリジナルテーマ制作のためにCSS開発環境を整える

オリジナルテーマを制作するにあたり、まずCSSの開発環境を整えます。 はてなブログでのテーマ制作とはすなわちイコールCSSの開発だからです。 今回はNode.jsを使ってCSSの開発環境を整備していきますので、その手順を備忘録として記録しておきます。 Node.j…

はてなブログテーマを比較してみる

はてなブログでオリジナルテーマを作成するにあたり、はてなブログの既存テーマを調べて比較してみます。 テーマには公式テーマとオリジナルテーマがありますが、テーマストアから人気順に10テーマずつピックアップして比較します。 人気テーマは更に詳細に…