サイドバーにTwitterタイムライン・画像クリックで拡大(Lightbox)・記事間の境界線

wplesson

このブログで実際にやってみた初心者向けWP(WordPressテーマはSimplicity)カスタマイズメモ。

  1. サイドバーにTwitterのタイムラインを表示
  2. 画像クリックで拡大表示
  3. 記事一覧とサイドバーに境界線を表示
  4. 今日のふりかえり

サイドバーにTwitterのタイムラインを表示

昔からのド定番なので、絶対にやりたくて。笑

Twitterにログインして「設定」 > 「ウィジェット」の新規作成から、Twitterウィジェットを作成しましょう。左側でオプションを設定したら、「ウィジェットを作成」をクリックしてHTMLコードを生成します。後は、このコードをHTMLのTwitterタイムラインを表示したい場所にペーストするだけです。Wordpressの場合はテンプレートにペーストします。

@chodoさんのブログ(kudox.jp 新しくなったTwitterウィジェットをカスタマイズしよう)より引用

  1. ワードプレスメニューから、ウィジェット →サイドバーウィジェットにテキストを追加
  2. 「タイトル」に表示させたい項目名を入力(ex:”My Tweet”)
  3. 「内容」にTwitterウィジェットで作成したコードを入力して保存

@chodoさんのブログ(kudox.jp 新しくなったTwitterウィジェットをカスタマイズしよう)を参考にさせていただきました。ありがとうございます♡

画像クリックで拡大表示

Simplicityに画像ギャラリー表示するLightbox機能があるのでカンタンに設定できました。

  1. ワードプレスメニューから、プラグインの追加 →Lightboxを追加 →有効化
  2. カスタマイズ →画像リンクをギャラリー表示にチェックを入れて保存

Simplisity (Simplicity1.4公開。大きなヘッダー画像機能、SEO的タイトル変更、画像のギャラリー表示機能追加など。)を参考にさせていただきました。ありがとうございます♡

記事一覧とサイドバーに境界線を表示

  1. Simplicityの子テーマをダウンロード&インストールします。
  2. テーマの編集 →Simplicity child: スタイルシート (style.css)に下記を追加してファイルを更新します。

#main .entry {
border-bottom: 1px solid #d3d3d3;
padding-bottom: 15px;
}

#sidebar h4 {
font-size:20px;
border-bottom: 2px solid #ffd700;
padding:10px 0;
}

マーカーの部分をそれぞれ好きな色に変更するだけ。
記事一覧には薄いグレー(#d3d3d3)の1ピクセルの実線(solid)
サイドバーには黄色(#ffd700)の2ピクセルの実線(solid)

色見本は、WEB色見本 原色大辞典がいつも見やすくて好き♡

色々とカスタマイズをしていきたくなるのがWordPressですが(中略)親テーマにカスタマイズすると親テーマがバージョンアップすると全部上書きされるので、カスタマイズがパーになるようです。

ジンさんのブログ(おサイフプラス WordPressテーマ「Simplicity」のカスタマイズは子テーマでするといいらしい)より引用

そうなんや!これは結構重要かも!ありがとうございます。めもめも。

今日のふりかえり

おもしろくて時間がたつのがあっというまでした。笑
ヒラメちゃんの講座で基本的なとこは設定してきたけど、やっぱりちゃんと理解したいな。
初心者向けのWoordpressの本を一冊は買おう。でも、ありすぎてどれがいいのかサッパリ。迷う。


The following two tabs change content below.
オカダマキコ
40歳で初の自動車業界へ転職。主にマーケティングとロジスティックを担当しています。ほぼ年下の先輩方のご指導のもと、楽しく「くるま屋さん四年生」やってます♡プライベートではふたりの息子&ミニチュアピンシャーの女の子と一緒に大阪の東のほうで暮らしています。シングルマザー歴17年超。プロフィールはこちら
オカダマキコ

最新記事 by オカダマキコ (全て見る)