2021/08/11マークアップ言語 サイトで利用する画像は全てサイズをキッチリ同じに揃えている几帳面な方やむしろそうしないと気が済まない潔癖症な方には無縁の悩みかと思いますが、私を含めてそうでない方は画像のサイズ（と言うかアスペクト比）が不揃いなせいでレイアウトが微妙にズレたり気に入らなかったりする場合があるんじゃないでしょうか。 主にPixabayなどからダウンロードしたフリー素材や自分で撮影したスクリーンショットをリサイズしないでそのまま使用しているとそういう事になっちゃうわけですが、当エントリーではCSSで簡単にそのアスペクト比を設定する方法を書いてみたいと思います。

2019/08/172020/02/25WordPressテーマ Luxeritasのバージョン3.6.9からヘッダーのパララックス機能が追加されました。実装の予定があると聞いた時から私がずっと楽しみにしていた機能です。 ただ、当サイトではヘッダーにAdSense表示用の枠を作っちゃってますし、これはこれで結構気に入ってたりするのでひとまず他の運営サイトで利用する事になりそうです。 そんなわけでまだお試し中なところはありますが、当エントリーではLuxeritasのパララックスヘッダーのちょっとしたカスタマイズを紹介したいと思います。 2020/02/25 Luxeritas バージョン3.8.0 の機能拡張により当記事のカスタマイズで表示に不具合が発生する事を確認しました。対応の可否は出来るだけ早急にチェックしますが、基本的にテーマの機能に任せた方が安心だと思うので私としてはカスタマイズを

2019/06/192019/06/20マークアップ言語 Search ConsoleのAMPエラーも全て対応が済んで多少は安定してきたように思える当サイトのAMPページですが、相変わらずちょっとでも何か変わった事をしようとすると、すぐに「やだなにこれ」な状態にしてくれるのが困りモノです。 当サイトで利用中のWordPressテーマLuxeritasはかなりガチでAMP対応してくれるすばらなテーマですが、それでもユーザーが追加するコンテンツまではさすがに対応しきれない部分もあるので、何かAMPページでの表示・非表示を巧くコントロールするいい方法はないものかと無い知恵を絞って考えてみました。 AMPページでの表示をコントロール正直言って自分でも何やそれーと思うところはありますが、他にいい方法が思いつきませんでしたし、結果的にこんなシンプルな方法でも一応ちゃんとコントロール出来るようになるとい

LightningはWordPressの公式テーマディレクトリに登録されているので、WordPressのダッシュボードから簡単にインストール出来ます。 WordPress公式ディレクトリからテーマをインストールする方法はこちらのエントリーで紹介していますのでご参考までにどうぞ。 基本的にはVK ExUnitとセットで何か特別な理由でも無い限り、LightningにはVK All in One Expansion Unit（以下、VK ExUnitと略）も併せてインストールする事を激しく推奨します。 シンプルな構成のサイトならLightning本体だけでも決して作れない事は無いですが、SEOを強化したりソーシャル関連などの機能はLightning本体には含まれていないので、VK ExUnitもセットで入れておいた方が何かと便利です。特に現在はGutenbergに対応したブロックを利用する為に

2018/12/03マークアップ言語 サイト上のリンクを無効にしたい場合、静的サイトならソースを開いてその部分のaタグを削除すれば済む話ですが、WordPressのようなCMSを利用して作成したサイトとなると話はまた別で、なかなか簡単にはいかない事もあります。 そこで、当エントリーではCSSだけで簡単にサイト全体、または部分的にリンクを無効化する方法を紹介したいと思います。 マウスイベントを無効化するリンクを無効にすると言いましたが、正確にはマウスイベントの無効化になります。なので、クリックだけで無くホバー時のエフェクトなども無効化される事に注意して下さい。 サイト全体のリンクを無効化さすがにこれを使う事はまず無いと思いますが一応。

