Cocoon cocoon で画像を拡大できるようにする
ブログに unreal engine の記事を追加しようと思ったのだが、Blueprint は画像が大きくなってしまうので、画像拡大の機能が欲しくなった。cocoon での使い方は以下の通りCocoon 設定から「画像」を選択画像拡大効果を...
WordPress
Cocoon Cocoon Cocoon で Prism.js を使う
Highlighting Code Block プラグインを使うだけで良い。自分でカスタマイズしてダウンロードしてきた prism.js と prism.css を指定して使うことができる。設定まず、プラグインをインストールして有効化する。...
Cocoon Cocoon のシンタックスハイライトのスマホでの改行位置を変えたい
Cocoon のデフォルトでは、シンタックスハイライトを有効にしている状態で iPhone や iPad でソースコード見たときに、右端で改行してくれている。好みの問題だが私はこれだと見づらい。なので右端で改行しないでスクロールするようにし...
Cocoon Cocoon の シンタックスハイライトの背景を縞々にする
現在、WordPress のテーマは、サイトを分けて Cocoon と Luxeritas を両方使っています。Luxeritas のシンタックスハイライトで、背景を縞々にすることができているので、Cocoon でもできないかやってみました...
WordPressテーマ開発 06: WordPress – 余分なヘッダの削除
<head> 内に追加される不要なタグを取り除く標準でいろいろ不要だと思うものが<head> タグ内に追加されています。これらを消していきます。SEO的にあった方が良いものもあるのかもしれませんが、わからないものはとりあえず削除の方向で進め...
WordPressテーマ開発 05: WordPress – オリジナルのテンプレートの作成 – 3カラムレイアウト
3カラムのテンプレートに、WordPrsses の記事を表示する部分を実装します次のような機能を実現します。一部、プラグインを使うところは、後日実装します。 ヘッダー タイトル パンくずリスト用のエリア 左サイドバー カレンダーアーカイブ用...
WordPressテーマ開発 04: WordPress – Bootstrapで3カラムレイアウトの作成 – レスポンシブデザイン
Bootstrap を使って 3カラムレイアウトのテンプレートを作成しますオリジナルテーマの作り方を探していると、ほとんどが 2 カラムのレイアウトになっています。熱帯魚のブログを他サイトから引っ越してくる際に、それまで使っていた 3 カラ...
WordPressテーマ開発 03: WordPress – Bootstrapで2カラムレイアウトの作成 – レスポンシブデザイン
Bootstrap の grid システムを使って、WordPress のカスタムテンプレートをレスポンシブデザインにしますBootstrap の導入まずは、bootstrap-4.1.3-dist.zip してきます。その中から次のファイ...
WordPressテーマ開発 02: WordPress – 2カラムレイアウトのテンプレートの骨組み作成
Bootstrap でレスポンシブデザインを作っていくための下準備今回は、テンプレートを分割して配置するところまで行います。デザインを調整する際に必要がないため、WordPress として記事を表示する部分は実装しません。とりえず、こんな感...
WordPressテーマ開発 01: WordPress – さくらインターネットのスタンダードプランにWordPressをインストール
クイックインストールで簡単にインストールできます。1時間くらいでできると思います。WordPress でオリジナルテーマを作るにあたり、まずは、さくらインターネットのスタンダードプランにWordPress をインストールしました。あらためて...
WordPressテーマ開発 WordPress のプラグイン
自分で試してみたプラグインについて、ここにメモしています。Crayon Syntax Highlighterこの機能が欲しくてWordPress をはじめました。重たいって言われています。重たいのは、preタグの中をtableやdiv、sp...