つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~ はてなブログテーマの自作3

 前回はBoilerplateのscssファイルを変更して新しいブログテーマを作成する作業方法について紹介したが、今回はこれから新しいブログテーマ作成する上での方針についてまとめてみた。

atatat.hatenablog.com

デザイン

いまのブログデザインを踏襲する形を検討する。タイトル文字の配色、段落のデザイン、サイドバーのデザインなどデザインCSSに記述した内容を基にscssファイルを記述していく予定。

スマホ対応

レスポンシブデザインに対応し、PCは2カラム、スマホは1カラムの構成にする。

ダークモード対応

以前紹介したようにデザインCSS内のメディアクエリを用いて、ダークモード用のデザインを指定できるので、ダークモードに対応したテーマにする。

atatat.hatenablog.com

カスタマイズ性

基本的には配色はブログテーマに記述しておき、必要に応じてデザインCSS等に追記して使用する。コードを軽くするにはレイアウトだけ指定して配色指定しないテーマもあり得る(コード量は最低限になる)が、CSSを記述しないと使えないテーマとなってしまう。

その他機能

上に戻るボタン、グローバルメニューなどのCSSのみを記述しておき、所定のHTMLを追記することで機能するようにする。

少し時間がかかるかもしれないが、進捗あればブログ記事としてアップしていこうと思う。

gnuplotによるグラフ作成22~3Dデータプロット2

 前回はgnuplotによるデータファイルから3Dプロットをライン、ポイントでプロットする例を実行したが、今回は表面プロット、コンタ―プロットの例を紹介する。

atatat.hatenablog.com

1. データファイルから3D表面プロット

データファイルから3次元でプロットする際に表面プロットにする場合はwith pm3dを追加する。

splot "data3d.txt" with pm3d

以下のように、データファイルを表面プロットが作成される。

"データファイルを表面プロット"
データファイルを表面プロット

マトリックス形式のデータファイルに対しても、同様にwith pm3dを追加すればよい。(プロットは省略する)

splot "data3d_mat.txt" matrix with pm3d

表面プロットを真上から眺めるマップビューについても、set view mapおよび縦横比を等しくするset size squareとすることで作成できる。

set view map
set size square
splot "data3d.txt" with pm3d

"データファイルから表面プロット(マップビュー)"
データファイルから表面プロット(マップビュー)

表面プロットの表面カラーの設定などは過去記事を参照。

atatat.hatenablog.com

2. データファイルからコンタ―プロット

 コンタ―プロットで作成する場合も、以前紹介したようにset contourおよびunset surfaceとしてから`splot "データファイル名"とする。

atatat.hatenablog.com

unset surface
set contour
splot "data3d.txt"

単純にsplot "data3d.txt"とすると以下のようにポイントによるコンタ―プロットが作成される。

"コンタ―プロット(ポイント)"
コンタ―プロット(ポイント)

そこでsplot "data3d.txt" with lineとするとポイントではなくラインでコンタ―プロットが作成される。

"コンタ―プロット(ライン)"
コンタ―プロット(ライン)

以前のコンタ―プロットの記事に触れたようにset cntrlparam levelsを用いて等高線の本数を調整することができる。

set cntrparam levels 10
replot

"等高線を増やしたコンタ―プロット"
コンタ―プロット

等高線を滑らかにして、凡例を枠外にするには

set cntrparam cubicspline
set key right outside
replot

等高線を滑らかにしたコンタ―プロット

3. まとめ

 今回はデータファイルのデータから表面プロットおよびコンタ―プロットを作成する方法について紹介した。

ブログデザイン備忘録 ~ はてなブログテーマの自作2

 前回ははてなブログテーマの自作として、テンプレートとしてBoilerplateの入手、設定、Node.jsによる実行について紹介した。今回は、Boilerplateのscssファイルを変更して新しいブログテーマを作成する作業方法について紹介する。

atatat.hatenablog.com

1. Boilerplateを用いたデザイン作成

 Node.jsを立ち上げてstart npmとしてファイルを監視している状態で基本的にはHatena-Blog-Theme-Boilerplate内のscss/libにある_core.scssと必要に応じてvariable.scssの中身をテキストエディタで開いて書き換えることでscssファイルが変更のたびにコンパイルされて新しいcssファイルが作成される。変更後のデザインを確認するには、webページ上で再読み込みを行う。(httpsでなかったときはBrowser-syncにより自動で同期していたが、現在はサポート外になっている。→条件次第でできるかもしれない)

_core.scssにはBoilerplateのレイアウトがscssで記述されている。(HTMLは変更できないので、あくまでデフォルトのHTMLに対するレイアウトをブログテーマとして提供する) この項目やセレクタを参考にして、SCSS/CSSコードによりオリジナルのレイアウトを作成していく。また$text$link$はカラー名に関する変数で_variable.scss内に定義を記述しておく。また変数はカラー名以外にメディアクエリにも使われており、$mq-sm(min-width: 768px)となっている。 以下_core.scssの中身の一部を示す。

html,
body {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic';
    color: $text;
    background-color: $background;`
    line-height: 1.6;
}
a {
    color: $link;
    &:hover {
        color: $hover;
    }
    &.keyword {
        text-decoration: none;
        border-bottom: 1px dotted $border;
        color: $text;
    }
}
h1,h2,h3,h4,h5,h6 {
    color: $text-header;
    line-height: 1.3;
    a {
        color: $text-header;
        text-decoration: none;
        &:hover {
            color: $hover;
        }
    }
}

