Tag: CSS

テック系でブログを運営している人は、記事内にコードを記述するとき、何か味気ない感じがした経験はあると思う（プログラムの事を書く人）。 そんなとき、シンタックスハイライトを導入すれば、見栄えが良くなることをご存知だろうか。 *構文強調（英: syntax highlighting）とは、テキストエディタの機能であり、テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。この機能により、プログラミング言語やマークアップ言語といった構造化された言語において、その構造や構文上のエラーが視覚的に区別しやすくなるため、ソースコードの記述が容易となる。（ウィキペディア） この記事では、一瞬でシンタックスハイライトをブログ（ウェブサイト）へ導入できる、「highlight.js」の使い方を解説している。CDNを介したコードを利用すれば、ヘッダーにコピーアンドペーストするだけで導入できてしまうため、非常に便利で簡単。 少しでもプログラムのことを記事で書く人は、導入を強くオススメしたい。

Wordpressのプラグインに「Jetpack」というものがあるが、これは非常に便利で重宝する。Jetpackを開発しているのは、WordpressやWoocommerceを中心的に開発しているAutomattic社なので、セキュリティや信頼性といった面も優れている。 このJetpackが持つ機能の1つに、記事の下へ関連する投稿を表示させるというものがある。関連記事はOn/Offが選択でき、記事の回遊率を上げたい方には役立つ機能だ。 Jetpackの関連記事はデフォルトで3つ表示されるのだが、これがスマートフォンだと少し見栄えが悪くなってしまう。 せっかく表示されるのなら、偶数であった方が綺麗だと思わないだろうか。 筆者は6つが最適だと感じたので、PHPコードを少し加え変更してみた。 記事数を変更させるPHPコード

レスポンシブデザインで設計してあるウェブサイトでも、PaddingやMarginなどの関係から横揺れしてしまうことがある。 まずは、「画像 / 動画 / テーブル / スクリプトがレスポンシブになっているか」、コンテンツが「max-width: 100%; 」に設定されているかなど基本的な部分を確認してほしい。 それでも、ウェブサイトがグラグラと横揺れしてしまう時は、強制的にCSSで補正できる。 以下のコードは、「480px以内の画面では、横にはみ出しているものを非表示とする」という設定だ。