2018/11/26その他のWEBサービス PNG形式の画像は主に背景を透過させたい場合に利用される事が多いかと思いますが、その透過PNGってどうやって作ったらいいの？という方もみえるのではないでしょうか。 PNG画像の背景を透過させる方法は色々考えられますが、当エントリーではアプリなどのインストール不要で、簡単に透過PNG画像が作成出来る無料のオンラインツールを紹介したいと思います。

2018/09/16マークアップ言語 以前「横並びの画像をCSSで簡単にレスポンシブ表示する方法」という記事を書かせていただきましたが、何よりも「簡単に」という点を重視していた事もあって、本当にタイトル以上でも以下でも無いそのまんまの事しか出来ないのがずっと気になっていました。 そこで、今回はそれを発展させた拡張版と言いますか、表示するデバイスの画面サイズに合わせてカラム（列）数を変えたり、画像以外のちょっとしたコンテンツも並べられるよう改良を加えました。 単純に画像を横並びに表示したいだけで、PCでもスマホでも全く同じ見え方になればいいという事なら上記のエントリーを参考にしていただいても特に問題無いかと思いますが、当エントリーでは画像に限定せずコンテンツ枠を作成してその枠を制御する形になるので、その中には画像やテキストなどの要素を好きなように組み合わせて表示させる事が出来ます。 ただ、そ

2018/06/18WordPressテーマ Emanon Freeは主にビジネス用途のWEBサイトによる集客に特化したWordPressテーマですが、当サイトのような情報発信を目的としたサイトやアフィリエイトブログなどの構築にも最適なテーマです。 当エントリーは無料版のEmanon Freeについて実際に使用してみた感想を交えつつの紹介になりますので、有料版のEmanon Proの詳細に関しては公式サイトでご確認いただけると幸いです。 Emanon FreeのここがスゴイEmanon Freeは有料テーマEmanon Proに機能制限をかけたお試し版という位置付けなので、さすがにそのEmanon Proと比べてしまうと若干見劣りしますが、個人レベルでの使用ならばこれで十分と言ってもいいくらい高機能かつ高品質なテーマです。 デフォルトのままでもいけるデザインカスタマイズにあまり手間をかけた

2018/04/21WordPressテーマ いつでもCocoonのサイトを作れるようにと実験的に自分用スキンを試行錯誤中ですが、Simplicityには無かったアピールエリアという機能にちょっぴり手を加えるとなかなかいい感じになりそうです。 とか言って自画自賛は否めませんが、こんな風にも出来ますよという事で当エントリーではそのカスタマイズ方法を紹介してみたいと思います。 アピールエリアのカスタマイズ内容当エントリーのカスタマイズ内容はざっと以下のようになります。 コンテンツ部分の背景を透明に変更アピールエリア全体の背景色を透過色に変更タイトルとテキストの色を変更たったこれだけなのでぶっちゃけ大した事はしていませんが、視覚的な効果はそれなりではないかと…単に私がこういうの好きなだけかもしれませんけどね？ ちなみに、こちらは私が作成したCocoonのデモサイトになります、当エントリーのカスタ

2018/04/14WordPressテーマ リリース当初から何かと話題になっている無料WordPressテーマのCocoonですが、Simplicityと同様に機能はこれでもかってくらい盛り沢山なのに対して、見た目的にはちょっと寂しいと感じている人もいるのではないかと思います。 私とか（またそれか） そこで、せめて見出しだけでもカスタマイズしたいという事で、Cocoonの各見出し部分のclassセレクタをひと通り調べてみました。カスタマイズ例として簡単なサンプルも挙げていますが、あくまでもclassセレクタの紹介がメインなのでスタイル自体は自分で頑張って下さいね？という点はご了承を。 投稿・固定ページの見出しなどデベロッパーツールの使い方がよくわからない内は、簡単そうに見えて意外と苦労させられる事もあるのがこの記事内の見出しではないでしょうか。テーマと言うかテーマの作者さんによってcla

