こしあん日記 ~写真と猫とサッカーと~

子供たちの記録用にはじめたが、思春期になり写真を撮らせてもらえなくなる。写真と愛猫とサッカーが中心のブログです。

ウェブ関連

古いPC(Acer Aspire AS5745DG)のHDDをSSDに換装してよみがえった話

我が家にはPCが3台ある。 しかし、どれも結構な年代物。 この5年は間違いなく購入していないので、それより古いのは確実。 しかし、救いなのがどのPCもCPUがIntel Coreプロセッサであること。 昔はCPUのクロック数と、それによるマザーボードの性能でPCの性…

ちょこっとづつブログカスタマイズ

こまんたれぶ。 はてなブログでできること、できないことが少しづつ分かってきたので、できる範囲でカスタマイズ実行中。 気に入った方は自由に同じカスタマイズをしてください。 利用テーマの確認 フォントサイズの変更 フォント種類の変更 日付表記の変更 …

はてなブログでちょっと注意していること。

今回は写真もなく、記事内容も少ないです。 当たり前のことですが、参考になれば幸いです。 はてなブログに引っ越して、いや引っ越す前からいろんなはてなブログを見ていて感じたこととして、表示までの時間がかかること。 これはWordpressの時も感じたこと…

Wordpressからのお引越しと注意点

これまでブログはWordpressを使っていたが、セキュリティの問題、バージョンアップによる表示不具合等色々手間が多かったので、はてなブログに思い切ってお引越しを実行。 はてなブログを選択した理由は、はてブとの連携があることが主たる理由。 デメリット…

販売終了 NATURA1600

どうしてもフィルムカメラは、すぐに確認できない、現像にお金がかかるなど不便さを感じてしまう。 これだけデジタルが当たり前になると、ちょっとした不便もすごく不便に感じる。これってデジタルって両手を上げて良いとはいえないかも。 それはさておき、…

tinyMCEに独自ツールバーを追加

最近お世話になっているWYSIWYGエディタのtinyMCE。 基本ほりこむだけのお手軽さも助かる。 しかし、少し癖もあるので、使いこなすには慣れも必要。 で、今回もそんなtinyの備忘録。ソースがあるから忘れないと思うが、ソースのありかを忘れる可能性大なので…

スライダーの同じ不具合2回目なので、ちゃんと備忘録

とある納品物。 jQueryのスライダープラグインのsliderProを使って画像をカルーセル表示し、サムネイル部分はその画像のカテゴリを表示というシステム構築。 いざサーバへアップするとなぜかスライダーのサイズが100pxになる。 ソースをにらめっこし、プラグ…

prototype.jsとjQueryの競合回避

毎日ソースとにらめっこの日々で、それなりに調べたり勉強したりしているが、実際に備忘録を書くとなると億劫になってしまう。 とはいえ、後で「あれどうだっけ?」と数多あるブログから探し出すより、自分のブログで管理している方が絶対に楽なはず。 でも…

カスタム投稿タイプのパーマリンク設定

前回までで、無事新しいテーマにカスタム投稿タイプの設定ができたのだが、実際に投稿してみると記事単体ページのURLが ドメイン名/slug名/投稿タイトル になっている。 このブログでは通常は ドメイン名/年/月/投稿ID で設定しているが、どうやらカスタム投…

カスタム投稿タイプのテーマ作成について

以前、「カスタム投稿タイプの設定方法」の記事を投稿したが、今回はテーマへの反映方法。 カスタム投稿タイプで利用するテーマ カスタム投稿タイプで利用するテーマは大きく2種類になる。 1つは一覧用ページ。これはarchive.phpを使うことになるが、通常の…

カスタム投稿タイプの設定方法

Wordpressにはカスタム投稿タイプという仕組みがある。 元々ブログツールのWordpressには主に「投稿」という仕組みがあります。これはブログの記事を書いて登録する仕組みです。 ただ、ブログといっても全部記事というわけではなく、コンテンツがほとんど変…

Googleの日本語Webフォントを試してみた。

さくらでサーバを借りていれば! Xサーバでもいい! と何度思ったことか。。 今更サーバ変更はリスキーすぎてできない。 さくらやXサーバにはモリサワのWebフォントが利用できるサービスがあります。 やはりサイト全体のデザインとしてフォントのしめる割合…

Wordpressで独自の項目を追加する方法(カスタムフィールドの活用)

Wordpressは元来ブログツールなため、ブログとして使ている私などはダッシュボードをどうこうなど考えもしませんでした。けれど、お客様にCMSとして納品するためにWordpressを使い、お客様に自由になんでも入力されると困る場合は通常のブログの使い方では限…

Web関連メモ まとめ

HTML+CSS関連 HTML Pug(旧Jade)の使い方 emmetでのHTMLコーディング inputタグのfileやsubmitを画像にする方法 CSS Bootstrap4概要 Bootstrap4のグリッドシステム Sass導入と使用方法 【Sass】mixin、extend、プレースホルダーの違い @mixinの使い方 Sass+…

Angularを色々試してみる

