【Minimalism】ソースコードの埋め込み方法
前回は見出しデザインのカスタマイズを行いました
今後このブログでプログラムのソースコードを書く機会が多くなりそうなので、ソースコードの埋め込み方について調べてみました
準備
ちなみに、>||と||<は必ず行頭になければいけません
半角スペース1つあるだけでうまく表示されません
設定可能な言語については次のはてなブログのヘルプを参照してください
正しく書けていれば、次のような表記になります
h3 { padding: 0.4em 0.5em;/*文字の上下 左右の余白*/ color: #494949;/*文字色*/ background: #f4f4f4;/*背景色*/ border-left: solid 5px #7db4e6;/*左線*/ border-bottom: solid 3px #d7d7d7;/*下線*/ }
次のサンプルではあえて、行頭に半角スペースを入れているので書いたままに見えてしまいます
>|css|
h3 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
|
【Minimalism】見出しデザインのカスタマイズ
前回はSNSのシェアボタンの設置方法についてでした
everyday-study.hatenablog.jp
今回は見出しのデザインのカスタマイズを行っていきます
デフォルトの設定だと見出しはこのようになります
これを以下のサイトを参考にカスタマイズします
saruwakakun.com
このサイトには68種類ものデザインがコードと一緒になってまとめられています
それらの中から自分が気に入ったデザインを選びましょう
「コードを表示」を押すと、そのデザインを表現するためのCSSのコードが出てくるので、これをコピーします
コピーしたコードを
「ダッシュボード」⇒「デザイン」⇒「カスタマイズ」⇒「デザインCSS」に貼り付けます
ただ、この時気を付ける点が、参考サイトのコードがh1に対するデザインになっているので、これをそれぞれh3,h4,h5に変える必要があります
大見出しh3
中見出しh4
小見出しh5
これで見出しのデザインが変更できています
他にもカスタマイズについて書いています
everyday-study.hatenablog.jp
【Minimalism】シェアボタンの設置方法
前回に引き続きMinimalismのカスタマイズを行っていきます
今回はシェアボタンの設置です(下のようなイメージです)
一応デフォルトの設定でもSNS関連のボタンを以下のような感じで設定できるので、このあたりは好みによります
設定方法は
「ダッシュボード」⇒「デザイン」⇒「カスタマイズ」⇒「記事」
ちなみに、すぐ下の「表示設定」で記事の上下に表示させるか、記事下だけに表示させるか設定できます
では、シェアボタンの設置方法です
設定する場所はデフォルトのボタンの設定と同じで
「ダッシュボード」⇒「デザイン」⇒「カスタマイズ」⇒「記事」の中ほどにある
「記事上」・「記事下」に次のコードをコピペします
<div class="shrbtn"> <!-- HatenaBookmark --> <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share_btn"> <span class="htvcenter" style="line-height: 1.6;"> <i class="blogicon-bookmark" style="font-size:22px"></i> </span> </a> <!-- twitter --> <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn"> <i class="fa fa-twitter"></i> </a> <!-- facebook --> <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share_btn"> <i class="fa fa-facebook"></i> </a> <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share_btn"> <i class="fa fa-get-pocket"></i> </a> <!-- feedly --> <a href="http://feedly.com/i/subscription/feed/http://ブログURL/feed" target="_blank" class="share_btn"> <i class="fa fa-rss"></i> </a> </div>
他にもMinimalismのカスタマイズについて書いています
everyday-study.hatenablog.jp
【Minimalism】レスポンシブデザイン設定方法
前回はてなブログで一番人気のテーマであるMinimalismのインストールを行いました
今回はPCやスマートフォン・タブレットのような様々なデバイスの画面に合わせてページを表示してくれるレスポンシブデザインの設定を行います
レスポンシブデザインの設定方法は製作者さんのページを見て行いました
レスポンシブデザインの設定もインストールと同じくらい、いやそれ以上に簡単です！
１：ダッシュボードの「デザイン」をクリック
２：「スマートフォンのアイコン」をクリック
３：「詳細設定」の「レスポンシブデザイン」にチェックを入れるだけ！
たっだこれだけでレスポンシブデザイン対応できちゃいます！
チェックを入れたら必ず変更を保存しましょう
他にもMinimalismのカスタマイズについて書いています
【Minimalism】人気No1デザイン! Minimalismのインストール方法
ブログ初めていきなりのテーマ変更ですが、とても簡単にインストールできました！
- １：はてなブログのダッシュボードの「デザイン」をクリック
- ２：一番下の「テーマストアで探す」をクリック
- ３：「人気順」をクリック
- ４：Minimalismをクリック
- ５：「プレビューしてインストール」をクリック
なぜ数あるテーマの中からこのテーマを選んだのかというと、
１：何よりもまず無料のテーマであること
２：人気No1であること
３：情報が豊富なこと
人気ということはそれだけネット上にこのテーマに関する情報が豊富のため、知識のない私のような人間でもコピペで簡単にデザインできそうなので
以下のリンク先がこのテーマの製作者の「ひつじの雑記帳」さんです
テーマの特徴やインストール後に設定したほうが良いこと、簡単なカスタマイズの方法を書いてくれています
さて、テーマのインストール方法ですが、めちゃくちゃ簡単です
１：はてなブログのダッシュボードの「デザイン」をクリック
２：一番下の「テーマストアで探す」をクリック
３：「人気順」をクリック
またはページ中ほどにある「人気のテーマ」にも「Minimalism」があります
４：Minimalismをクリック
５：「プレビューしてインストール」をクリック
ここでテーマをインストールするブログを選びます
６：プレビュー画面になるので、「このテーマをインストール」をクリックすれば無事にテーマのインストール完了です！
他にもMinimalismのカスタマイズ方法について書いています
Docker上でmatplotlibを使う
ビジネスPython超入門という本の機械学習の章に取り組んでいた時、dockerを使っていたため下記のコードの実行時にエラーが出たのでそれの対処のためのメモ
from PyQt5 import QtCore, QtGui, QtWidgets
ImportError: libGL.so.1: cannot open shared object file: No such file or directory
エラーコードの最後のほうで何にやらモジュールがインポートできないと言っていたので調べてみたら次のような記事を見つけた
https://qiita.com/lmond/items/cf72a4a6782b06fde0ac
dockerでのpythonの開発環境を用意したときにAnacondaをインストールしていたことが原因みたい
この記事通りに進めて、次のコマンドを実行したらエラーになった
conda install --channel https://conda.anaconda.org/bpentz pyqt5
何でだろうと少し考えてみたら、単純にインストールすべきOSが違うだけだった
そこで、LinuxにPyQt5をインストールする方法を探して、次のコマンドをdocker上で実行すればよいと分かった
sudo apt-get install python3-pyqt5
https://qiita.com/itoppy18/items/340efff6c079a00b04fc
import PyQt5.QtWidgets
を実行したらエラーが出ることなく、無事に通った
よし！これでグラフを描画できると意気揚々と最初のプログラムを実行したらまた別のエラーが出てきた
raise RuntimeError('Invalid DISPLAY variable')
RuntimeError: Invalid DISPLAY variable
次のコードの最初の2行がリンク先で記載されていたサーバー側で図の作図、出力まで行うようにするもの
https://qiita.com/TomokIshii/items/3a26ee4453f535a69e9e
プログラムを実行すると同じ階層にできる"plot.png"が実行結果となる
Docker+Anaconda環境構築
増補改訂Pythonによるスクレイピング&機械学習 開発テクニックでスクレイピングを勉強しようとして、環境構築でかなり躓いたのでメモ
書籍ではPythonの実行環境をDockerで構築することを勧めていたので、Dockerって何？という状態からのスタートだった
ディレクトリのマウントについて
・Shared Devicesの設定
https://qiita.com/toro_ponz/items/d66d5571c4646ad33279
・windowsの場合、ホスト側のpcのディレクトリの頭に//を付ける
https://qiita.com/Sa_Ru/items/f8841a9d1b969a0c64bd
Python+Anacondaの環境構築
https://qrunch.net/@nokonoko1203/entries/MhYOUySrmQbVS5vt
・sudoコマンドがない
$ apt update
$ apt install -y sudo https://teratail.com/questions/204304
・gitコマンドがない
$apt update -y
$apt install git -y・error: please install aria2c, curl, or wget and try again
# apt-get install git aria2 curl wget bzip2
・Pythonを実行したときにUnicodeEncodeError: 'ascii' codec can't encode characters in position 0-1: ordinal not in range(128)が出る
# apt-get install language-pack-ja-base language-pack-ja
# export LANG=ja_JP.UTF-8
