TOP

Home  >  ブログ  >  時空 解  >  パソコンソフト関連  >  Xoops Cube modules d3diary の書体の調整方法。

時空 解 さんの日記

 
2016
10月 3
(月)
23:55
Xoops Cube modules d3diary の書体の調整方法。
本文
みなさん、こんばんは。時空 解です。
久々に Xoops の調整をちょっとしてみましたので、それについて書いてみます。

このブログは XOOPS Cube Legacy 2.2.3 における d3diary と言うモジュールを使って作っています。
 
さて、その d3diary の書体を調整する方法です。
ホームページ のホームからログインをすると、"管理者メニュー" と言うユーザーメニューが現れます。

 
ログイン前のホーム画面
 
 
ログイン後のホーム画面
 

まぁ皆さんが会員登録してログインをしても、この管理者メニューと言うのは出て来ませんのでご了承くださいね。管理者メニューと言うのが表示されるのは XOOPS Cube を使って HP を構築した人がログインした場合です。
ともかく、この "管理者メニュー" をクリックして、管理者ページに飛ぶと今度は d3diary(リネームにて "ブログ" としてある)と言う①の部分をクリックすると下記のようなページが表示されるので確認してみてください。
 
上記の画面で ② "テンプレート管理" をクリックします。するとテンプレート管理画面が表示されるので、ここで目的のテンプレートファイルを編集します。
 
編集するのはオリジナルファイルの方ではなくて、コピーした方を編集しますので、コピー作業を事前にしておきましょう。(コピー作業方法はここでは省略します)
 

編集が実行されたテンプレートは上図のように緑表示された状態になります。編集したいテンプレートは "編集" をクリックする事で編集画面が開きます。
 
さて、d3diary と言うモジュールのブログの書体は、d3diary_main_style.css と言うテンプレートを編集することで実施できます。編集する装飾変数は .itemDiary .item div.itemBody です。下記の図の青色の文字で示されているコードが編集部分です。
 
font-family:メイリオ; と言うのがみてとれるでしょう。他にも二つ青色の文字で書かれたコードがありますね。それが行間と文字間隔を指定するコードですよ。
 
 
さて、書体と行間、文字間隔を指定するコードの書き方は分かって貰えたと思うのですが、では
「ブログの書体変更は、どのテンプレートの、どの装飾変数で指定するの?」
これをどのように調べたらよいのでしょうか?

これは、IE ブラウザ などの場合、ブログを開いている状態でキーボード F12 キーを押して、開発者ツールを開きます。

上記の開発者ツール画面で、① の要素の選択 をクリックし、② の本文をクリックしてやると ③ に表示されているように .itemDiary .item div.itemBody が出て来ます。font-family がちゃんとメイリオになっていて、しかも行間、文字間隔の指定も見えますよね。
テンプレートのファイル名は index.php(282) と言う表現がされています。index.php と言うファイル名は大抵メインのスタイルシートを示している場合が多いので d3diary_main_style.css と予想できるでしょう。
試しに ④ の□の中にレ点をクリックして font-family 指定を無効にしてみましょう。本文の書体がメイリオから標準に変化するはずです。
 
ちょっと今日は長くなりましたが、この辺で。
千里の道も一歩から。
----------------------------------------------------------------------------------------------
今日の「良い習慣化計画」実施状況
 基本の習慣
   朝は七時に起きる。→ OK
   夜は11時に寝る。→ OK
   読書をする。→ NG
   数学、物理の勉強をする。→ little OK
   スポーツをする。(ボルダリング)→ 握力強化 OK
                    
   SNS で発信する。→ ブログ書いた。
----------------------------------------------------------------------------------------------
独学協友会の動画は YouTube チャンネル でご覧になれます。

閲覧(4903)
コメントを書く
コメントを書くにはログインが必要です。
メインメニュー
ログイン
ユーザー名:

パスワード:



日記投稿者リスト
カレンダー
月表示
カテゴリー
にほんブログ村リンク