「賢威のカスタマイズ日誌」の記事一覧

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

share

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

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

メッセージアプリ風

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

faviconとウェブクリップのアイコンを作成して変更する

favicon

faviconとウェブクリップを作成し、変更・反映させる方法です。とても小さな部分ですが、個人的には重要な部分だと思っています。基本的に、Wordpressテーマは「賢威」、レンタルサーバーは「エックスサーバー」での設定方法を前提に進めていきます。

賢威(WordPress)サイドバーのテキストウィジェットにIDを振る

IDを振る

賢威などのWordpressテーマで、サイドバーのテキストウィジェットに個別のIDを指定する方法。基本的には賢威の場合でのやり方として進めていきますが、他のテーマでも応用できると思います。私自身あまり理解していないので、解説というよりは忘備録的記事。

賢威6.1でサイドバーの横幅を変更する方法

サイドバー

賢威6.1でサイドバーの横幅を変更する方法です。自分で用意したオリジナルCSSファイルに記述する方法、賢威の元ファイル(layout.css)を編集する方法の2通り。デフォルトでは29.5%になっているため、inosh blogでは30%に変更しました。

賢威が読み込んでいる複数のCSSを1つにまとめる

CSS圧縮

賢威では合計7個のCSSファイルが読み込まれているため、これらを1つのCSSファイルとしてまとめます。コード量やリクエスト数を減らすことで、見た目スッキリ!ページ表示速度向上!管理者にもユーザーにも優しく、良いことばかりです。

WordPressコメントでウェブサイトやメールアドレスの入力欄を消す

匿名希望

Wordpressのコメントフォームで、メールアドレスとウェブサイトの入力欄を消す(非表示にする)方法です。function.phpで消す方法、CSSで非表示にする方法、comments.phpで消す方法の3種類をご紹介します。

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

INDEX

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

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

ページトップへ戻る

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

賢威にブログ記事の最終更新日を表示する方法

更新

ブログの記事において、情報の鮮度というのは非常に重要ですよね!今回は、Wordpressで構築しているブログで、過去記事を修正したり加筆したりした場合に、自動で最終更新日を表示させるようにカスタマイズする方法をご紹介したいと思います。

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