#globalheader-container {
    background-color: $text;
    color: $background;
}

/* container */
#container,
#footer {
    padding-left: 10px;
    padding-right: 10px;
    @media #{$mq-sm} {
        width: 720px;
        margin: auto;
        padding-left: 0;
        padding-right: 0;
    }
    @media #{$mq-md} {
        width: 940px;
    }
}

同様に_variable.scssも示す。

// Variables

// Background color
$background: #fff;
$bg-light: #f5f5f5;

// text color
$text: #454545;
$text-light: #999;
$text-header: #333;

// link
$link: #1487bd;
$hover: darken($link, 10%);

// border
$border: #ddd;

// button
$btn: #fff;
$btn-hover: #f5f5f5;

// Media Queries
$mq-xs: "(max-width: 480px)";
$mq-sm: "(min-width: 768px)";
$mq-md: "(min-width: 992px)";
$mq-lg: "(min-width: 1200px)";

2. Boilerplateからレイアウト変更例

 実際のBoilerplateのレイアウト変更例について示す。(コード詳細は別の機会で)_core.scssファイルを書き換え、追記を行うとNode.jsのプロンプト上で変更を検知(File event [change])し、cssファイルが生成されるとRendering complete, saving .css file…というメッセージが表示される。(以下参照)変数を変更または追加する場合は_variable.scss

"変更時のNode.jsの表示"
変更時のNode.jsの表示

cssファイルが生成されるまで少なくとも数秒程度以上かかるので、その後でwebページの表示を更新する。cssファイルが生成される前に更新しても表示は変わらないことに注意。

以下ブログタイトル、目次、段落(h2)に関してBoilerplateの変更前後を示す。

"Boilerplate変更前"
Boilerplate変更前

"boilerplate変更後"
boilerplate変更後

また_core.scssの変更前の一部コードを以下に示す。

#blog-title {
    margin: 2em 0;
    text-align: center;
    @media #{$mq-sm} {
        margin: 3em 0;
        text-align: left;
    }
}

またタイトルのバックグラウンドの色を変更した_core.scssを以下に示す。 タイトル文字は#title { a{…}}で変更しているが今回は省略。

#blog-title {
    background:darkslategray;
    background-position:center;
    text-align: left;
    padding:2rem;
    height:200%;
    @media #{$mq-sm} {
        margin: 3em 0;
        text-align: left;
    }
}

3. まとめ

 今回はBoilerplateを変更して新しいブログテーマを作成する作業方法としてNode.jsで_core.scssまたは_variable.scssの中身を変更するやり方について紹介した。