2018/03/28WordPressテーマ まだ公開されたばかりの無料WordPressテーマCocoonですが、フォーラムの勢いもあってか日々すごいペースで更新されています。親テーマに対しての更新ならオンラインアップデーターでサクっと更新出来ますが、子テーマの場合はそういうわけにもいきません。 今回は子テーマの更新という事で、作者さんの方で子テーマのアップデート内容がわかるようにとGitHubへのリンクが貼ってありますが、それではよくわからないという方もみえるかと思いますので、私なりに子テーマのアップデート手順を書いてみました。 Cocoon子テーマ0.2から0.3へのアップデート作者のわいひらさんの方でリンクされているGitHubのコミット内容はこちらになります。 参考ユーザー用テンプレートの追加 | cocoon-child 見る人が見ればこれだけで十分わかる内容ですが、わからない

2018/03/202018/03/24WordPressテーマ 無料WordPressテーマならとりあえずSimplicity入れとけばいいんじゃね？と言われる程の定番テーマSimplicityの後継テーマCocoonのβ版がリリースされました。 あのSimplicityの後継テーマと聞いては期待しないわけにいきません。尻の…もとい腰の重い私ですが、秒で公式サイトに飛んでちゃっかりゲットしてきました。そんなわけで当エントリーでは無料WordPressテーマCocoonのファーストインプレッション的な所感を書いてみたいと思います。 Cocoonはまだβ版ですとりあえずCocoonはまだβ版という事で、登録ユーザーのみダウンロード可能となっています。なんだそれーとか実は私も思いましたが、メールアドレスを登録するだけなのでまぁいいかと早速ユーザー登録してダウンロードしてみましたよ？ Cocoo

2018/03/11WordPressテーマ ウィジェットに設定した内容をショートコードで投稿や固定ページに使いたいなぁ…と思う事ってありますよね。それはちょっとしたコンテンツだったりAdSenseのような広告だったりと使い方は人それぞれですが、標準でその機能を持ったテーマというのはありそうでなかなか無いのが実情です。そこで当エントリーではそのウィジェットを作ろう！という内容になります。 例によって素人が見よう見まねで作ってみましたレベルのモノですんで、ご利用は自己責任という事でお願いしたいですが、万が一失敗してWordPressが真っ白になってもドンマイですよ？ 当エントリーは私が過去に公開していたサイトのリライト記事になります。 WordPressの投稿・固定ページにショートコードで挿入出来るウィジェットを作ってみた カスタムショートコードの作成ぶっちゃけコレはSTINGER系テーマの

プラグインのインストールと有効化プラグインのインストールと有効化に関してはわかる方には特に説明不要かと思います。プラグイン名をキーワードにして検索する場合はWP Plugin Info Cardをコピペすると、一覧の先頭に当プラグインが表示されるのでそのままインストール＆有効化するだけです。 実はプラグインのインストール方法がまだよくわかっていない、という方にはこちらのエントリーがお役に立てば幸いです。 以降はWP Plugin Info Cardをインストールして有効化まで済んだものとして話を進めていきます。 プラグインの設定設定画面では特にする事は無いのでとりあえずはそのままでもOKです。強いて言えばデフォルトのカラースキームを設定したい場合にイジるくらいかと思いますが、ひとまずざっくりと説明しておきます。 WP Plugin Info Cardの設定画面ダッシュボードから設定 > W

2018/02/19WordPressテーマ STINGER PLUS2のウィジェット画面でPROとマークのついたウィジェットってありますよね。見ればわかるようにPRO版限定の機能を表しているわけですが、これってPCの環境によってはちょっとわかりにくい場合もあるんじゃないでしょうか、という事で小ネタ的なカスタマイズになります。 ディスプレイによってはPROマークが見えない私のPCと言うかディスプレイの解像度は既に廃れつつある感じの1280pxなので、見出しの長いウィジェットだとPROのマークが見えない場合があるんですよ…これが。 そろそろ高解像度のディスプレイに変更したいとは常々思ってますが、仮にPROマークが見えていたとしても、ウィジェットをドラッグ＆ドロップする時に想定外の場所に放り込んじゃって「おかしいな…表示されないんですけど？」とかいう事もあるんじゃないかと思うんですよね。 私と

