大人の発達障害者の挑戦日記

30代後半で成人発達障害者となった私の日記

はてなブログ用のCSSをローカルで


スポンサーリンク

こんにちは。エイキチです。

はてなブログの設定を見ていたら、デザインCSSという入力欄があることに気づきました。今回はその設定のため、ローカルでCSSを作ったという話です。

入力欄を見つける

はてなブログのダッシュボードのみだり側にメニューがあります。そこに「デザイン」という項目があります。クリックすると左側のメニューが変わりました。「カスタマイズ」アイコンをクリックすると、メニュー内容が切り替わり、「デザインCSS」という項目が現れます。これをクリックすると入力ボックスが現れます。

f:id:otona-hattatsushougai-challenge:20180212132243p:plain

さらにそれをクリックすると、入力ウィンドウが出てきますが、ここでCSSを入力するというのは非常に労力が必要な気がしました。出来ればローカルでCSSを編集して、コピーアンドペーストしたいと考えました。

Google Chromeを使う

はてなブログの自分のページのhtmlファイルと関連するファイル一式をダウンロードできれば、ローカルでも同じようにブラウザに表示できるのでは?と考えました。

試しにやってみたのが、Google Chromeでファイルを保存することです。右クリックメニューの中に「名前を付けて保存」があります。保存ダイアログを表示させてみると、初期状態で、ファイルの種類が「ウェブページ、完全」となっています。

f:id:otona-hattatsushougai-challenge:20180212132314p:plain

お、これは期待通りの結果になるのでは?と思い、試しに保存してみました。以下のものが保存先フォルダに格納されました。

  • ファイル:大人の発達障害者の挑戦日記.html
  • フォルダ:大人の発達障害者の挑戦日記_files

htmlファイルをダブルクリックして確認してみると、ネット上で見ているのと同じ見栄えになっていました。

CSSファイル

htmlファイルと同じファイルにstyle.cssを作りました。これをhtmlファイルで読み込むようにすれば良いと考えました。Meryというテキストエディタでhtmlファイルを開きました。既に何らかのCSSファイルを読み込んでいるのだろうと思い、「stylesheet」で検索するといくつか見つかりました。それらの後の行に以下の一文を追加しました。

<link rel="stylesheet" type="text/css" href="./style.css">

これでstyle.cssを読み込む動作になります。あとは、htmlファイルをブラウザで開き、見栄えを見ながらstyle.cssを編集するという作業です。編集はVisual Studio Codeというソフトを使いました。コードの補完機能があるため、編集が楽です。

完了したら、はてなブログのデザインCSS入力欄に追加する形でペーストすれば良いです。(デフォルトでインポート文の記載がありますが、これはおそらくテーマのCSSを読み込むものだと思われますので、消さない方が良いのでしょう。)

以上のような方法で、ブログの見栄えを少し変えてみました。CSSを編集するのは、使い慣れたエディタを使うのが楽だと思いました。

最後に一言

学生時代以来、久しぶりにCSSを使いました。当時は本のみが頼りでしたが、今は、グーグル検索で情報がたくさんあるので助かります。

参加中 にほんブログ村 成人発達障害