新着記事
-
ブログの最適化
ブログの自動挿入記事上アイキャッチの容量過大で起こる減点対策!表示スピードアップ!
殆どのWordpressのテーマではタイトルの上等にアイキャッチが挿入できます。 そもそも記事の上にアイキャッチは必要なのか?という事は置いておきましょう。 記事のタイトル上のアイキャッチ(サムネイル)は、場合によっては効果があります。 画像の少ない記事では華やかになるツールとも言えます。 最近は自動でアイキャッチを挿入できるように設定する事ができるテーマも多い。 自動挿入させないで独自で挿入している場合も見受けられます。 自動にする事で便利な反面、少々厄介な事も発生します。 この記事はブログの最適化を検証した内容になり、最善の方法ではありません。 あくまでも検証と結果になりますが参考程度にご覧ください。 今回はブログのアイキャッチ画像に関して触れてみました。 -
ブログ制作
16進法プラスアルファで濃度の指定を!透過カラーの作成方法!白背景なら自由度増加
ブログの基本カラーや記事内の装飾で色を決めるのは悩みどころです。 DTPに慣れていればCMYKの数値で大体の色は想像がつきます。 WEBのコーディングに慣れていれば16進法の色が想像できます。 映像に慣れていればRGBの数値で色が分かるのかは不明ですが、 各分野で使用している言語や単位なら得意分野かもしれませんが、全く触れた事がなければさっぱり分かりません。 ブログ等のカスタマイズをしていると16進法は切っても切れない縁があります。 最近は微妙な色作りはGoogle上でもできます。 DTPの経験が長いと色の濃度は%で指定したい気持ちが大きい。 今回は16進法の濃度指定についてご紹介します。 -
Smart Slider3
SmartSlider3のカウントダウンレイヤーの日本語翻訳を修正する!他プラグインも応用可
Smart Slider3のPRO版には魅力的なツールがたくさんあります。 何かのイベントがある時などは「カウントダウン」できるツールもあります。 ところが、このカウントダウンレイヤーには思わぬ落とし穴が! デモ版を見ると、英語表記でブラウザーの翻訳だと正しく表示されています。 ところが、自サイトで編集する際の翻訳は明らかにおかしい日本語です。 たまにWordpressのプラグインの日本語訳がおかしい事はあります。 内部的のものなら、誤りも影響無いが、オープン画面で誤表記表示されると良くない。 今回はSmart Slider3のカウントダウンレイヤーの翻訳についてご紹介します。 -
Smart Slider3
Smart Slider3:リットリンク風デザインのSNSボックス作成!lit linkをブログに!
lit link(リットリンク)は言わずと知れたSNS等のリンクページです。 気軽にパーソナルリンクサイトを作れる為、取り入れている方も多いでしょう。 ブロガーの皆さんは、もしかしたらこう思うかもしれません。 自分のブログを総合的な発信元にすれば良い! しかし、lit linkのようなサービスの方が伝えやすいしSEO力も高い! とりあえずlit linkでも表示しておこうか… 今回はブログ内にlit link風のデザインでSNSリンクページとブログ用サイドバーのプロフィールボックスを作ってみました。 -
Smart Slider3
SmartSlider3で自由なレイアウトのInstagramスライダー作成!レスポンスも最高!
ブログ内にカルーセルなどでInstagramの画像を入れたい時がある。 Instagram用のプラグインが存在しますが、使ってみると表示が重い。 Smart Slider3にもSNSのデータを取得する事ができるスライダーがあります。 表示させる数も設定できますが、多ければ多いほど表示も遅くなる可能性があります。 Instagramの画像は正方形で投稿する事が多い為、統一している方が綺麗に表示できます。 Instagram用のプラグインも良いですが、周囲のデザインやカスタマイズが困難です。 カスタマイズしたとしてもかなり面倒な作業かもしれません。 -
Luxeritas
Luxeritasカスタマイズ:固定ページを全画面表示にする際のCSS!フルスクリーンページ
固定ページをトップページにしたり案内ページにする際、 ただ単に投稿スペースに内容を入れるだけなら記事と同じように編集すれば良い。 記事ページを始め、アーカイブや新着ページのようにヘッダーとフッターが同じように表示されているよりも、少し変わった趣向を取り入れても良いのでは? このような動機から固定ページを記事ページ等と異なるデザインにする為に全画面表示を行いました。 -
Smart Slider3
Smart Slider3:デジタル風なブログヘッダー全幅デザイン例!アニメーション付き
Smart Slider3(スマートスライダー3)はWordpressのプラグインのひとつで スライダーやカルーセル等を簡単に構築できるプラグインです。 以前からSmartSlider3を取り入れていましたが、当初は表示が重かった。 特にスマホでの表示はとても及第点を出せませんでした。 最近では色々な意味で最適化され、 Smart Slider3を表示させているページも通常ページ同様のスピードで表示されるようになりました。 それらもあって、積極的にSmart Slider3を活用しています。 今回はSmart Sliderでテスト的に作成したヘッダーデザインをご紹介します。 -
Luxeritas
Luxeritasカスタマイズ:トップページ全画面表示で謎の空白!パディング?マージン?
Wordpressのテーマのカスタマイズはキリがありません。なぜカスタマイズに時間を割... -
Luxeritas
Luxeritasクラシック環境でブロックを使って自前の商品リンク!WordPressの編集環境
wordpressのブロックエディタは様々なレイアウトができる為、デザインの幅が広がり... -
ブログの最適化
Google Material Iconsは表示スピードが早くなる?利点と欠点!Font Awesomeから卒業!
使用しているブログのテーマ「Luxeritas」で「Google Material Icons」を採用。Font AwesomeからGoogle Material Iconsに全移行してみました。Luxeritasを使用していなくてもGoogle Material Iconsは使えますが、Luxeritasの場合、アイコンのコードさえ記入すれば即使えます。Google Material Iconsに移行した理由なども記載しておきます。