2018/02/18WordPressテーマ WordPressの公式ディレクトリに登録されているテーマは、有料テーマの販促用に機能を制限した無料版という位置付けのものが多いので、デザイン的に優れたテーマが多いように思います。 しかしその公式テーマもダッシュボードからのプレビュー画面では、テーマのデザインが全くと言っていいほどわかりません。もし、あのプレビュー画面でテーマの良し悪しを判断してる方がいたら、それは理想のテーマに出会うチャンスを逃している可能性大？かも？ というわけで、当エントリーでは公式テーマを選ぶ時は必ずデモサイトを見てからにしましょうね？というお話になります。 ダッシュボードからのプレビュー画面ではテーマの良さが全く伝わらないどころか、どのテーマもほとんど同じに見えちゃうんですよねぇ…むしろあの詳細画面にこそデモサイトへのリンクを貼るべきだと思うんですが、なんであんな面倒

2018/02/13WordPressテーマ 無料WordPressテーマLuxeritasではカスタマイザーから簡単に記事一覧の表示タイプをグリッド化したり、更にそのカラム数も1～4の範囲で変更出来るというこの上なく便利な機能が標準装備されていますが、実はグリッドレイアウトを3列以上に設定した時に”ある現象”が発生する場合があります。 これはテーマ側に問題があるわけでもバグでもありませんが、私としては現在準備中のサイトの為に何とかしたい現象だったので、無い知恵を絞ってその対策を考えてみました。 最終行だけ両端揃え・均等割付になるその”ある現象”とはグリッドレイアウト3列以上でかつ最終行の表示件数が1以外の端数の時に起こる現象で（わかりやすく書いたつもりですが合ってるかな…）flexboxと言うかjustify-contentの仕様によって最終行だけ両端揃え、または均等割付したように見えて

2018/02/10その他のWEBサービス 現在ではブログやホームページなどのテンプレートはレスポンシブ対応が必須と言いますか、対応していないものは既に見向きもされないような状況ではないかと思います。しかし、テンプレートはレスポンシブ対応していても、自分で書いたコンテンツやウィジェット・プラグインで設置した部分に関しては何らかの対応が必要になる場合も少なくありません。 私自身が普段PCでしかサイトをブラウジングしない人なので、たまーにスマホから自分のサイトをチェックした時に「やだ、なにこれ…」という事は割と日常茶飯事だったりしますが（ちゃんと確認しなさいよ…）みなさんはそういった事の無いよう、URLを入力するだけで簡単にスマホ・タブレット・PCでの表示をまとめて確認出来るツールを紹介したいと思います。

ウィジェットエリアの作成functions.phpに以下の内容をまるっとコピペします。日本語での説明や、idとclass名は好きなように変えていただいて結構ですが、当然そこに関連する部分は修正が必要になるので注意して下さいね？ /* ヘッダー下にウィジェットエリアを作成 */ if (function_exists('register_sidebar')) { register_sidebar(array( 'name' => 'ヘッダー下用ウィジェット', 'id' => 'header-bottom', 'description' => 'ヘッダー下に表示するウィジェットです。', 'before_widget' => '<div class="header-bottom">', 'after_widget' => '</div>', )); } コードがちゃんとコピペ出来ていれば、ダ

2018/01/252018/09/16マークアップ言語 画像を何枚か並べてちょっとしたギャラリー風にしてみたのはいいけれど、スマホから見たらレイアウトがあぁ…という経験は誰もが一度は通る道ではないでしょうか。そこで当エントリーでは画像を複数枚並べた時に巧くレスポンシブ表示出来るCSSのサンプルを紹介したいと思います。 当エントリーの内容に改良を加えたバージョンを以下のエントリーで公開しています。そちらでは画像だけでは無くテキストやその複合コンテンツもレスポンシブに並べて表示出来るようにしてみました。