デザイン

画面キャプチャその1!おすすめはWindows付属の無料ソフト「Snipping Tool」の使い方

ツール
ブログで記事を書く、ブログで何かのテーマについて記事を書く、といった時、画面上に表示されている画像やグラフ、メニュー等、その一部を切り取って説明のために貼り付けたい!という場合が出てきます。いわゆる「画面キャプチャ」とか「スクリーンキャプチャ」とか呼ばれるものですが、効果的に使うと俄然説得力が高まり読者を記事...

ブログで表が記事の横幅を超えてしまう、欠けて見えない、という時の対処法

wordpress
表(テーブル)を使うと整理された記事になって良いですが、ワードプレスで表を使う場合、使っているテーマによっては記事の幅に収まらず、横幅を超えてしまう、飛び出してしまう、欠けて見えない、といったことがあったりします。まぁいいか、なんて思っていると、スマホで見た場合では非常に読みづらい記事になってしまうので、しっ...

WordPressでCSSを特定の記事だけページだけに反映したい場合の便利なプラグイン

plugin
WordPressでテーマなどのデザインカスタマイズをする場合、JetPackの機能にあるCSS編集や、「Simple Custom CSS」といったプラグインを使用しますが、「この記事、このページだけに特別にCSSを設定したい」といった場合もでてきます。以下の関連記事にもあるように、そのページ固有のidを使...

無料素材はここで探せ!高画質の画像からイラスト、芸能まで8選抜!

ツール
トレンドアフィリエイト、ブログなどで必要となる画像。画像はブログの顔となるヘッダー画像を作ったり、記事の先頭や記事の中、アイキャッチとして使用されますが、著作権などのリスク回避のために記事の中には一切画像を使わない、という「画像使わない派」もいたりします。私はやはり記事の見栄えやインパクトから最低一枚(記事の...

WordPressへYouTubeの貼り付け方法 – 動画の大きさを画面サイズに合わせて自動調整する技

CSS
記事の中に参考としてYouTubeの動画を貼る場合がありますが、ブラウザなどのウインドウサイズを小さくすると、YouTube動画だけが大きさが変わらず横にはみ出してちゃんと見れない!!なんてことありませんか?WordPressのテーマによっては自動でYouTube動画の大きさを画面サイズに合わせて調整してくれ...

ブログのヘッダー画像の作り方!簡単リサイズから文字入れまで独自性を打ち出す

デザイン
これからはブログは個性化の時代。同じ外観では他のブログとの違いがわかりづらく、グーグルから独自性がない=読者にとって有益でないサイト、と判断され、最悪ペナルティの対象(圏外に飛ばされる)になる、といった危険性さえ秘めてます。グーグルの評価もさることながら、他のブログとの違いが見えなければ訪れる読者も魅力を感じ...

Stinger8で記事下の関連記事を削除!5つのステップであっさり消す

theme
非常に広く使われているワードプレスの無料のテーマ「Stinger8」。このテーマは記事下に自動で関連記事が表示されるようになってますが、関連記事を別のプラグインを使って表示させたい、という場合、Stinger8で元々出している関連記事を消したい!という場合があります。ここでは、Stinger8で記事下の関連記...

著作権フリー画像の探し方!Googleでライセンスフリー、加工もできて再使用が許可された画像を簡単に見つける方法

ツール
ブログの記事を書くときに、画像を入れたい!でも著作権フリー、ライセンスフリーの画像(つまり権利を気にせずに自由に使える画像)をどうやって探せばよいか分からない!とお困りのあなた。ここでは、そんな悩みを一発解決。グーグルの検索を使って、ライセンスフリー、加工もでき商用利用も可能で、再使用が許可された画像の探し方...

Stinger8でヘッダー画像を記事でも表示させたい!投稿ページでも表示させるカスタマイズは瞬間で終わり!

theme
人気のテーマ「Stinger8」。流行なのか、読者から見たユーザビリティを考えると当たり前のこと、となるかも知れませんが、記事を表示すると(つまり投稿ページで)ヘッダー画像が表示されないんですね。ここは意見が分かれるところですが、ヘッダー画像はブログ、サイトの雰囲気づくりには一番のポイントです。やっぱり記事を...

「Stigner8」のサイドバータイトルが表示されない?CSSで簡単表示とデザインカスタマイズしてみる!

theme
ワードプレスの人気テーマ「Stinger8」。 でも、なぜかサイドバーの人気記事とか新着表示、カテゴリーなどの見出しというか、タイトルが表示されないんですね。こんな時はテーマを直接編集する、というのもありますが、ここではCSSを使って、サイドバーの見出しを簡単に表示させてみます。ついでにデザインも少しカスタマ...

「Stinger8」のサイドバーから新着記事表示を削除する2つの方法

theme
ワードプレスの人気のテーマの1つ「Stinger8」では、サイドバーに常に新着記事表示がされます。これはもともとテーマに組み込まれたもので、他によく使う新着表示用のプラグインを使うと、新着記事表示が2重になったりするんですね。ここではそんな状況を回避するために、Stinger8のサイドバーから新着記事表示の削...

ブログデザインのカスタマイズ!HTMLとCSSの使い方を簡単に理解する!

CSS
ブログのデザインをカスタマイズをする上で、避けて通れないのがHTMLとCSS.で、でた━━( ゚∀゚)人(゚∀゚ )━━!! 聞いたことあるけどイヤだーと思ったそこのあなた!いや何事もそうですが、1つ1つ見て行けば難しいことはありません。挫折するとしたら難しいからではなく、簡単そうが故に一気に色々とやろうとし...

横並びのメニュー項目の高さを揃えたい!CSSで子要素にheight100%、親要素に高さを指定するのがコツ

CSS
ワードプレスなど、テーマのデザインカスタマイズでよく手を入れるのが、上段に表示されるグローバルメニューです。背景色や文字色、枠や影付けなどは今ではCSSで簡単にできますが、メニュー項目の文字数の違いから、高さを揃えたりするのが結構難しかったりするんですね。親のブロック要素の高さが可変で、その中にあるリンクa要...

cssで先頭のや最後の要素を指定するには?nth-childとnth-of-typeの使い分け

CSS
ブログやサイトのデザインカスタマイズをしていると「先頭や最後のこの要素だけに指定がしたいんじゃぁ~」という場合が多くあります。力技、というか、まぁ普通にやろうとすれば、先頭の要素や最後の要素だけにクラスを指定して、そのクラスに対してCSSを定義する、なんてことをしますが、これが毎回クラス指定を書く、となると、...

ブログのヘッダー画像の大きさは?主要テーマを比較から縦250pxが良い!?

デザイン
ブログの見た目における一番のポイントは、なんといってもヘッダー画像。ヘッダー画像とは、ブログの一番上にドーンと表示される画像です。いよいよブログデザインの章に入りますが、まずはその一番のポイントであるヘッダー画像の大きさから見てみましょう。横幅は使用するテーマの幅によってきますが、縦幅をどうするかで見た目の印...