今日の１日振り返ります。

ジャンルは不特定多数で、主にメモ書きですね。

gif アニメの作り方（convert コマンド）

はじめに

　web 製作やらでgifアニメを使っている箇所は所々あります。例えば、ローディング中のくるくる回るやつとか。convert コマンドとgimp なんかを使えば自作できちゃいます。

Convert コマンドの簡単な使い方

　他に使用方法なんていくらでもあるかもしれませんが、覚書ということでコマンドラインからの使い方について記載します。

はじめに、コマンドラインを開いてください。

f:id:San3saN:20160616103019p:plain

そしたらもう使えます。基本的な使い方は

convert [画像１] [画像2] [画像3] [画像4] [画像5] [出力ファイル名].gif

これで、gif アニメができます。注意が必要なのは convert の後の画像の順番はコマ送りの順番である事。
例えば以下のように画像ファイルを準備すれば

todaytest.011.png
todaytest.012.png
todaytest.013.png
todaytest.014.png
todaytest.015.png
todaytest.016.png
todaytest.017.png
todaytest.018.png
todaytest.019.png
todaytest.020.png
todaytest.021.png
todaytest.022.png

convert * test.gif

のようにすることで省略が可能。またオプションをつけて

convert -dispose previous -delay 50 * test.gif

とすると
f:id:San3saN:20160616104852g:plain
こんな感じで出来上がります。オプションの詳細は コマンドライン上で

man convert

で見れます。ちなみに、-delay はコマ送りの速さです。

ローディング中のくるくる回るやつを作る。

　できたら、また更新します。

以上

既存のファイルを残したまんま内容を変更したい時の独自コマンド org コマンドを作りました。

おぼえがき。

はじめに

　久々の更新です。どうぞよろしくお願いします。
特にたいしたことでもないんですが、何かと重要かつ面倒な作業を菅簡略化するコマンドを bash_profile に記載しました。タイトルにあるように、既存の重要なファイルを書き換えないといけない時ってありませんか？例えば、html の編集やcss の編集、または bash_profile もそうです。いろいろいじくっちゃってわけわかんなくなったりした時元に戻したいですよね。そんな時わたしがよくやるのは、hoge.html というファイルの場合、hoge.html.org というファイルを作っちゃって内容をコピーするんです。作業終了して問題なければ削除したりします。いわゆるレビジョンみたいな感じでしょうか。

具体的にどんな時に使うのか？

スポンサーリンク


　もうすでに話しましたけど、hoge.html というファイルを編集したい時の話です。

cp -i hoeg.html hoge.html.org

として、hoge.html.org に編集するまえの内容を複製しておくと、何かと便利なんです。例えばこのコマンドであれば、１０文字は最低タイプしなければいけません（tabを使ったとしても）そこで org hoge.html とすると同ディレクトリに hoge.html.org ファイルができているようにしたのです。

bash_profile の内容

特に難しいところはありません、
bash_profile を開いて以下をコピペするだけ。

function org(){
cp -i $1 $1.org
}

これだけです。

以上

はてなブログで、カテゴリー別に画像を表示させたい！

jQuery

はじめに

　はてなブログのカスタマイズ記事です。カテゴリーの文字列を取得して、それに応じた画像をバックグランドの画像に割り当てるやり方について書きます。

まずは、どんなものか？

はてなブログでは、トップページでは記事が複数表示されると思います。記事の文中に「続きを読む」を入れると、「続きを読む」までの内容が表示されます。
以下のような感じで最新の記事が並びます。
f:id:San3saN:20151201124347p:plain

記事一覧のような感じです。どんな記事があるのがわかります。
ユーザー側からすると、見やすいようにカテゴリー別の何かがあるとわかりやすいですよね。そこで、「.entry」のバックグランド画像をカテゴリー別に変更してみたいと思います。すると、以下のようなbefore after になります。

before
f:id:San3saN:20151201130447p:plain

after
f:id:San3saN:20151201125716p:plain
f:id:San3saN:20151201125746p:plain

どうでしょうか？わかりやすくなったんじゃないかいと。

CSSの編集

　まずはCSSの編集から行いましょう。
.entry には３つの子要素があります。「.entry-title」「.entry-content」「.entry-footer」の３つです。例で示したものは、.entry-contentの文章は非表示、.entry-footer は全て非表示にしてあります。
ちゃんとまとめると、

  1. entry-titleの編集
    1. 記事作成日時の非表示
  2. entry-contentの編集
    1. デフォルトの画像の設定
    2. 文字の非表示
    3. 文字を表示
  3. entry-footer の編集
    1. 全て非表示

こんな感じです。2-2、2-3 あたりは今回話しませんが、１つ１つの記事の entry に何を表示させるかです。

/*.entry-$ の表示の変更*/
/*1-1 記事作成日時の非表示*/
.date {
    display:none;
}
/*2-1 デフォルトの画像の設定*/
.page-index .entry-content {
  position: relative;
  background-image: url("/*デフォルトで表示される画像のURLを記述*/");
  background-size:310px 155px;
  background-repeat: no-repeat;
}
/*2-2 文字の非表示*/
.page-index .entry-content p{
    display:none;
}
.page-index .entry-content h3{
    display:none;
}
/*2-3 文字を表示*/
.page-index .entry-content h6{
    font-size:80%;
    background:black;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    color:white;
    position: relative;
    top: 95px;
}
body:not(.page-index) h6{
    display:none;
}
/*3-1 footer 全て非表示*/
.page-index .entry-footer{
    display:none;
}

jQuery について

jQuery を使って、カテゴリーを読み込んでデフォルトで指定した画像を変更させます。それだけです。
以下にjQueryを示していますが、読み込みの関係から、フッタにコピペしてくれればと思います。

<script type="text/javascript">
   $(window).ready($(".page-index .entry-inner").each(function(){
   var a = "<!-- カテゴリの文字列-->"
   var b = "<!-- カテゴリの文字列-->"
   var c = "<!-- カテゴリの文字列-->"
   var d = "<!-- カテゴリの文字列-->"
    if ($(this).find(".entry-categories").text().indexOf(a) != -1){
       $(this).find(".entry-content").css("background-image","url((<!--  カテゴリa に対する画像のURL-->)");
   }else if($(this).find(".entry-categories").text().indexOf(b) != -1){
       $(this).find(".entry-content").css("background-image","url(<!--  カテゴリb に対する画像のURL-->)");
   }else if($(this).find(".entry-categories").text().indexOf(c) != -1){
       $(this).find(".entry-content").css("background-image","url(<!--  カテゴリc に対する画像のURL-->)");
   }else if($(this).find(".entry-categories").text().indexOf(d) != -1){
       $(this).find(".entry-content").css("background-image","url(<!--  カテゴリd に対する画像のURL-->)");}
    }));
</script>

var a = ってところに（a,b,c,d それぞれ）、各々のカテゴリを指定してあげて、それに対応するURLを「カテゴリa に対する画像のURL」と置き換えてください。すればOKです。
以上です。


スポンサーリンク