「Webデザイン」の記事一覧

コンテンツ下(記事直下)をデザイン-SNSボタンや関連記事の表示

share

記事直下にSNSボタンや関連記事を表示させ、CSSでデザインしました。関連記事はプラグイン「Yet Another Related Posts Plugin(YARPP)」で表示。また、ソーシャルのJavascriptを1つにまとめて非同期化処理を加え、表示速度向上の対策なども。

WordPressのコメント欄をLINE風にカスタマイズ(賢威)

メッセージアプリ風

Wordpressのコメント欄を、LINEなどのメッセージアプリ風のデザインにカスタマイズしてみました。また、Gravatarを使うことでコメント欄のアバターを任意の画像に変更するとともに、コメントとトラックバックを別々に表示させるようにしました。

WordPress記事内にソースコードを綺麗に表示 – SyntaxHighlighter Evolved

SyntaxHighlighter Evolved

Wordpressの記事内において、ソースコードを綺麗に表示させるためのプラグイン「SyntaxHighlighter Evolved」の一般的な設定方法、使用方法、CSSを適用させるための注意点や例などについて解説します。

賢威のトップページをカスタマイズする

INDEX

inosh blogで使っているテーマ「賢威」のトップページをカスタマイズします。メインイメージの消去、アイキャッチ画像周辺の装飾、記事投稿日とカテゴリー名部分のカスタマイズ、続きを読むボタンやページ送りのカスタマイズなどをしていきます。

ページトップへ戻るボタンをCSSでデザインする

ページトップへ戻る

いよいよ、現在右下に固定表示されている「ページトップへ戻るボタン」のデザインをCSSでカスタマイズします。ちなみに今回は、上にも下にも行けるように2つのボタンを作成したいと思います。なぜ下にも行く必要があるかって?それは記事内で(ω)

賢威の投稿ページ上部に記事の抜粋を表示させる

抜粋

せっかく抜粋(meta description)を自分で考えて設定するのであれば、スペースがあればコンテンツとしても表示させたいですよね。今回の記事では、投稿ページの上部に表示させたアイキャッチ画像の横に、抜粋を表示させたいと思います。

賢威の投稿ページで記事上部にアイキャッチ画像を表示

アイキャッチ

時間的にも作業的にも何かと面倒なアイキャッチ画像。トップページだけにしか表示されないのは、もったいない!ということで、投稿ページ上部にもアイキャッチ画像を表示させるよう、PHPファイルをカスタマイズします。

賢威のフッターをカスタマイズする

フッター

今回は、inosh blogに使用しているテーマ「賢威」のフッターをカスタマイズしていく様子をご紹介します。「アドレス」や「メニュー」の表示を消去、フッターのセンターにロゴを表示させる、フッターの各要素のカスタマイズなど。

賢威のサイドバーをカスタマイズする

サイドバー

今回は、inosh blogに使用しているテーマ「賢威」のサイドバーをカスタマイズしていく様子をご紹介します。カテゴリー横に表示される投稿数(記事数)をaタグの中に入れてspanタグを挿入したり、見出しやliリストのカスタマイズなど。

賢威のコンテンツエリアをカスタマイズする

コンテンツエリア

今回は、inosh blogに使用しているテーマ「賢威」のコンテンツ部分をカスタマイズしていく様子をご紹介します。全体背景の指定、コンテンツ部分の見出しのカスタマイズ、コメント送信のボタンのカスタマイズなど。

サブコンテンツ
ページトップへ戻る ページエンドへ進む