I Found It!

広告

カスタマイズメニュー

Updated at 2016/10/28

難易度   かんたん   ふつう   むずかしい
おすすめ度   ちょっとおすすめ   おすすめ   かなりおすすめ

簡単にコードを見やすく表示する方法
技術記事などでコードを記事に貼り付ける際にハイライト表示させる方法を紹介します。

ヘッダーに画像を貼り付ける
ヘッダーに画像を貼り付ける方法とその位置調整のポイントなどを紹介します。

タイトルに好きなWebフォントを使う
Google Webフォントの利用方法をご紹介。スマホ版でも利用可能なcssを変更する方法で紹介しています。

左右の余白をなくす
PC版テンプレートから左右の余白をなくします。

サイドバーコンテンツ共通のスタイルを変更する
サイドバーコンテンツのスタイル変更例として当サイトのスタイルに変更する方法を紹介します。

２行の変更でサイドバーコンテンツタイトルにFont Awesomeのアイコンを表示する
人気のWebアイコンフォント　Font Awesomeの利用方法を紹介し、具体例として、サイドバーコンテンツのタイトルに使用してみます。

パンくずリストを表示させる
PC版テンプレートにコピペするだけで簡単にパンくずリストを表示させます。

PC版レスポンシブ化特集
Bootstrapを使用してPC版テンプレートのレスポンシブ化（画面サイズに合わせて最適なレイアウトにする）を進め、スマホ版とPC版の統合を目指す特集です。（各ステップ必要なのでおすすめ度は記載していません。）

スマホ版とPC版を統合するメリット・デメリット
レスポンシブデザインことはじめ
Bootstrapを適用してスマホサイズでも見易いレイアウトに移行していきます。
レスポンシブなメニューを設置する方法
Bootstrapの基本のメニューを作ります。カスタムカラーに変更する方法も紹介します。
スマホでも常にPC版を表示させる方法
スマホからのアクセス時もPC版テンプレートを表示させるための変更を行います。
このカテゴリーの最新記事、のレスポンシブ化
Bootstrapのグリッドシステムを利用して、画面サイズに応じて「このカテゴリーの最新記事」の表示列数を切り替えます。>
メインレイアウトにグリッドシステムを採用する方法
画面サイズに応じて柔軟にレイアウトできるBootstrapのグリッドシステムをまずはメインレイアウトに使います。
コメントを書く、のレスポンシブ化＋α
Bootstrapを使用してコメント入力フォームをレスポンシブデザインにする方法に加え、テンプレートの入力フォームで改善した方がいいな、と思う点を紹介します。

オリジナルのソーシャルボタンの作り方
はてなブックマークにブックマーク、Facebook･Twitter･Google+でシェア、LINEに送る ボタンを作ります（PC版テンプレート対象）。Webフォントを使用した超軽量ボタンが作成できます。

フッターにタグクラウドを表示させる方法
PC版テンプレートのフッター部分にタグクラウドを表示させる方法を紹介します。