■Angularのインストール Angular2はCLI(コマンドラインインターフェイス)でのインストールが必要 まずはAngularCLIのインストール npm install -g angular-cli Angularのインストール ng new プロジェクト名 実行 プロジェクトフォルダ内に移動し ng serve…

Gulpによるコーディングの効率化

例えば、Sassもしくはcompassだけを利用してHTMLとCSSを構築することはあまりありません。純粋なCSSの改修だけならそれもあるかもしれませんが、基本的にはPugとSassやPugとcompassを両方使うことになります。 しかし、それぞれにCLI(コマンドラインインタ…

Pug(旧Jade)の使い方

Pugとは JadeというHTML、JSのテンプレートエンジン。商標関連で2.0からPugに名称変更したらしい。 記述の省略(タグで囲まなくてよい等)、ファイル分割可能、変数利用ができる、制御構文が使える。 mixinやextendも利用可能なので、HTML版Sassという感じで…

Sass+compassという選択肢

Sassにおける@mixinの有用性は前回まででお伝えしましたが、実際に@mixinを設定するのはちょっと面倒だと感じます。 もちろん初めだけというのはわかっているのですが。ノウハウが蓄積すれば自分用@mixinスニペット集なんかを作ると便利でしょう。 そこで、…

@mixinの使い方

Sassでは@mixinを活用すればするほど効率化がすすみます。 簡単な@mixinの設定方法を説明します。 引数の活用 @mixinは@extendやプレースホルダーと違い引数を持つことができるということを説明しました。 しかし、デザイナーの方はプログラムが苦手で、とも…

こっそりレスポンシブ対応

サイトをリニューアルしてかなりの年月が経ちます。 もともとはレスポンシブ対応を考えてのリニューアルでしたが、PCサイトの制作で力尽きていました。 とはいえ、世の中的にはスマホでのサイト閲覧がどんどん増えている中でスマホで見づらいサイトのままと…

【Sass】mixin、extend、プレースホルダーの違い

Sassの目玉機能と言えばmixinという認識が一般的にあると思います。 mixinもextendもプレースホルダーも「呼び出す(使いまわし)」という意味ではどれも同じですが、少し用途が違うので理解して使うべきと思います。 @extend まずは最も単純で、利用頻度も…

Sass導入と使用方法

Sass(サス)とは Bootstrap4からLessを外しSassが正式採用されました。 これからはSassの時代? Sassは「Syntactically Awesome StyleSheet」の略で、まあすごいスタイルシートという感じ。 入れ子や変数が使える素敵仕様。 これまで、CSSは記述が単純でわ…

.htaccessによる処理

.htaccessはApacheが利用されているサーバでディレクトリ単位でサーバの設定を行う仕組みです。 通常、Apacheの設定はhttpd.confという設定ファイルで制御されていますが、ホスティング等でサーバを間借りしている時に全体とは違う設定に変えたい時などに利…

emmetでのHTMLコーディング

昔はZen-codingという名称だった、HTMLやCSSコーディング補助ツールです。 Dreamweaverや各種テキストエディタのプラグインとして利用できます。 特長としては、省略記法での記述と、ショートカットキーによる生成です。 タグを省略記述し、終タグの記述も不…

Bootstrap4のグリッドシステム

Bootstrapではグリッドシステムというレイアウト方法を採用しています。 横列が12列のエクセルの画面を思い浮かべていただければわかりやすいと思います。 ホームページなので、行はコンテンツ量によりことなります。 エクセルは横方向を列といい、縦方向を…

Bootstrap4概要

知らない人も多い??かもしれないので、まずは概要説明から。 BootstrapはTwitter社の開発したグリッドシステムを採用したCSSフレームワーク。 現在最新バージョンが4となっている。 グリッドシステムとは、画面を12に分割し、そのうち利用する横列(カラム…

ブラウザで表示されるPDFのタイトル

あまり気にならないと言えば気にならないのですが、仕事で見ていて「あれ?」と思ったので備忘録です。 PDFファイルは、最近では利用が当たり前になり、ワードやエクセルなどで作成しPDF化ということが多くなっています。 例えば何かの申込用紙をホームペー…

CakePHP2.x 複数テーブル保存とアソシエーションをもう一度再確認

再確認というか、あまり理解せずにbakeされるがままに使っていた。 しかし、複数テーブルの一括保存を行うsaveAllを使うときに困ったことが起こった。 AテーブルとBテーブルの内容両方を一括登録する処理で、コントローラはAを使っている時にA.ctpにFromヘル…

CakePHP2.x AppControllerでModelを呼び出しfind関数を使う方法

使用理由としては、app/View/Elements/header.ctpを用意しており、ヘッダー情報内にログインしたユーザー名、画像を表示するようにセット。 はじめは$this->Auth->user()を利用していたが、これではユーザー情報を編集したときにログアウトしないと情報が更…

フォームオブジェクトをフォーカスしたときの色について

フォームオブジェクトをフォーカスしたときにボーダーなどで色を設定する疑似クラスの:focusだが、chromeとFirefoxでは色が明らかに違った。 始めに書いていたCSSは以下の通り、単純にピンクの線を表示するようにしていただけ。 .contents input:focus, .con…